由于当前jQuery如此的如雷贯耳，相信不用介绍什么是jQuery了，公司代码中广泛应用了jQuery，但我在看一些小朋友的代码时发现一个问题，小朋友们使用的仅仅是jQuery的皮毛，只是使用id选择器与attr方法，还有几个动画，如果只是如此，相比于其带来的开销，其实还不如不使用，下面介绍几个jQuery常用的方法，来让jQuery的威力发挥出来，否则只用有限的几个方法，相对于运行速度问题，真不如不用jQuery。
jQuery如此之好用，和其在获取对象时使用与CSS选择器兼容的语法有很大关系，毕竟CSS选择器大家都很熟悉（关于CSS选择器可以看看十分钟搞定CSS选择器），但其强大在兼容了CSS3的选择器，甚至多出了很多。
选择器
有了CSS选择器基础后，看jQuery的选择器就很简单了，不再详细一一说明
基本选择器
$(‘*')
匹配页面所有元素
$(‘#id')
id选择器
$(‘.class')
类选择器
$(‘element')
标签选择器
组合/层次选择器
$(‘E,F')
多元素选择器，用”,分隔，同时匹配元素E或元素F
$(‘E F')
后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
$(E>F)
子元素选择器，用”>”分隔，匹配E元素的所有直接子元素
$(‘E+F')
直接相邻选择器，匹配E元素之后的相邻的同级元素F
$(‘E~F')
普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
$(‘.class1.class2')
匹配类名中既包含class1又包含class2的元素
基本过滤选择器
$("E:first")
所有E中的第一个
$("E:last")
所有E中的最后一个
$("E:not(selector)")
按照selector过滤E
$("E:even")
所有E中index是偶数
$("E:odd")
所有E中index是奇数
$("E:eq(n)")
所有E中index为n的元素
$("E:gt(n)")
所有E中index大于n的元素
$("E:ll(n)")
所有E中index小于n的元素
$(":header")
选择h1~h7 元素
$("div:animated")
选择正在执行动画效果的元素
内容过滤器
$(‘E:contains(value)')
内容中包含value值的元素
$(‘E:empty')
内容为空的元素
$(‘E:has(F)')
子元素中有F的元素，$(‘div:has(a)'):包含a标签的div
$(‘E: parent')
父元素是E的元素，$(‘td: parent'):父元素是td的元素
可视化选择器
$(‘E:hidden')
所有被隐藏的E
$(‘E:visible')
所有可见的E
属性过滤选择器
$(‘E[attr]')
含有属性attr的E
$(‘E[attr=value]')
属性attr=value的E
$(‘E[attr !=value]')
属性attr！=value的E
$(‘E[attr ^=value]')
属性attr以value开头的E
$(‘E[attr $=value]')
属性attr以value结尾的E
$(‘E[attr *=value]')
属性attr包含value的E
$(‘E[attr][attr *=value]')
可以连用
子元素过滤器
$(‘E:nth-child(n)')
E的第n个子节点
$(‘E:nth-child(3n+1)')
E的index符合3n+1表达式的子节点
$(‘E:nth-child(even)')
E的index为偶数的子节点
$(‘E:nth-child(odd)')
E的index为奇数的子节点
$(‘E:first-clild')
所有E的第一个子节点
$(‘E:last-clild')
所有E的最后一个子节点
$(‘E:only-clild')
只有唯一子节点的E的子节点
表单元素选择器
$(‘E:type')
特定类型的input
$(‘:checked')
被选中的checkbox或radio
$(‘option: selected')
被选中的option
筛选方法
.find(selector) 查找集合每个元素的子节点
Get the descendants(子节点) of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
复制代码 代码如下:
$('li.item-ii').find('li').css('background-color', 'red');
.filter(selector) 过滤当前集合内元素
Reduce(减少) the set of matched elements to those that match the selector or pass the function's test.
复制代码 代码如下:
$('li').filter(':even').css('background-color', 'red');
基本方法
.ready(handler) 文档加载完成后执行的方法，区别于window.onload
Specify a function to execute when the DOM is fully loaded.
复制代码 代码如下:
$(document).ready(function() {
// Handler for .ready() called.
});
.each(function(index,element)) 遍历集合内每个元素
Iterate over a jQuery object, executing a function for each matched element.
复制代码 代码如下:
$("li" ).each(function( index ) {
console.log( index + ": " + $(this).text() );
});
jQuery.extend( target [, object1 ] [, objectN ] ) 合并对象
Merge the contents of two or more objects together into the first object.
复制代码 代码如下:
var object = $.extend({}, object1, object2);
获取元素
.eq(index) 按index获取jQuery对象集合中的某个特定jQuery对象
Reduce the set of matched elements to the one at the specified index.
.eq(-index) 按逆序index获取jQuery对象集合中的某个特定jQuery对象
An integer indicating the position of the element, counting backwards from the last element in the set.
复制代码 代码如下:
$( "li" ).eq( 2 ).css( "background-color", "red" );
.get(index) 获取jQuery集合对象中某个特定index的DOM对象（将jQuery对象自动转换为DOM对象）
Retrieve one of the DOM elements matched by the jQuery object.
复制代码 代码如下:
console.log( $( "li" ).get( -1 ) );
.get() 将jQuery集合对象转换为DOM集合对象并返回
Retrieve the DOM elements matched by the jQuery object.
复制代码 代码如下:
console.log( $( "li" ).get() );
.index() / .index(selector)/ .index(element) 从给定集合中查找特定元素index
Search for a given element from among the matched elements.
1. 没参数返回第一个元素index
2.如果参数是DOM对象或者jQuery对象，则返回参数在集合中的index
3.如果参数是选择器，返回第一个匹配元素index，没有找到返回-1
复制代码 代码如下:
var listItem = $( "#bar" );
alert( "Index: " + $( "li" ).index( listItem ) );
.clone（[withDataAndEvents][,deepWithDataAndEvents]) 创建jQuery集合的一份deep copy（子元素也会被复制），默认不copy对象的shuju和绑定事件
Create a deep copy of the set of matched elements.
复制代码 代码如下:
$( ".hello" ).clone().appendTo( ".goodbye" );
.parent([selector]) 获取jQuery对象符合selector的父元素
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
复制代码 代码如下:
$( "li.item-a" ).parent('ul').css( "background-color", "red" );
.parents([selector]) 获取jQuery对象符合选择器的祖先元素
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
复制代码 代码如下:
$( "span.selected" ) .parents( "div" ) .css( "border", "2px red solid" )
插入元素
.append(content[,content]) / .append(function(index,html)) 向对象尾部追加内容
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
1. 可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象
2. 如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值
复制代码 代码如下: