最近做一个小的项目，用到了很多关于jquery函数，下面简单总结下自我感觉比较常用的一些函数。
jquery函数－－Hide函数用法
jquery中，hide函数用于实现层的消失，相反，show函数用于实现层的显示。演示代码如下：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="/Public/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery-css</title> </head> <body> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>
通过button标签的click事件，我们获取p标签，执行hide（）函数，p段落消失。
jquery函数－－CSS 选择器
jquery中的CSS选择器用于动态添加标签的css样式：演示代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="/Public/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery-css</title> </head> <body> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").css("background-color","red"); }); }); </script> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html>
通过获取p标签，接着加上.css的功能，就可以改变p标签的样式了。。。
jquery函数－－slideToggle用法
slideToggle可以用于下拉缩起的功能，大家一定会想到菜单吧，这个在网页制作中用得非常多。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="/Public/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery-css</title> </head> <body> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("p").slideToggle(); }); }); </script> <p>This is a paragraph.</p> <button class="btn1">Toggle</button> </body> </html>
slideToggle里有个参数，用于确定速度的，可以为slow,normal,fast。学好这个函数吧，在许多地方可以用到哦。。。
jquery函数－－fadein fadeout用法
fadein,fadeout可以用于实现点击按钮层消失出现，当然这种渐变也是可以通过参数slow,normal,fast进行控制的。这个例子可以用在什么地方呢？想不出来，但应该是层的隐藏之类的，或许在动画中的应用比较多。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="/Public/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery-css</title> </head> <body> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("p").fadeOut() }); $(".btn2").click(function(){ $("p").fadeIn(); }); }); </script> <p>This is a paragraph.</p> <button class="btn1">Hide</button> <button class="btn2">Show</button> </body> </html>
jquery就是这么牛，通过获取标签，接着执行fadein函数，层就消失了。。。
jquery函数－－fadeto用法
fadeto或许可以说是一个特殊的fadein吧，加上一个数字，实现用户想达到的效果。speed,opacity,callback，这三个参数，用得多的也就是前面两个了，一个速度，一个透明程度，简单吧。。。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="/Public/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery-css</title> </head> <body> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("p").fadeTo(1000,0.4); }); }); </script> <p>This is a paragraph.</p> <button class="btn1">FadeTo</button> </body> </html>
速度为1000毫秒，透明程度为0.4，你想怎么改就怎么改
jquery.query.js获取url参数
在这里提出一个问题，如果要你获取到url里的参数，你会怎么做？作为一个前端开发工程师，这样事情，我们通过JS也是可以做到的。今天，我们向大家介绍两种做法，一个是通过jquery，一个是通过js来实现。
我们在百度里到处都可以找到jquery.query.js，大家都在介绍这个插件，在这里，我们先说下这个插件，引进这个插件后，大家在使用中：
//以下为query.js实现的获取url后参数的做法
$(function(){
var id=$.query.get('cid');
alert("jquery实现的cid:"+id);
});
这个时候，你会不会体会到jquery的神奇，这么短的代码，就可以将url里的参数获取到。。。
接下来，我们介绍下传统JS的做法：
function request(paras)
{
var url = location.href;
var paraString = url.substring(url.indexOf("?")+1,url.length).split("&");
var paraObj = {}
for (i=0; j=paraString[i]; i++){
paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length);
}
var returnValue = paraObj[paras.toLowerCase()];
if(typeof(returnValue)=="undefined"){
return "";
}else{
return returnValue;
}
};
alert("js实现的cid:"+request("cid"));
在这个代码中，我们需要获取url ?后的地址，接着再将&左右的参数分离。。。
用户在测试这个代码的时候，需要在url中加上?，我们以cid做为参数的前缀，用户可以自行测试。。。