jquery技巧总结

最新推荐文章于 2021-10-01 01:00:32 发布

eternity668

最新推荐文章于 2021-10-01 01:00:32 发布

阅读量1k

点赞数

分类专栏： jquery 文章标签：技术总结

jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

一、简介

1.1、概述
随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等，通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的，它有助于简化 JavaScript™ 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery：prototype就像Java，而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

它具有如下一些特点：
1、代码简练、语义易懂、学习快速、文档丰富。
2、jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
3、jQuery支持CSS1-CSS3,以及基本的xPath。
4、jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
5、可以很容易的为jQuery扩展其他功能。
6、能将JS代码和HTML代码完全分离，便于代码和维护和修改。
7、插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。

jQuery的设计会改变你写JavaScript代码的方式，降低你学习使用JS操作网页的复杂度，提高网页JS开发效率，无论对于js初学者还是资深专家，jQuery都将是您的首选。
jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不同的Web应用程序中。
官方站点：http://jquery.com/ 中文站点：http://jquery.org.cn/

1.2、目的
通过学习本文档，能够对jQuery有一个简单的认识了解，清楚JQuery与其他JS框架的不同，掌握jQuery的常用语法、使用技巧及注意事项。

二、使用方法
在需要使用JQuery的页面中引入JQuery的js文件即可。
例如：<script type="text/javascript" src="js/jquery.js"></script>
引入之后便可在页面的任意地方使用jQuery提供的语法。

三、学习教程及参考资料
请参照《jQuery中文API手册》和http://jquery.org.cn/visual/cn/index.xml
推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》
(说明：以上文档都放在了【附件】中)

四、语法总结和注意事项

1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get (n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个< div>元素的内容。有如下两种方法：
$("div").eq(2).html();              //调用jquery对象的方法
$("div").get(2).innerHTML;       //调用dom的方法属性

4、同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：
$("#msg").html();              //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text();              //返回id为msg的元素节点的文本内容。
$("#msg").text("<b>new content</b>");
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示粗体的<b>new content</b>

$("#msg").height();              //返回id为msg的元素的高度
$("#msg").height("300");       //将id为msg的元素的高度设为300
$("#msg").width();              //返回id为msg的元素的宽度
$("#msg").width("300");       //将id为msg的元素的宽度设为300

$("input").val(");       //返回表单输入框的value值
$("input").val("test");       //将表单输入框的value值设为test

$("#msg").click();       //触发id为msg的元素的单击事件
$("#msg").click(fn);       //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f']})
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})
//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能
$.extend({
       min: function(a, b){return a < b?a:b; },
       max: function(a, b){return a > b?a:b; }
});       //为jquery扩展了min,max两个方法
使用扩展的方法（通过“$.方法名”调用）：
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

7、支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。
例如：
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f']});

8、操作元素的样式
主要包括以下几种方式：
$("#msg").css("background");              //返回元素的背景颜色
$("#msg").css("background","#ccc")       //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200");       //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select");       //为元素增加名称为select的class
$("#msg").removeClass("select");       //删除元素名称为select的class
$("#msg").toggleClass("select");       //如果存在（不存在）就删除（添加）名称为select的class

9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。
如：
$("#msg").click(function(){alert("good")})       //为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f']})
//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件：
（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$("tr").hover(function(){
$(this).addClass("over");
},
       function(){
       $(this).addClass("out");
});
（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert("Load Success")})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
       //每次点击时轮换添加和删除名为selected的class。
       $("p").toggle(function(){
              $(this).addClass("selected");
       },function(){
              $(this).removeClass("selected");
       });
（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：
       $("p").trigger("click");              //触发所有p元素的click事件
（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。
例如：
$("p").bind("click", function(){alert($(this).text());});       //为每个p元素添加单击事件
$("p").unbind();       //删除所有p元素上的所有事件
$("p").unbind("click")       //删除所有p元素上的单击事件

