1、让选择器来完成一切
2、jQuery中的选择器语法结合了css1-3和XPath
3、jQuery选择器的功能
（1）选择器
（2）链式调用
（3）工具方法
$("tr.highlighted").removeClass("highlighted").addClass("normal");4、选择元素
jQuery提供了大量方法用于选择DOM元素：可以通过：
（1）元素的属性
$("[attributeName=''string2match]")
还可以采用正则表达式
匹配属性开头：$("[attributeName^=''value]")
匹配属性结尾：$("[attributeName$=''value]")
匹配任意位置：$("[attributeName*=''value]")
匹配包含一个特定值：$("[attributeName～=''value]")选择具有attr属性且属性以val开头或者属性值等于val的元素：elem[attr|=val]
以上两个的差别？？
选择具有attr属性的元素elem[attr]
选择不是attr属性的元素elem[attr！=val]
（2）元素的类型
（3）元素的位置
$("li:even") 集合中的偶数成员 odd 奇数成员 first 第一个元素 last 最后一个元素 eq(3) 匹配集合中第四个元素 gt(2) 匹配集合大于2的元素 lt(3) 匹配索引小于3的元素
（4）CSS类
A、ID属性
B、class属性$("div#id");
$(".myClass")
（5）以上方式组合
通配符选择器：$("*")搜索整个DOM树
$("a","js_links#div")只想搜索一个DOM的子树
$("#\\$specialId")原来id是$specialled,特殊字符用反斜杠进行转义
后代选择器：$("form input")
复式选择器：$("div#gallery,div#username")
过滤选择器：
| ：animated | 在执行动画的所有元素 |
| ：eq() | 索引等于指定值 |
| ：even | 偶数所有元素 |
| ：first | 第一个元素 |
| ：gt（） | 索引大于指定值 |
| ：header | 选择所有标题元素h1h2 |
| ：last | 最后一个元素 |
| ：lt（） | 索引小于指定值元素 |
| ：not（） | 不匹配所有元素 |
| ：odd | 奇数所有元素 |
| ：button | |
| ：checkbox | |
| ：checked | |
| ：disaabled | |
| ：enabled | |
| ：file | |
| ：image | |
| ：input | input textarea select button元素 |
| ：password | |
| ：radio | |
| ：reset | |
| ：selected | |
| ：submit | |
| ：text |
| ：hidden | |
| ：visible |
| ：contains（） | 包含特定内容的元素 |
| ：empty | 不包含子元素或空元素 |
| ：has（） | 至少含一个元素与指定选择器相匹配的元素 |
| ：parent | 所有含有子元素或文本节点的元素 |
| ：first-child | 每个父元素第一个元素 |
| ：last-child | 每个父元素最后一元素 |
| :nth-child() | 父元素的第*个元素 |
| :only-child | 具有唯一子元素的元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(function(){
//通过扩展$.expr[":"]实现自定义选择器
$.expr[":"].greenbg=function(element){
return $(element).css("background-color")==="green";
};
var n=$(":greenbg").length;
console.log("there are"+n+"green divs");
});
</script>
</head>
<body>
<div style="width:10;height: 10;background-color:green;"></div>
<div style="width:10;height: 10;background-color: green;"></div>
<div style="width:10;height: 10;background-color: green;"></div>
<div style="width:10;height: 10;background-color: black;"></div>
</body>
</html>输出是0不理解？？遍历DOM1、$("ul").find("#teachBooks")可以从一个元素包装集中查找与指定选择器匹配的后代元素--搜索所有的后代元素2、.children()只在第一层后代元素中搜索3、.get()接受一个索引值作为参数，并返回一个DOM节点4、.index()和get相反，接受一个DOM元素作为参数，返回匹配集中的索引值操作并修改1、.text()2、.html()操作属性1、.attr()2、.removeAttr("class")
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
