jQuery类似于Python中模块的概念,是集成了javaScript和Dom的模块.大致分为两种版本1.12....或者2....的版本,由于2以上的版本去掉了IE9以下的兼容性,所以我们一般写页面使用1.12XXX的版本.jQuery的语法很多,jQuery API 中文在线手册
查找
选择器
id选择器
根据给定的ID匹配一个元素。
使用任何的元字符（如 !"#$%&'()*+,./:;<=>?@[]^`{|}~）作为名称的文本部分， 它必须被两个反斜杠转义：\。
$("#myDiv");
#foo\[bar\]标签选择器
根据给定的元素标签名匹配所有元素
//查找DIV的元素集合
$("div");类选择器
根据给定的css类名匹配元素。一个元素可以有多个类，只要有一个符合就能被匹配到。
//查找所有类是 "myClass" 的元素.
$("#.myClass");通配符
*,匹配所有元素,多用于结合上下文来搜索:$("*").
组合选择器
将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
//找到匹配任意一个类的元素
$("div,span,p.myClass")层级选择器
ancestor descendant
在给定的祖先元素下匹配所有的后代元素
//找到表单中所有的 input 元素
$("form input")parent > child
在给定的父元素下匹配所有的子元素
//匹配表单中所有的子级input元素。
$("form > input")prev + next
匹配所有紧接在 prev 元素后的 next 元素,包括后面的子元素
//匹配所有跟在 label 后面的 input 元素
$("label + input")prev ~ siblings
兄弟元素,匹配 prev 元素之后的所有 siblings 元素
//找到所有与表单同辈的 input 元素
$("form ~ input")基本筛选器
:first
获取匹配的第一个元素
HTML 代码:<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery 代码:$('li:first');
结果:[ <li>list item 1</li> ]
:not(selector)
去除所有与给定选择器匹配的元素
描述:
查找所有未选中的 input 元素
HTML 代码:<input name="apple" /> <input name="flower" checked="checked" />
jQuery 代码:$("input:not(:checked)")
结果:[ <input name="apple" /> ]
:even
匹配所有索引值为偶数的元素，从 0 开始计数
描述:
查找表格的1、3、5...行（即索引值0、2、4...）
HTML 代码:<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>
jQuery 代码:$("tr:even")
结果:[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
:odd
匹配所有索引值为奇数的元素，从 0 开始计数
描述:
查找表格的2、4、6行（即索引值1、3、5...）
HTML 代码:<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>
jQuery 代码:$("tr:odd")
结果:[ <tr><td>Value 1</td></tr> ]
:eq(index)
匹配一个给定索引值的元素,从 0 开始计数
描述:
查找第二行
HTML 代码:<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>
jQuery 代码:$("tr:eq(1)")
结果:[ <tr><td>Value 1</td></tr> ]
:gt(index)
匹配所有大于给定索引值的元素,从0开始计数
描述:
查找第二第三行，即索引值是1和2，也就是比0大
HTML 代码:<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>
jQuery 代码:
$("tr:gt(0)")
结果:[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]
:last()
获取匹配的最后几个元素
描述:
获取匹配的最后个元素
HTML 代码:<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
jQuery 代码:$('li:last')
结果:[ <li>list item 5</li> ]
:lt(index)
匹配所有小于给定索引值的元素,从0开始计数
查找第一第二行，即索引值是0和1，也就是比2小
HTML 代码:<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>
jQuery 代码:$("tr:lt(2)")
结果:[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]
内容
:contains(text)
匹配包含给定文本的元素,参数为一个用以查找的字符串
描述:
查找所有包含 "John" 的 div 元素
HTML 代码:<div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn</div>
jQuery 代码:$("div:contains('John')")
结果:[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]
:empty
匹配所有不包含子元素或者文本的空元素
描述:
查找所有不包含子元素或者文本的空元素
HTML 代码:<table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table>
jQuery 代码:$("td:empty")
结果:[ <td></td>, <td></td> ]
:has(selector)
匹配含有选择器所匹配的元素的元素
描述:
给所有包含 p 元素的 div 元素添加一个 text 类
HTML 代码:<div><p>Hello</p></div> <div>Hello again!</div> jQuery 代码: $("div:has(p)").addClass("test");
结果:[ <div class="test"><p>Hello</p></div> ]
可见性
:hidden
匹配所有不可见元素，或者type为hidden的元素
描述:
查找隐藏的 tr
HTML 代码:<table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>
jQuery 代码:$("tr:hidden")
结果:[ <tr style="display:none"><td>Value 1</td></tr> ]
--------------------------------
描述:
匹配type为hidden的元素
HTML 代码:<form> <input type="text" name="email" /> <input type="hidden" name="id" /> </form>
jQuery 代码:$("input:hidden")
结果:$("input:hidden")
:visible
匹配所有的可见元素
描述:
查找所有可见的 tr 元素
HTML 代码:<table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>
jQuery 代码:$("tr:visible")
结果:[ <tr><td>Value 2</td></tr> ]
属性
[attribute=value]
匹配给定的属性是某个特定值的元素
查找所有 name 属性是 newsletter 的 input 元素
HTML 代码:<input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> jQuery 代码: $("input[name='newsletter']").attr("checked", true); 结果: [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]
筛选
过滤
eq(index|-index)
获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，具体可以看以下示例。
参数index描述:
获取匹配的第二个元素HTML 代码: <p> This is just a test.</p> <p> So is this</p> jQuery 代码: $("p").eq(1) 结果: [ <p> So is this</p> ]
first()
获取第一个元素
描述:
获取匹配的第一个元素HTML 代码: <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> jQuery 代码: $('li').first() 结果: [ <li>list item 1</li> ]
last()
获取最后个元素
hasClass(class)
检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is("." + class)。
描述:
给包含有某个类的元素进行一个动画。HTML 代码: <div class="protected"></div><div></div> jQuery 代码: $("div").click(function(){ if ( $(this).hasClass("protected") ) $(this) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: 0 }); });
查找
children([expr])
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。
描述:
查找DIV中的每个子元素。HTML 代码: <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p> jQuery 代码: $("div").children() 结果: [ <span>Hello Again</span> ] --------------------
描述:
在每个div中查找 .selected 的类。HTML 代码: <div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div> jQuery 代码: $("div").children(".selected") 结果: [ <p class="selected">Hello Again</p> ]
find(expr|obj|ele)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
描述:
从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。
HTML 代码:<p><span>Hello</span>, how are you?</p> jQuery 代码: $("p").find("span") 结果: [ <span>Hello</span> ]
next([expr])
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合.这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。
描述:
找到每个段落的后面紧邻的同辈元素。
HTML 代码:<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div> jQuery 代码: $("p").next() 结果: [ <p>Hello Again</p>, <div><span>And Again</span></div> ]
----------------
描述:
找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
HTML 代码:<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div> jQuery 代码: $("p").next(".selected") 结果: [ <p class="selected">Hello Again</p> ]
nextAll([expr])
查找当前元素之后所有的同辈元素。可以用表达式过滤
描述:
给第一个div之后的所有元素加个类
HTML 代码:<div></div><div></div><div></div><div></div> jQuery 代码: $("div:first").nextAll().addClass("after"); 结果: [ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]
nextUntil([exp|ele][,fil])
查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
如果提供的jQuery代表了一组DOM元素，.nextUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了下面所有找到的同辈元素，但不包括那个选择器匹配到的元素。
如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll() 效果一样。
offsetParent()
返回第一个匹配元素用于定位的父节点。这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
描述:
设置最近的祖先定位元素的背景颜色
HTML 代码:<div style="70%;position:absolute;left:100px;top:100px"> <div style="margin:50px;background-color:yellow"> <p>点击下面的按钮可以设置本段落的最近的父（祖先）元素的背景色。</p> <div> </div> <button>点击这里</button> jQuery 代码: $("button").click(function(){ $("p").offsetParent().css("background-color","red"); });
parent([expr])
取得一个包含着所有匹配元素的唯一父元素的元素集合。你可以使用可选的表达式来筛选。
描述:
查找每个段落的父元素
HTML 代码:<div><p>Hello</p><p>Hello</p></div> jQuery 代码: $("p").parent() 结果: [ <div><p>Hello</p><p>Hello</p></div>] --------------------
描述:
查找段落的父元素中每个类名为selected的父元素。HTML 代码: <div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div> jQuery 代码: $("p").parent(".selected") 结果: [ <div class="selected"><p>Hello Again</p></div> ]
parents([expr])
取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
描述:
找到每个span元素的所有祖先元素。HTML 代码: <html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html> jQuery 代码: $("span").parents() ------------------ 描述: 找到每个span的所有是p元素的祖先元素。 jQuery 代码: $("span").parents("p")
parentsUntil([expr|element][,filter])
查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。如果提供的jQuery代表了一组DOM元素，.parentsUntil()方法也能让我们找遍所有元素的祖先元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素，但不包括那个选择器匹配到的元素
prev([expr])
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。
描述:
找到每个段落紧邻的前一个同辈元素。HTML 代码: <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p> jQuery 代码: $("p").prev() 结果: [ <div><span>Hello Again</span></div> ] -------------------
描述:
找到每个段落紧邻的前一个同辈元素中类名为selected的元素。HTML 代码: <div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p> jQuery 代码: $("p").prev(".selected") 结果: [ <p class="selected">Hello Again</p> ]
prevAll([expr])
查找当前元素之前所有的同辈元素
描述:
给最后一个之前的所有div加上一个类HTML 代码: <div></div><div></div><div></div><div></div> jQuery 代码: $("div:last").prevAll().addClass("before"); 结果: [ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]
prevUntil([exp|ele][,fil])
查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
如果提供的jQuery代表了一组DOM元素，.prevUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了前面所有找到的同辈元素，但不包括那个选择器匹配到的元素。
如果没有选择器匹配到，或者没有提供参数，那么排在前面的所有同辈元素都会被选中。这就跟用没有提供参数的 .prevAll()效果一样。
siblings([expr])
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
描述:
找到每个div的所有同辈元素。HTML 代码: <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p> jQuery 代码: $("div").siblings() 结果: [ <p>Hello</p>, <p>And Again</p> ]
------------
描述:
找到每个div的所有同辈元素中带有类名为selected的元素。HTML 代码: <div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p> jQuery 代码: $("div").siblings(".selected") 结果: [ <p class="selected">Hello Again</p> ]
属性
attr(name|pro|key,val|fn)
设置或返回被选元素的属性值。
参数name 描述:
返回文档中所有图像的src属性值。jQuery 代码:
$("img").attr("src");
参数properties 描述:
为所有图像设置src和alt属性。
jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });
参数key,value 描述:
为所有图像设置src属性。
jQuery 代码:
$("img").attr("src","test.jpg");
参数key,回调函数 描述:
把src属性的值设置为title属性的值。
jQuery 代码:
$("img").attr("title", function() { return this.src });
removeAttr(name)
从每一个匹配的元素中删除一个属性
描述:
将文档中图像的src属性删除HTML 代码: <img src="test.jpg"/> jQuery 代码: $("img").removeAttr("src"); 结果: [ <img /> ]
prop(name|properties|key,value|fn)
获取在匹配的元素集中的第一个元素的属性值。相当于对attr的一个补充吧:随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误
参数name 描述:
选中复选框为true，没选中为falsejQuery 代码:
$("input[type='checkbox']").prop("checked");
参数properties 描述:
禁用页面上的所有复选框。
jQuery 代码:
$("input[type='checkbox']").prop({
disabled: true
});
参数key,value 描述:
禁用和选中所有页面上的复选框。
jQuery 代码:
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);
参数key,回调函数 描述:
通过函数来设置所有页面上的复选框被选中。
jQuery 代码:
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
removeProp(name)
用来删除由.prop()方法设置的属性集.
描述:
设置一个段落数字属性，然后将其删除。HTML 代码: <p> </p> jQuery 代码: var $para = $("p"); $para.prop("luggageCode", 1234); $para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". "); $para.removeProp("luggageCode"); $para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". "); 结果: The secret luggage code is: 1234. Now the secret luggage code is: undefined.
CSS类
addClass(class|fn)
为每个匹配的元素添加指定的类名。一个或多个要添加到元素中的CSS类名，请用空格分开.
参数class 描述:
为匹配的元素加上 'selected' 类
jQuery 代码:
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
-----------------
回调函数 描述:
给li加上不同的classHTML 代码: <ul> <li>Hello</li> <li>Hello</li> <li>Hello</li> </ul> jQuery 代码: $('ul li:last').addClass(function() { return 'item-' + $(this).index(); });
removeClass([class|fn])
从所有匹配的元素中删除全部或者指定的类。一个或多个要删除的CSS类名，请用空格分开.此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
参数class 描述:
从匹配的元素中删除 'selected' 类jQuery 代码:
$("p").removeClass("selected");
----------------------
参数class 描述:
删除匹配元素的所有类
jQuery 代码:
$("p").removeClass();
------------------------
回调函数描述:
删除最后一个元素上与前面重复的class
jQuery 代码:
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
toggleClass(class|fn[,sw])
如果存在（不存在）就删除（添加）一个类。
参数class 描述:
为匹配的元素切换 'selected' 类jQuery 代码: $("p").toggleClass("selected"); --------------- 参数class,switch 描述: 每点击三下加上一次 'highlight' 类 HTML 代码: <strong>jQuery 代码:</strong> jQuery 代码: var count = 0; $("p").click(function(){ $(this).toggleClass("highlight", count++ % 3 == 0); });
---------------
回调函数 描述:
根据父元素来设置class属性
jQuery 代码:
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});HTML代码/文本/值
html([val|fn])
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
无参数 描述:
返回p元素的内容。
jQuery 代码:
$('p').html();
------------------------
参数val 描述:
设置所有 p 元素的内容
jQuery 代码:
$("p").html("Hello <b>world</b>!");
------------------------
回调函数描述:
使用函数来设置所有匹配元素的内容。
jQuery 代码:
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});text([val|fn])
取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
无参数 描述:
返回p元素的文本内容。jQuery 代码:
$('p').text();
--------------
参数val 描述:
设置所有 p 元素的文本内容
jQuery 代码:
$("p").text("Hello world!");
--------------
回调函数 描述:
使用函数来设置所有匹配元素的文本内容。
jQuery 代码:
$("p").text(function(n){
return "这个 p 元素的 index 是：" + n;
});
val([val|fn|arr])
获得匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值.
无参数 描述:
获取文本框中的值jQuery 代码:
$("input").val();
--------------
参数val 描述:
设定文本框的值
jQuery 代码:
$("input").val("hello world!");
--------------
回调函数 描述:
设定文本框的值
jQuery 代码:
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
--------------
参数array 描述:
设定一个select和一个多选的select的值HTML 代码: <select id="single"> <option>Single</option> <option>Single2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" value="check1"/> check1 <input type="checkbox" value="check2"/> check2 <input type="radio" value="radio1"/> radio1 <input type="radio" value="radio2"/> radio2 jQuery 代码: $("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check2", "radio1"]);
CSS
CSS
css(name|pro|[,val|fn])
访问匹配元素的样式属性。
参数name 描述:
取得第一个段落的color样式属性的值。
jQuery 代码:
$("p").css("color");
----------------------
参数properties 描述:
将所有段落的字体颜色设为红色并且背景为蓝色。
jQuery 代码:
$("p").css({ "color": "#ff0011", "background": "blue" });
----------------------
参数name,value 描述:
将所有段落字体设为红色
jQuery 代码:
$("p").css("color","red");
----------------------
参数name,回调函数 描述:
逐渐增加div的大小
jQuery 代码:
$("div").click(function() {
$(this).css({
function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
位置
offset([coordinates])
针对body,整个页面,有多高,左边有多宽.获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
无参数描述:
获取第二段的偏移HTML 代码: <p>Hello</p><p>2nd Paragraph</p> jQuery 代码: var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top ); 结果: <p>Hello</p><p>left: 0, top: 35</p> ------------------------- 参数coordinates 描述: 获取第二段的偏移 HTML 代码: <p>Hello</p><p>2nd Paragraph</p> jQuery 代码: $("p:last").offset({ top: 10, left: 30 });
position()
获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
描述:
获取第一段的偏移HTML 代码: <p>Hello</p><p>2nd Paragraph</p> jQuery 代码: var p = $("p:first"); var position = p.position(); $("p:last").html( "left: " + position.left + ", top: " + position.top ); 结果: <p>Hello</p><p>left: 15, top: 15</p>
scrollTop([val])
获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。
无参数描述:
获取第一段相对滚动条顶部的偏移HTML 代码: <p>Hello</p><p>2nd Paragraph</p> jQuery 代码: var p = $("p:first"); $("p:last").text( "scrollTop:" + p.scrollTop() ); 结果: <p>Hello</p><p>scrollTop: 0</p>
------------------
参数val 描述:
设置相对滚动条顶部的偏移
jQuery 代码:
$("div.demo").scrollTop(300);scrollLeft([val])
获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。
尺寸
height([val|fn])
取得匹配元素当前计算的高度值（px）。在 jQuery 1.2 以后可以用来获取 window 和 document 的高
无参数描述:
获取第一段的高
jQuery 代码:
$("p").height();
------------------
参数val 描述:
把所有段落的高设为 20:
jQuery 代码:
$("p").height(20);
------------------
参数function(index, height) 描述:
以 10 像素的幅度增加 p 元素的高度
jQuery 代码:
$("button").click(function(){
$("p").height(function(n,c){
return c+10;
});
});width([val|fn])
取得第一个匹配元素当前计算的宽度值（px）。在 jQuery 1.2 以后可以用来获取 window 和 document 的宽
innerHeight()
相对padding,获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。
描述:
获取第一段落内部区域高度。HTML 代码: <p>Hello</p><p>2nd Paragraph</p> jQuery 代码: var p = $("p:first"); $("p:last").text( "innerHeight:" + p.innerHeight() ); 结果: <p>Hello</p><p>innerHeight: 16</p>
innerWidth()
获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。
outerHeight([options])
获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。
描述:
获取第一段落外部高度。HTML 代码: <p>Hello</p><p>2nd Paragraph</p> jQuery 代码: var p = $("p:first"); $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) ); 结果: <p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>
outerWidth([options])
获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。设置为 true 时，计算边距在内。
文档处理
内部插入
append(content|fn)
向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
描述:
向所有段落中追加一些HTML标记。HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").append("<b>Hello</b>"); 结果: [ <p>I would like to say: <b>Hello</b></p> ]
appendTo(content)
把所有匹配的元素追加到另一个指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
描述: 把所有段落追加到ID值为foo的元素中。 HTML 代码: <p>I would like to say: </p> <div></div><div></div> jQuery 代码: $("p").appendTo("div"); 结果: <div><p>I would like to say: </p></div> <div><p>I would like to say: </p></div> --------------------------- 描述: 新建段落追加div中并加上一个class HTML 代码: <div></div><div></div> jQuery 代码: $("<p/>") .appendTo("div") .addClass("test") .end() .addClass("test2"); 结果: <div><p class="test test2"></p></div> <div><p class="test"></p></div>
prepend(content)
向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。
描述:
向所有段落中前置一些HTML标记代码。HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").prepend("<b>Hello</b>"); 结果: [ <p><b>Hello</b>I would like to say: </p> ]
------------------------
描述:
将一个DOM元素前置入所有段落HTML 代码: <p>I would like to say: </p> <p>I would like to say: </p> <b class="foo">Hello</b> <b class="foo">Good Bye</b> jQuery 代码: $("p").prepend( $(".foo")[0] ); 结果: <p><b class="foo">Hello</b>I would like to say: </p> <p><b class="foo">Hello</b>I would like to say: </p> <b class="foo">Good Bye</b> ------------------------ 描述: 向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。 HTML 代码: <p>I would like to say: </p><b>Hello</b> jQuery 代码: $("p").prepend( $("b") ); 结果: <p><b>Hello</b>I would like to say: </p>
prependTo(content)
把所有匹配的元素前置到另一个、指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。
外部插入
after(content|fn)
在每个匹配的元素之后插入内容。
描述: 在所有段落之后插入一些HTML标记代码。 HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").after("<b>Hello</b>"); 结果: <p>I would like to say: </p><b>Hello</b> --------------------------- 描述: 在所有段落之后插入一个DOM元素。 HTML 代码: <b id="foo">Hello</b><p>I would like to say: </p> jQuery 代码: $("p").after( $("#foo")[0] ); 结果: <p>I would like to say: </p><b id="foo">Hello</b> --------------------------- 描述: 在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。 HTML 代码: <b>Hello</b><p>I would like to say: </p> jQuery 代码: $("p").after( $("b") ); 结果: <p>I would like to say: </p><b>Hello</b>
before(content|fn)
在每个匹配的元素之前插入内容。
insertAfter(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。
描述:
把所有段落插入到一个元素之后。与 $("#foo").after("p")相同HTML 代码: <p>I would like to say: </p><div id="foo">Hello</div> jQuery 代码: $("p").insertAfter("#foo"); 结果: <div id="foo">Hello</div><p>I would like to say: </p>
insertBefore(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。
删除
empty()
删除匹配的元素集合中所有的子节点。
描述:
把所有段落的子元素（包括文本节点）删除HTML 代码: <p>Hello, <span>Person</span> <a href="#">and person</a></p> jQuery 代码: $("p").empty(); 结果: <p></p>
remove([expr])
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
描述:
从DOM中把所有段落删除HTML 代码: <p>Hello</p> how are <p>you?</p> jQuery 代码: $("p").remove(); 结果: how are -------------------------- 描述: 从DOM中把带有hello类的段落删除 HTML 代码: <p class="hello">Hello</p> how are <p>you?</p> jQuery 代码: $("p").remove(".hello"); 结果: how are <p>you?</p>
复制
clone([Even[,deepEven]])
克隆匹配的DOM元素并且选中这些克隆的副本。在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
参数解释:
- 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false
- 一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制
描述:
克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。HTML 代码: <b>Hello</b><p>, how are you?</p> jQuery 代码: $("b").clone().prependTo("p"); 结果: <b>Hello</b><p><b>Hello</b>, how are you?</p>
描述:
创建一个按钮，他可以复制自己，并且他的副本也有同样功能。HTML 代码: <button>Clone Me!</button> jQuery 代码: $("button").click(function(){ $(this).clone(true).insertAfter(this); });
事件
页面载入
ready(fn)
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
一句话总结:当文档加载完毕后，自动执行.
描述:
在DOM加载完成时运行的代码，可以这样写：
jQuery 代码:
$(document).ready(function(){
// 在这里写你的代码...
});
----------------------------
描述:
使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。
jQuery 代码:$(function($) {
// 你可以在这里继续使用$作为别名...
});
**这里,我们需要注意简写,一般都直接写为:
$(function(){
......
});
bind(type,[data],fn)
为每个匹配元素的特定事件绑定事件处理函数。
- type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
- data:作为event.data属性值传递给事件对象的额外数据对象
- fn:绑定到每个匹配元素的事件上面的处理函数
描述:
当每个段落被点击的时候，弹出其文本。
jQuery 代码:
$("p").bind("click", function(){
alert( $(this).text() );
});
描述:
同时绑定多个事件类型
jQuery 代码:
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
描述:
同时绑定多个事件类型/处理程序
jQuery 代码:
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
描述:
你可以在事件处理之前传递一些附加的数据。
jQuery 代码:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
描述:
通过返回false来取消默认的行为并阻止事件起泡。
jQuery 代码:
$("form").bind("submit", function() { return false; })
描述:
通过使用 preventDefault() 方法只取消默认的行为。
jQuery 代码:
$("form").bind("submit", function(event){
event.preventDefault();
});
描述:
通过使用 stopPropagation() 方法只阻止一个事件起泡。
jQuery 代码:
$("form").bind("submit", function(event){
event.stopPropagation();
});
例子:事件绑定&文档加载完执行,菜单隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .menu{ width: 200px; height: 600px; border: 1px solid #dddddd; overflow: auto; } .menu .item .title{ height: 40px; line-height: 40px; background-color: #2459a2; color: white; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="body"> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" >菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="body hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(function(){ // 当文档树加载完毕后，自动执行 $('.item .title').click(function(){ // this,$(this) $(this).next().removeClass('hide'); $(this).parent().siblings().find('.body').addClass('hide'); }); }); // $('.item .title').bind('focus', function () { // $(this).next().removeClass('hide'); // $(this).parent().siblings().find('.body').addClass('hide'); // }) </script> </body> </html>
事件委派
delegate(selector,[type],[data],fn)
指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
- selector:选择器字符串，用于过滤器触发事件的元素。
- type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
- data:传递到函数的额外数据
- fn:当事件发生时运行的函数
描述:
当点击鼠标时，隐藏或显示 p 元素：HTML 代码: <div style="background-color:red"> <p>这是一个段落。</p> <button>请点击这里</button> </div> jQuery 代码: $("div").delegate("button","click",function(){ $("p").slideToggle(); });
--------------------------------
描述:
delegate这个方法可作为live()方法的替代，使得每次事件绑定到特定的DOM元素。
以下两段代码是等同的:$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
例子:加载后克隆的元素具有相同功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" onclick="Add();" /> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(function(){ /* $('li').click(function () { alert($(this).text()); }); */ $("ul").delegate("li","click",function(){ alert($(this).text()); }); }); function Add(){ var tag = document.createElement('li'); tag.innerText = '666'; $('ul').append(tag); } </script> </body> </html>
事件
blur([[data],fn])
当元素失去焦点时触发 blur 事件。这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
描述:
触发所有段落的blur事件
jQuery 代码:$("p").blur();
描述:
任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。
jQuery 代码:$("p").blur( function () { alert("Hello World!"); } );
change([[data],fn])
当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
描述:
触发被选元素的 change 事件。
jQuery 代码:$(selector).change();
描述:
给所有的文本框增加输入验证
jQuery 代码:$("input[type='text']").change( function() {
// 这里可以写些验证代码
});
click([[data],fn])
触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。
描述:
触发页面内所有段落的点击事件
jQuery 代码:$("p").click();
描述:
将页面内所有段落点击后隐藏。
jQuery 代码:$("p").click( function () { $(this).hide(); });
focus([[data],fn])
当元素获得焦点时，触发 focus 事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。
描述:
当页面加载后将 id 为 'login' 的元素设置焦点:
jQuery 代码:
$(document).ready(function(){
$("#login").focus();
});
描述:
使人无法使用文本框:
jQuery 代码:$("input[type=text]").focus(function(){
this.blur();
});
keydown([[data],fn])
当键盘或按钮被按下时，发生 keydown 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
描述:
在页面内对键盘按键做出回应，可以使用如下代码:
jQuery 代码:$(window).keydown(function(event){
switch(event.keyCode) {
// ...
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 更多详细信息: http://unixpapa.com/js/key.html
// 常用keyCode： 空格 32 Enter 13 ESC 27
}
});
keypress([[data],fn])
当键盘或按钮被按下时，发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
keypress keydown区别
1、KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符。
KeyDown 、KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键）。
2、KeyPress 只能捕获单个字符
KeyDown 和KeyUp 可以捕获组合键。
3、KeyPress 可以捕获单个字符的大小写
KeyDown、KeyUp 对于单个字符捕获的KeyValue 都是一个值，也就是不能判断单个字符的大小写。
4、KeyPress 不区分小键盘和主键盘的数字字符。
KeyDown 、KeyUp 区分小键盘和主键盘的数字字符。
6、其中PrScrn 按键KeyPress、KeyDown、KeyUp 都不能捕获。mouseover([[data],fn])
当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。
注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
描述:
当鼠标指针位于元素上方时时，改变元素的背景色：
jQuery 代码:$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
mouseout([[data],fn])
同上
scroll([[data],fn])
当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
描述:
当页面滚动条变化时，执行的函数:
jQuery 代码:$(window).scroll( function() { /* ...do something... */ } );
描述:
对元素滚动的次数进行计数：
jQuery 代码:$("div").scroll(function() {
$("span").text(x+=1);
});
unload([[data],fn])
在当用户离开页面时，会发生 unload 事件。具体来说，当发生以下情况时，会发出 unload 事件：
- 点击某个离开页面的链接
- 在地址栏中键入了新的 URL
- 使用前进或后退按钮
- 关闭浏览器
- 重新加载页面
描述:
页面卸载的时候弹出一个警告框:
jQuery 代码:$(window).unload( function () { alert("Bye now!"); } );
jQuery循环遍历之each(callback)
以每一个匹配的元素作为上下文来执行一个函数。意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')
- return false 相当于python中的break
- return 相当于python中的continue
描述:
迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。HTML 代码: <img/><img/> jQuery 代码: $("img").each(function(i){ this.src = "test" + i + ".jpg"; }); 结果: [ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
描述:
如果你想得到 jQuery对象，可以使用 $(this) 函数。----------------- HTML 代码: <button>Change colors</button> <span></span> <div></div> <div></div> <div></div> <div></div> <div id="stop">Stop here</div> <div></div> <div></div> <div></div> jQuery 代码: $("img").each(function(){ $(this).toggleClass("example"); });
-----------------
描述:
你可以使用 'return' 来提前跳出 each() 循环。
HTML 代码:<button>Change colors</button> <span></span> <div></div> <div></div> <div></div> <div></div> <div id="stop">Stop here</div> <div></div> <div></div> <div></div> jQuery 代码: $("button").click(function () { $("div").each(function (index, domEle) { // domEle == this $(domEle).css("backgroundColor", "yellow"); if ($(this).is("#stop")) { $("span").text("Stopped at div index #" + index); return false; } }); });
例子
使用true/false控制是否继续
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="http://www.baidu.com"> <input type="text" id="username" /> <input type="submit" value="提交" onclick="return SubmitForm();" /> </form> <script> function SubmitForm(){ var user = document.getElementById('username'); if(user.value.length > 0 ){ // 可以提交 return true; }else{ // 不可提交，提示错误 alert('用户名输入不能为空'); return false; } } </script> </body> </html>
增加输入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <p> <a onclick="Add(this);"> + </a> <input type="text" /> </p> </div> <script src="jquery-1.12.4.js"></script> <script> function Add(ths){ var p = $(ths).parent().clone(); p.find('a').text(' - '); p.find('a').attr('onclick', 'Remove(this);'); $(ths).parent().parent().append(p); } function Remove(ths){ $(ths).parent().remove(); } </script> </body> </html>
jQuery实现全选反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="p1"> <p>hhh</p> </div> <input type="button" value="全选" onclick="CheckAll()" /> <input type="button" value="取消" onclick="CancleAll()"/> <input type="button" value="反选" onclick="ReverseAll()"/> <table border="1"> <thead> <tr> <th>序号</th> <th>用户名</th> <th>密码</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function CheckAll(){ $('#tb input[type="checkbox"]').prop('checked',true); } function CancleAll(){ $('#tb input[type="checkbox"]').prop('checked',false); } function ReverseAll(){ $('#tb input[type="checkbox"]').each(function(i){ // this 当前标签 // $(this)当前标签的jQuery对象 if($(this).prop('checked')){ $(this).prop('checked', false); }else{ $(this).prop('checked', true); } }); } </script> </body> </html>
jQuery实现菜单隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .menu{ width: 200px; height: 600px; border: 1px solid #dddddd; overflow: auto; } .menu .item .title{ height: 40px; line-height: 40px; background-color: #2459a2; color: white; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单一</div> <div class="body"> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单三</div> <div class="body hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> function ShowMenu(ths){ // console.log(ths); // Dom中的标签对象 //$(ths) // Dom标签对象转换成jQuery标签对象（便利） //$(ths)[0] // jQuery标签对象转换成Dom标签对象 $(ths).next().removeClass('hide'); $(ths).parent().siblings().find('.body').addClass('hide'); } </script> </body> </html>