10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法
$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
等价于：
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
       alert("Item #"+i+": "+tempArr);
}
也可以处理json数据，如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
结果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：
$.extend(settings, options);
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数（合并多项并返回）
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为：[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如：$.merge( [0,1,2], [2,3,4] )       //返回[0,1,2,3,4]
$.trim(str)：删除字符串两端的空白字符。
如：$.trim(" hello, how are you?   ");        //返回"hello,how are you? "

12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。
如：
jQuery.noConflict();
// 开始使用jQuery
jQuery("div   p").hide();
// 使用其他库的 $()

$("content").style.display = 'none';

来源于：http://home.cnblogs.com/group/topic/345.html

以下是jquery中比较常用的一些操作实现方式：
$("标签名") //取html元素 document.getElementsByTagName("")
$("#ID") //取单个控件document.getElementById("")
$("div #ID") //取某个控件中控件
$("#ID #ID") // 通过控件ID取其中的控件
$("标签.class样式名") //通过class来取控件
$("#ID").val(); //取value值
$("#ID").val(""); //赋值
$("#ID").hide(); //隐藏
$("#ID").show(); //显示
$("#ID").text(); //相当于取innerHTML
$("#ID").text(""); //相当于innerHTML=""
$("#ID").css("属性","值") //添加CSS样式
$("form#表单id").find("#所找控件id").end() //遍历表单
$("#ID").load("*.html") //载入一个文件
例如：
$("form#frmMain").find("#ne").css("border", "1px solid #0f0").end() // end()返回表单

来源于：http://www.php100.com/html/webkaifa/ajax/2009/1206/3610.html

一、核心:$是jquery类的一个别名,$()构造一个jquery对象,jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。

1、 ${表达式}：根据这个表达式来查找所有匹配的元素。

eg:$("div>p"); 查找所有p元素，且这些p元素都是div的子元素.

$("input:radio",document.forms[0]); 查找文档第一个表单中，所有的单选按钮。

$("div",xml.responseXML);在一个由ajax返回的xml文档中，查找所有的div元素。

2、$(html标记字符串) :根据提供的html字符串，创建jquery对象包装的dom元素。

eg: $("<div><p>Hello</p></div>").appendTo("body");

创建一个 <input> 元素必须同时设定 type 属性

$("<input type='text'>")

3、$(dom元素):将一个或多个dom元素转换为jquery对象。

eg: $(document.body).css( "background", "black" ); 设置页面背景色

4、$(document).ready(function(){})==$(function(){})；在页面加载完成后自动执行的代码。

二、jquery对象访问。eq返回的是jquery对象，只能使用jquery方法，get返回的是dom元素对象，只能使用dom方法.

1、$(dom元素).each(function(){}):以每一个匹配的元素作为上下文来执行一个函数

2、$(dom元素).size()==$(dom元素).length;对象中元素的个数。eg:<img src="test1.jpg"/> <img src="test2.jpg"/>,jquery代码：$("img").size(); 返回2

3、context：返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。

4、$(dom元素).get()：取得所有匹配的dom元素的集合。如果你想要直接操作 DOM 对象而不是 jQuery 对象，这个函数非常有用。

5、$(dom元素).get(index)：取得其中一个匹配的元素.

6、$(dom元素).index():搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。

三、插件机制:

1、jQuery.fn.extend(object);扩展 jQuery 元素集来提供新的方法,针对某一个dom元素。

eg:jQuery.fn.extend({

check: function() { return this.each(function() { this.checked = true; });},

uncheck: function() { return this.each(function() { this.checked = false; });}

});

调用：

$("input[type=checkbox]").check();

$("input[type=radio]").uncheck();

2、$.extend(object);用来在jQuery命名空间上增加新函数,针对所有dom元素。

$.extend({

min:function(a,b){return a<b?a:b;},

max:function(a,b){return a>b?a;b;}

});

调用：$.max(10,20);

四、选择器

基本：

1、$("#id"): 根据给定的ID匹配一个元素。

2、$("dom元素名")：根据给定的元素名匹配所有元素

3、$(".Class类名"): 根据给定的类匹配元素。

4、$("*") ：匹配所有元素。

5、$("dom元素.class类名")：选择所有class属性为指定类名的dom元素。

6、$(".stripe tr"): 获取class属性为stripe的table元素下的所有行

层级：

1、$("ancestor descendant"):在给定的祖先元素下匹配所有的后代元素

2、$("parent > child"):在给定的父元素下匹配所有的子元素

3、$("prev + next"):匹配所有紧接在 prev 元素后的 next 元素

4、$("prev ~ siblings"):匹配 prev 元素之后的所有 siblings(同级) 元素

简单:

1、$("tr:first") 匹配找到的第一个元素

2、$("tr:last") 匹配找到的最后一个元素

3、$("input:not(:checked)") 去除所有与给定选择器匹配的元素

4、$("tr:even") 匹配所有索引值为偶数的元素，从 0 开始计数

5、$("tr:odd") 匹配所有索引值为奇数的元素，从 0 开始计数

6、$("tr:eq(1)") 匹配一个给定索引值的元素

7、$("tr:gt(0)") 匹配所有大于给定索引值的元素

8、$("tr:lt(2)") 匹配所有小于给定索引值的元素

内容：

1、$("div:contains('John')") 匹配包含给定文本的元素

2、$("div:has(p)") 匹配所有包含 p 元素的 div 元素

3、$("td:empty") 查找所有不包含子元素或者文本的空元素

可见性：

1、$("tr:visible") 查找所有可见的 tr 元素

2、$("tr:hidden") 匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到

属性：

1、$("div[id]") 查找所有含有 id 属性的 div 元素

2、$("input[name='newsletter']") 查找所有 name 属性是 newsletter 的 input 元素

3、$("input[name!='newsletter']") 查找所有 name 属性不是 newsletter 的 input 元素

4、$("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素

5、$("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素

6、$("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素

7、$("input[id][name$='man']") 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

子元素：

1、nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2) 匹配其父元素下的第N个子或奇偶元素

2、$("ul li:first-child") 在每个 ul 中查找第一个 li

3、$("ul li:last-child") 在每个 ul 中查找最后一个 li

4、$("ul li:only-child") 在 ul 中查找是唯一子元素的 li

表单：

1、$(":input") 查找所有的input元素

2、$("text") 匹配所有的单行文本框

3、$(":password") 匹配所有密码框

4、$("radio") 匹配所有单选按钮

5、$("checkbox") 匹配所有复选框

6、$("submit") 匹配所有提交按钮

7、$("image") 匹配所有图像域

8、$("button") 匹配所有按钮

9、$("file") 匹配所有文件域

10、$("hidden") 匹配所有不可见元素，或者type为hidden的元素

表单对象属性：

1、$("input:checked") 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

2、$("input:enabled") 匹配所有可用元素

3、$("input:disabled") 匹配所有不可用元素

4、$("select option:selected") 匹配所有选中的option元素

五、属性操作

操作属性：

1、$("img").attr("src"); 返回文档中第一个图像的src属性值。

2、$("img").attr("src","test.jpg"); 为所有匹配的元素设置一个属性值

3、$("img").attr("title", function() { return this.src }); 为所有匹配的元素设置一个计算的属性值

4、$("img").removeAttr("src"); 从每一个匹配的元素中删除一个属性

5、$("img").attr({ src: "test.jpg", alt: "Test Image" }); 将一个“名/值”形式的对象设置为所有匹配元素的属性。

操作CSS:

1、$("p").addClass("selected"); 为每个匹配的元素添加指定的类名

2、$("p").removeClass("selected"); 从所有匹配的元素中删除全部或者指定的类。一个或多个要删除的CSS类名，请用空格分开

$("p").removeClass();删除匹配元素的所有类

3、$("p").toggleClass("selected"); 如果存在（不存在）就删除（添加）一个类

4、 var count = 0;

$("p").click(function(){

$(this).toggleClass("highlight", count++ % 3 == 0);

}); 每点击三下加上一次 'selected' 类

HTML代码:

1、$("div").html(); 取得第一个匹配元素的html内容

2、$("div").html("<p>Hello Again</p>"); 设置每一个匹配元素的html内容

文本：

1、$("p").text(); 取得所有匹配元素的内容

2、$("p").text("<b>Some</b> new text."); 设置所有匹配元素的文本内容

值：

1、 $("#single").val() 获得第一个匹配元素的当前值。

2、$("input").val("hello world!"); 设置每一个匹配元素的值

六、筛选

过滤：

1、$("p").eq(1) 获取第N个元素，这个元素的位置是从0算起

2、 if ( $(this).hasClass("protected") ) 检查当前的元素是否含有某个特定的类，如果有，则返回true。

3、$("p").filter(".selected") 筛选出与指定表达式匹配的元素集合

4、is(expr) 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

5、$("p").not( $("#selected")[0] ) 删除与指定表达式匹配的元素

查找：

1、$("div").children();取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

2、$("p").find("span");搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

3、$("p").next();取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合

4、$("p").prev();取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

5、$("div").parent;取得一个包含着所有匹配元素的唯一父元素的元素集合。

6、$("span").parents;找到每个span元素的所有祖先元素

7、$("div").siblings();取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

七、文档处理

内部插入：

1、$("p").append("<b>Hello</b>"); 向每个匹配的元素内部尾部追加内容

2、$("p").prepend("<b>Hello</b>"); 向每个匹配的元素内部前部追加内容

3、$("p").appendTo("#foo"); 把所有段落追加到ID值为foo的元素中。

外部插入：

1、$("p").after("<b>Hello</b>"); 在每个匹配的元素之后插入内容

2、$("p").before("<b>Hello</b>"); 在每个匹配的元素之前插入内容

包裹

1、$("p").wrap("<div class='wrap'></div>"); 把所有匹配的元素用其他元素的结构化标记包裹起来。

替换：

1、$("p").replaceWith("<b>Paragraph. </b>"); 将所有匹配的元素替换成指定的HTML或DOM元素。

删除：

1、$("p").empty(); 删除匹配的元素集合中所有的子节点。

2、$("p").remove(); 从DOM中删除所有匹配的元素

八、CSS操作

CSS:

1、$("p").css("color"); 取得第一个段落的color样式属性的值

2、$("p").css({ color: "#ff0011", background: "blue" }); 把一个“名/值对”对象设置为所有匹配元素的样式属性。

3、$("p").css("color","red"); 在所有匹配的元素中，设置一个样式属性的值

位置：

1、var offset = p.offset();获取匹配元素在当前视口的相对偏移，返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

2、var position = p.position();获取匹配元素相对父元素的偏移

尺寸：

1、$("p").height(); 取得第一个匹配元素当前计算的高度值（px）。

2、$("p").height(20); 为每个匹配的元素设置CSS高度(hidth)属性的值

3、$("p").width(); 取得第一个匹配元素当前计算的宽度值（px）。$(window).width(); 获取当前窗口的宽

4、$("p").width(20); 为每个匹配的元素设置CSS宽度(width)属性的值

九、效果

基本：

1、$("p").show() 显示隐藏的匹配元素

2、$("p").hide() 隐藏显示的元素

3、$("p").show("slow"); 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

callback (Function) : (Optional) 在动画完成时执行的函数，每个元素执行一次。

用迅速的动画将隐藏的段落显示出来，历时200毫秒。并在之后执行反馈！

<p style="display: none">Hello</p>

jQuery 代码:

$("p").show("fast",function(){

$(this).text("Animation Done!");

});

4、$("p").hide("slow"); 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。

5、$("p").toggle() 切换元素的可见状态

6、$("p").toggle("slow"); 以优雅的动画切换所有匹配的元素，并在显示完成后可选地触发一个回调函数

淡入淡出:

1、$("p").fadeIn("slow"); 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数

2、$("p").fadeOut("slow"); 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

3、$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66); 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数

自定义：

1、$("#block").animate({

width: "90%",

height: "100%",

fontSize: "20em",

borderWidth: 10

201}, 1000 );用于创建自定义动画的函数。

十、事件

事件处理：

1、$("p").bind("click", function(){ alert( $(this).text() );}); 为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数

2、$("p").one("click",function(){alert(${this}.text());}) 当所有段落被第一次点击的时候，显示所有其文本

3、trigger(type,[data])在每一个匹配的元素上触发某类事件

事件委派：$("p").live("click", function(){$(this).after("<p>Another paragraph!</p>");});。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件。与bind()不同的是，live()一次只能绑定一个事件

事件切换:一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

$("td").hover(

function () {

$(this).addClass("hover");

function () {

$(this).removeClass("hover");

}

);鼠标悬停的表格加上特定的类

4、每次点击后依次调用函数。

$("td").toggle(

function () {

$(this).addClass("selected");

function () {

$(this).removeClass("selected");

}

);

5、事件:

1、$("p").blur(); 触发每一个匹配元素的blur事件

2、$("p").blur( function () { alert("Hello World!"); } ); 在每一个匹配元素的blur事件中绑定一个处理函数

3、change()；change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触

4、change(fn);在每一个匹配元素的change事件中绑定一个处理函数。

5、$("p").click(); 触发每一个匹配元素的click事件

6、$("p").click(function(){});在每一个匹配元素的click事件中绑定一个处理函数

7、dblclick()；dblclick事件会在元素的同一点双击时触发。

8、$("p").dblclick( function () { alert("Hello World!"); }); 在每一个匹配元素的dblclick事件中绑定一个处理函数。

9、$(document).ready(function(){ $("#login").focus();}); 触发每一个匹配元素的focus事件。

10、$("input[type=text]").focus(function(){this.blur();}); 在每一个匹配元素的focus事件中绑定一个处理函数。

11、keydown()；keydown事件会在键盘按下时触发。

12、keydown(fn)；在每一个匹配元素的keydown事件中绑定一个处理函数。

13、keypress()；触发每一个匹配元素的keypress事件

14、keypress(fn)；在每一个匹配元素的keypress事件中绑定一个处理函数。

15、keyup()；触发每一个匹配元素的keyup事件

16、keyup(fn)；在每一个匹配元素的keyup事件中绑定一个处理函数。

17、mousedown();

18、mouseup();

19、mousemove();

20、mouseover();

21、mouseout();

22、$("form:first").submit();提交本页的第一个表单。

23、$("form").submit(function(){return false;});阻止页面提交。

十一、ajax

ajax请求：

1、通有方式：$.ajax(prop);prop是一个hash表，它可以传递的key/value有以下几种:

(String)type：数据传递方式(get或post)。

((String)url：数据请求页面的url

((String)data：传递数据的参数字符串，只适合post方式

((String)dataType：期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")

((Boolean)ifModified：当最后一次请求的相应有变化是才成功返回，默认值是false

((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout

((Boolean)global：是否为当前请求触发ajax全局事件，默认为true

((Function)error：当请求失败时触发的函数。

((Function)success：当请求成功时触发函数

((Function)complete：当请求完成后出发函数

2、$.get(url, params, callback) 用get方式向远程页面传递参数，请求完成后处理函数，除了url外，其它参数任意选择！

eg:$.get( "ajax.asp",

{ name: "young", age: "25" },

function(data){ alert("Data Loaded: " + data); }

)

3、$.getJSON(url, params, callback) 用get方式向远程json对象传递参数，请求完成后处理函数callback

4、$.post(url, params, callback) 用post方式向远程页面传递参数，请求完成后处理函数callback

十二、工具类

数组和对象操作：

1、$.each(obj,callback); 通用例遍方法，可用于例遍对象和数组。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。

$.each( [0,1,2], function(i, n){alert( "Item #" + i + ": " + n );});

2、jQuery.grep(array,callback,[invert])；使用过滤函数过滤数组元素，此函数至少传递两个参数：待过滤数组和过滤函数

3、$.map(array,callback);将一个数组中的元素转换到另一个数组中

4、$.inArray(value,array);确定第一个参数在数组中的位置(如果没有找到则返回 -1 ),从0开始。

5、$.merge( [0,1,2], [2,3,4] ) ；合并两个数组。返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素，不去掉重复项。

6、$.unique(array);删除数组中重复元素

7、$.trim(" hello, how are you? "); 去掉字符串起始和结尾的空格

8、$.isArray(obj);测试对象是否为数组。

9、$.isFunction(obj); 测试对象是否为函数

URL:

1、$.param(obj);将表单元素数组或者对象序列化。是.serialize()的核心方法。

eg:var params = { width:1680, height:1050 }; var str = jQuery.param(params);

2、$("form").serialize() ；序列表单内容为字符串，用于 Ajax 请求

十三、jquery操作单选框

if($("input[type='radio']:checked")){

var tt=$("input[name='chk']:checked").val();

}

十四、jquery操作复选框

var chkArr="";

$(".cc:checked").each(function(){

chkArr+=$(this).val()+"|";

});

十五、jquery实现复选框全选

var checked=$("#allchk").attr("checked");

$(".ww").each(function(){

if($(this).attr("checked")!=checked){$(this).click();}

});

来源： http://www.cnblogs.com/yiranleguan/archive/2012/01/19/2326194.html

jQuery核心函数

jQuery也可写$,通常情况下$可能会与其他框架中的对象冲突（php有$的用法），所以如果所用的框架没有$的用法，jQuery可用$代替

（1）$(document).ready() 一般缩写为$(),参数为回调函数,文档就绪时触发,要优先于onload触发

① $(document).ready(function () {});

② $( function () {});

（2）jQuery(elements) 将一个或多个dom对象转换为jQuery对象

$(document.getElementById("txtName"))

（3）根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。

① $("<input type='checkbox'>").appendTo("body")

② $("<input>", { type: 'textfield' }).appendTo("body")

（4）检索器（多个检索条件同时满足时，检索表达式直接连接；满足其中某个时，检索表达式用", "连接。如[name="text"].divClass结果为样式为divClass且name为text的元素）

以下结合例子分析检索器的用法（为了简单叙述，检索结果用ID代替Dom元素）

Demo，有这样一段html代码，id从0-8，有div元素及span元素:

<div id="2">value2</div>

</span>

</div>

<span id="3">3value</span>

</div>

普通检索

① $("#id"): 根据给定的ID匹配一个元素。

和js的document.getElementById("")功能差不多，但也有区别：$获取到的是i指定id的jQuery对象，后者获取到的是dom对象但$("#3")[0]与document.getElementById("3")指的都是id为3的dom对象

$("#3")获取的结果即为 3

② $("dom元素名")：根据给定的元素名匹配所有元素

和js的document.getElementByTagName ("")功能类似

$("span")获取的结果即为 1、3

③ $(".class样式名"): 根据给定的样式匹配元素。

$(".divClass")获取的结果即为 0

④ $("*") ：匹配所有元素。结果为 0、1、2、3、4、5、6、7、8

层级

① $("div div"): 在给定的祖先元素下匹配所有的后代元素。

结果为 2、5、7、8

② $(" div>div ")：在给定的父元素下匹配所有的子元素啊

结果为 5、7、8

③ $("div+div"):匹配所有紧接在 div 元素后的 div 元素。

结果为8

④ $("div~div") ：匹配 div 元素之后的所有 div (同级) 元素。

结果为 4、7、8

简单（该组检索表达式中，用到索引的都不考虑是否同级，索引依据出现的先后顺序）

① $("div:first") 匹配找到的第一个元素

结果为0

如果将例子该为：

<div id="2">value2</div>

</span>

</div>

则修改后的例子结果为 2

② $("div:last") 匹配找到的最后一个元素

结果为 7

③ $(" div:not(:first)") //返回除第一个div以外的所有div

not的用法：如$("div>:not(span)");该例子表示不含有span节点的div节点集合，因为0和4都包含span节点，所以结果为5,7,8

④ $(" div:even") 匹配所有索引值为偶数的元素，从 0 开始计数

结果为0、4、8

⑤ $(" div:odd") 匹配所有索引值为奇数的元素，从 0 开始计数

结果为 2、5、7

⑥ $(" div:eq(3)") 匹配一个给定索引值的元素 eq: equal

结果为5

⑦ $(" div:gt(3)") 匹配所有大于给定索引值的元素 gt:greater than

结果为8、7

⑧ $(" div:lt(3)") 匹配所有小于给定索引值的元素 lt:less than

结果为0、2、4

内容：

① $("div:contains('value')") 匹配包含给定文本的元素

结果为0、2 innerText.indexOf("value")>=0及[title*="value"]类似，区别在于，*=只能检索属性，contains检索元素包含的所有文本,注意检索的范围为元素的文本

② $("div:has(div)") 匹配所有包含 p 元素的 div 元素

查找方式类似于层次查找的"div div"，区别在于，"div div"结果是子节点，has结果是父节点，例子结果为0、4

$("div:has(span[title$='span'])~div>div");选择器也可以像xpath一样方便

上述例子可翻译为：含有span子元素且子span节点的title属性文本为"span"结尾的div元素之后（同级）的div元素的div子元素

猛一看，罗里吧嗦的描述那么长，感觉用处不是很大，其实页面html内容庞大的情况下，查找符合某些条件的集合会很方便

③ $("div:empty") 查找所有不包含子元素或者文本的空元素

结果：5、8、7

可见性

① $("input:visible") 查找所有可见的input元素

② $("tr:hidden") 匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到

属性检索

① $("div[id]") 查找所有含有 id 属性的 div 元素

② $("input[name='newsletter']") 查找所有 name 属性是 newsletter 的 input 元素

③ $("input[name!='newsletter']") 查找所有 name 属性不是 newsletter 的 input 元素

④ $("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素

⑤ $("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素

⑥ $("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素

⑦ $("input[id][name$='man']") 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

子元素

① nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2) 匹配其父元素下的第N个子或奇偶元素

② $("div:first-child") 查找属于父节点的第一个子节点的div元素

结果为 0、2、5

③ $("div:last-child") 查找属于父节点的最后子节点的div元素

结果为2、4、7

④ $("div:only-child") 查找属于父节点的唯一子节点的div元素

表单

① $(":input") 查找所有的input元素

$(":input")与$("input")的区别：

//:input表示选择表单中的input,select,textarea,button元素，input仅仅选择input元素

② $("text") 匹配所有的单行文本框

③ $(":password") 匹配所有密码框

④ $("radio") 匹配所有单选按钮

⑤ $("checkbox") 匹配所有复选框

⑥ $("submit") 匹配所有提交按钮

⑦ $("image") 匹配所有图像域

⑧ $("button") 匹配所有按钮

⑨ $("file") 匹配所有文件域

⑩ $("hidden") 匹配所有不可见元素，或者type为hidden的元素

表单对象属性

① $("input:checked") 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

② $("input:enabled") 匹配所有可用元素

③ $("input:disabled") 匹配所有不可用元素

④ $("select option:selected") 匹配所有选中的option元素

（5）属性操作

① 操作样式(class)

方法名addClass,removeClass,toggleClass

特殊用法toggleClass：如果存在（不存在）就删除（添加）一个样式

当方法传递两个参数的时候，第二个参数为布尔表达式，布尔表达式为true时添加样式，布尔表达式为false时删除样式，如：

var b = true;

$("input").click(function () {

//情况一：$(this).toggleClass("ccc");

//情况二：

b = !b;

$(this).toggleClass("ccc", b);

});

② 样式操作2（style）

方法名css，参数分为3种情况

Ø 传递一个参数，且为string类型，这样会返回该样式值，如

$("input").css("background-color")

Ø 传递两个参数，分别为key\value，为dom元素样式赋值，如

$("input").css("color","blue")

Ø 传递一个参数，为json对象，会对json的键逐一赋值，如

$("input").css({color:"blue",background:"red"})

③ 操作属性

属性操作方法名：attr，removeAttr

方法attr参数有4种情况：

Ø 只传属性名，返回该jQuery元素的属性值（注意如果查找到多个元素，则返回第一个元素的属性），如$("input").attr("title")返回的是第一个input的title

Ø 传递两个参数，且第二个参数为值时，为dom元素属性赋值，如

$("input").attr("title", "这是一个文本框")

Ø 传递两个参数，且第二个参数为function，为dom元素属性赋函数计算值，如

$("input").attr("title", function () { return "这是一个文本框"})

Ø 传递一个参数，且为json对象时，会对json的键逐一赋值，如

$("input").attr({ title: "this the title",value:"this the value" })

④ 属性操作：html 文本值 width height

这三类操作一致

获取内容为$("input").html/text/val/height/width()

设置时为$(" input ").html/text/val/height/width ("内容")

$("input").val 等于input.attr("value")

（6）筛选

过滤

① $("div").eq(1) 获取第N个元素，这个元素的位置是从0算起

查询结果为 2

② $("#0").hasClass("divClass")检查当前的元素是否含有某个特定的类，如果有，则返回true

结果为 true

③ $("div ").filter(".divClass ") 筛选出与指定表达式匹配的元素集合

检索与$("div.divClass")结果一致为 0

④ is(expr) 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true

如$("div").is(".divClass") 结果与$("div.divClass").length>0一样为true

⑤ $(" div").not( $("#0")) 删除与指定表达式匹配的元素

检索与$("div:not(#0)")一致，为2 4 5 8 7

查找

① $("div").children();取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合

结果1 5 8 6 7，如改为$("span").children() 则结果为2

② $("p").find("span");搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法

检索与$("div span")一致，为8

③ $("p").next();取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合

检索与$("div+*")一致，结果为3 8 6

④ $("div").prev();取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

结果为0 8

⑤ $("div ").parent;取得一个包含着所有匹配元素的唯一父元素的元素集合

结果为 Body、1、4

⑥ $("div ").parents;找到每个span元素的所有祖先元素

结果为Body、1、4、0、HTML 5个标签，即需要查询父节点的父节点，一直递归到最顶级节点

⑦ $("div ").siblings();取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

结果为0、3、4、5、8、6、7

（7）DOM处理

来源： http://www.cnblogs.com/yiranleguan/archive/2012/02/14/2351231.html