#box {//使用ID 选择器的CSS 规则 
 
 color:red;//将ID 为box 的元素字体颜色变红 
 
} 

$('#box').css('color', 'red');//获取DOM 节点对象，并添加行为 

$('#box').css('color', 'red');//获取DOM 节点对象，并添加行为 
 
$('div').css('color', 'red');//元素选择器，返回多个元素 
 
$('#box').css('color', 'red'); //ID 选择器，返回单个元素 
 
$('.box').css('color', 'red'); //类(class)选择器，返回多个元素 

alert($('div').size());//3 个 
 
alert($('#box').size()); //1 个，后面两个失明了 
 
alert($('.box').size());//3 个 

alert($('#box').length);//1 个，后面失明了 

$('#box').css('color', 'red');//只有第一个ID 变红，后面两个失明 

#box > p { //CSS 子选择器，IE6 不支持 
 
 color:red; 
 
} 
 
$('#box > p').css('color','red'); //jQuery 子选择器，兼容了IE6 

$('#pox').css('color', 'red');//不存在ID 为pox 的元素，也不报错 
 
document.getElementById('pox').style.color = 'red';//报错了 

if (document.getElementById('pox')) {//先判断是否存在这个对象 
 
 document.getElementById('pox').style.color = 'red'; 
 
} 

if ($('#pox').length > 0) {//判断元素包含数量即可 
 
 $('#pox').css('color', 'red'); 
 
} 

if ($('#pox').get(0)) {} 或if ($('#pox')[0]) {} //通过数组下标也可以获取DOM 对象 

//群组选择器 
span, em, .box {//多种选择器添加红色字体 
 
 color:red; 
 
} 
 
$('span, em, .box').css('color', 'red');//群组选择器jQuery 方式 
 
//后代选择器 
ul li a { //层层追溯到的元素添加红色字体 
 
 color:red; 
 
} 
 
$('ul li a').css('color', 'red');//群组选择器jQuery 方式 
 
//通配选择器 
* { //页面所有元素都添加红色字体 
 
color:red; 
 
} 
 
$('*').css('color', 'red'); //通配选择器 

$('#box p, ul li *').css('color', 'red');//组合了多种选择器 

$('div.box');//限定必须是.box 元素获取必须是div 
 
$('p#box div.side');//同上 

.box.pox {//双class 选择器，IE6 出现异常 
 
 color:red; 
 
} 
 
$('.box.pox').css('color', 'red');//兼容IE6，解决了异常 

$('.box, .pox').css('color', 'red');//加了逗号，体会区别 

$('div#box ul li a#link');//让jQuery 内部处理了不必要的字符串 
 
$('#link'); //ID 是唯一性的，准确度不变，性能提升 

//后代选择器
$('#box p').css('color', 'red');//全兼容 

$('#box').find('p').css('color', 'red');//和后代选择器等价 

//子选择器，孙子后失明

#box > p { //IE6 不支持 
 
 color:red; 
 
} 
 
$('#box > p').css('color', 'red'); //兼容IE6 

$('#box').children('p').css('color', 'red');//和子选择器等价 

//next 选择器(下一个同级节点) 
#box + p {//IE6 不支持 
 
 color:red; 
 
} 
 
$('#box+p').css('color', 'red');//兼容IE6 

$('#box').next('p').css('color', 'red');//和next 选择器等价 

//nextAll 选择器(后面所有同级节点)

#box ~ p { //IE6 不支持 
 
color:red; 
 
} 
 
$('#box ~ p').css('color', 'red');//兼容IE6 

$('#box').nextAll('p').css('color', 'red');//和nextAll 选择器等价 

$('#box').next();//相当于$('#box').next('*'); 

$('#box').prev('p').css('color', 'red');//同级上一个元素 
 
$('#box').prevAll('p').css('color', 'red');//同级所有上面的元素 

$('#box').prevUntil('p').css('color', 'red');//同级上非指定元素选定，遇到则停止 
 
$('#box').nextUntil('p').css('color', 'red');//同级下非指定元素选定，遇到则停止 

$('#box').siblings('p').css('color', 'red');//同级上下所有元素选定 
 
//等价于下面： 
 
$('#box').prevAll('p').css('color', 'red');//同级上所有元素选定 
 
$('#box').nextAll('p').css('color', 'red'); //同级下所有元素选定 

//这条最快，会使用原生的getElementById、ByName、ByTagName 和querySelectorAll()

$('#box').find('p'); 

//jQuery 会自动把这条语句转成$('#box').find('p')，这会导致一定的性能损失。它比最快的形式慢了5%-10%

$('p', '#box'); 

//这条语句在jQuery 内部，会使用$.sibling()和javascript 的nextSibling()方法，一个个遍历节点。它比最快的形式大约慢50%

$('#box').children('p'); 

//jQuery 内部使用Sizzle 引擎，处理各种选择器。Sizzle 引擎的选择顺序是从右到左，所以这条语句是先选p，然后再一个个过滤出父元素#box，这导致它比最快的形式大约慢70%

$('#box > p'); 

//这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可以于选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%。

$('#box p'); 

//jQuery 内部会将这条语句转成$('#box').find('p')，比最快的形式慢了23%。

$('p', $('#parent')); 

var box = $('#box'); 
 
var p = box.find('p'); 

//选定这个属性的 
a[title] { //IE6 不支持 
 
 color:red; 
 
} 
 
$('a[title]').css('color', 'red');//兼容IE6 了 

//选定具有这个属性=这个属性值的

a[title=num1] {//IE6 不支持 
 
 color:red; 
 
} 
 
$('a[title=num1]').css('color', 'red');//兼容IE6 了 

//选定具有这个属性且开头属性值匹配的

a[title^=num] { //IE6 不支持 
 
 color:red; 
 
} 
 
$('a[title=^num]').css('color', 'red'); //兼容IE6 了 

//选定具有这个属性且等于属性值或开头属性值匹配后面跟一个“-”号

a[title|=num] {//IE6 不支持 
 
 color:red; 
 
} 
 
$('a[title|="num"]').css('color', 'red');//兼容IE6 了 

//选定具有这个属性且结尾属性值匹配的

a[title$=num] {//IE6 不支持 
 
 color:red; 
 
} 
 
$('a[title$=num]').css('color','red'); //兼容IE6 了 

//选定具有这个属性且属性值不想等的

a[title!=num1] {//不支持此CSS 选择器 
 
 color:red; 
 
} 
 
$('a[title!=num1]').css('color','red');//jQuery 支持这种写法 

//选定具有这个属性且属性值是以一个空格分割的列表，其中包含属性值的

a[title~=num] {//IE6 不支持 
 
 color:red; 
 
} 
 
$('a[title~=num1]').css('color','red'); //兼容IE6 

//选定具有这个属性且属性值含有一个指定字串的

a[title*=num] {//IE6 不支持 
 
 color:red; 
 
} 
 
$('a[title*=num]').css('color','red');//兼容IE6 

//选定具有多个属性且属性值匹配成功的

a[bbb][title=num1] {//IE6 不支持 
 
 color:red; 
 
} 
 
$('a[bbb][title=num1]').css('color','red');//兼容IE6