视频参考（李炎恢老师jQuery视频教程）：http://study.163.com/course/courseMain.htm?courseId=501006

1.简单选择器

在使用jQuery选择器时，必须使用$( )函数来包装css规则。

例：

①p{color:red;}

等价于：$('p').css('color','red')

②#firstname{color:red;} //使用id选择器的css规则

等价于：$('#mydiv').css('color','red') //获取DOM结点对象，并添加行为

③.classname{color:red;}

等价于：$('.classname').css('color','red')

2.进阶选择器

例：

span,p,em{color:red;} 等价于： $('span,p,em').css('color','red');

ul li a{color:blue;} 等价于 $('ul li a').css('color','blue');

*{margin:0;padding:0;} 等价于 $('*').css('margin',0).css('padding',0);

注：①后三种高级选择器的CSS模式不支持IE6，jQuery模式支持

②后代选择器：jQuery为后代选择器提供了一个等价的find()方法

③子选择器：只获取子节点的多个DOM对象。jQuery为子选择器提供了一个等价的children()方法

例：$('#mydiv>p').css('color','pink'); 等价于 $('#mydiv').children('p').css('color','pink');

④next选择器：只获取某结点后一个同级的DOM对象。jQuery为next选择器提供了一个等价的next()方法

例：$('#mydiv+p').css('color','green'); 等价于 $('#mydiv').next('p').css('color','green');

⑤nextAll选择器：获取某结点后所有同级的DOM对象。jQuery为nextAll选择器提供了一个等价的nextAll()方法

写在最后：

①关于jQuery的注释：

·单行注释 //...

·多行注释 /*...*/

②可以使用jQuery自带的length属性或size()方法查看元素个数：$('#idname').size() 或 $('#idname').length

③取第n个元素的写法：$('.classname').get(n-1) 或 $('.classname')[n-1]

④jQuery的容错性：当有动态DOM生成问题时，会导致执行不存在的id选择器，此时原生JS会报错，但jQuery不会报错

例如：document.getElementById("idname").style.color='red'; //当idname不存在时浏览器会报错

$('#idname').css('color','red'); //当idname不存在时浏览器不会报错

⑤通配符*在全局范围内使用将消耗大量资源，所以不建议在全局范围内使用。举个在局部范围内使用通配符*的例子：$('ul li *')

⑥选择器越复杂，字符串解析就越慢。所以在构造选择器时的原则是：只追求必要的确定性

⑦如果在不规范的页面中出现多个一样的id，并执行了CSS样式操作，将均会显示效果，但是如果用jQuery实现将只对第一个id产生效果。