JQuery常规选择器

1. 简单选择器

$("#box").css("color", "red");  //ID选择器

$("box").css("color", "blue"); //元素选择器

$(".box").css("color", "orange"); //类选择器

$("#box").size();  //返回匹配元素个数

$("#box").get(2);  //返回dom对象

$("#box").eq(2); //返回包含第二个dom对象的jquery对象

$("#box")[0]; //返回第一个dom对象

2. 进阶选择器

$("div,p,strong").css("color", "red");  //群组选择器

$("li a").css("color", "blue");  //后代选择器

$("ul li *").css("color", "orange");  //通配符选择器

$("div.box").css("color", "balck");  //带box类的div

$(".pox.box").css("color", "balck");  //同时带box和pox类

3. 高级选择器

$("#box").find("p");   //寻找#box的后代p

$("#box > p");  //子选择器

$("#box").children("p");  //同上，选择子元素p

$("#box + p");  //同级下一个节点，相隔的节点不匹配

$("#box").next("p");  //同上

$("#box ~ p");  //下面所有的同级节点p

$("#box").nextAll("p");  //同上

$("#box").prev("p"); //同级上一个节点p

$("#box").prevAll("p"); //同级上面所有节点p

$("#box").siblings("p"); //上下所有同级节点p

$("#box").prevUtil("p");  //向上遇到p停止

$("#box").nextUtil("p"); //向下遇到p停止

4. 属性选择器

$("a[title=num1]").css("color", "red");  //属性选择器

$("a[title^=num]").css("color", "red");  //开头匹配

$("a[title$=num]").css("color", "red");  //结尾匹配

$("a[title |=num]").css("color", "red");  //匹配类似num-1, num-2

$("a[title !=num]").css("color", "red");  //不等于num的匹配

$("a[title ~=num]").css("color", "red");  //包含num的匹配

$("a[title *=num]").css("color", "red");  //包含num子串的匹配

$("a[title *=num][b=title]").css("color", "red");  //多属性匹配