其实选择器就像开罐器一样，会用这个工具的人，自然吃的到甜头，但不会用这个工具的人，不管罐头里面的面筋土豆有多美味，吃不到就是吃不到，就如同jquery再怎么强大，也只能看着荧幕，而不知该如何下手，不过虽然选择器不难，也容易上手，但老实说，我用了一年多下来，还是觉得自己只有用皮毛而已，所以希望藉着这一系列的笔记，让自己能更长进一些
DOM怎么吃
DOM可以说是JavaScript与网页之间的联系管道，他提供了一个模型，让JavaScript能藉由此模型来改变或操作整个网页，
<div> <p>two_1</p> <p>two_2</p> <p>two_2</p> </div>
我这边就简单介绍一下DOM模型，有个元素class名为one的是父元素，底下有三个儿子元素<p>，每个元素都视为一个节点，也可以看成一个树形图，因为我认为有些东西是Google会讲得比我好，所以还想知道更多纠结的父子关系...，可以去这，那边有很好的说明，这边就不多加解释，而当Jquery利用选择器抓取到DOM元素以后，就会将他包装成一个Jquery object，并且回传
$('#MyDiv')<-- 他是一个物件
这里有个观念十分重要，因为许多初学者，甚至是一些从Jquery开始学起Javascript的开发者(包括我)，常常会把以下两个程序码搞混在一起
//原生JavaScript取id为a的div var result1 = document.getElementById('a'); console.log(result1); //用jquery取id为a的div var result2=$('#a'); console.log(result2);
如果你执行这段程序码出来，妳会发现console出来的结果，用JavaScript取出来的结果是DOM，可是一样的div用Jquery取出来的却是个包装过后的物件，换句话说，你不能直接对包装过后的Jquery物件增加DOM的事件，而是要用Jquery提供的事件，有人会说，那意思是不是说以后只能河水不犯井水，往后互不干涉，从此分道扬镳呢? 到也不是
var b=$('#a')[0];
只要跟上述程序码一样就可以取得DOM的元素了
$()工厂
不管是如何选择，我们都会用相同的函式$()，就如之前所讲的，他能接受CSS选择器的语法做为参数，而最主要的三个参数分别为tag name、ID与class，当然，这三个参数可以再与其他CSS语法做结合
//tag name $('div') //ID $('#myId') //class $('.myClass')
而上述函式都会如同第一章所介绍的，都有隐式迭代的特色，而为了做到跨览器的支援，Jquery的选择器包含了CSS1-3，所以不用担心一些比较特别的浏览器(对就是IE6)不能执行，除非浏览器没有开启JavaScript
接着接下来我简单介绍几个用法
//将不含color1 class的p增加一个color2 class $('p:not(.color1)').addClass('color2');
//这里是用正规表示法 $('a[href^="mailto:"]').addClass('font1'); $('a[href^="http"]').addClass('font2'); $('a[href$=".pdf"]').addClass('font3');
当然还提供了一些客制化(custom)的选择器，但一般来说原生(native)的方式会来的效能比较快，如果有注重这块的朋友，可能要尽量避免使用客制化的选择器例如以下范例
//替index为1的tr加上class $('tr:eq(1)').addClass('color1'); //替index为1的tr加上class $('tr:nth-child(1)').addClass('color2');
这里很特别的是，为什么都是替index为1的tr加上class，却是不同的结果呢?，因为:eq()算是一个JavaScript阵列，index是0起始，所以才会选到第二个，而nth-child()是CSS选择器的一种，所以index是以1起始，选到的就是第一个，以下的范例意思相同
//选择偶数的tr增加class $('tr:even').addClass('color1'); //选择偶数的tr增加class $('tr:nth-child(even)').addClass('color2');
就如同刚刚所讲的，index起始不同(JavaScript起始为0，CSS为1)，所以虽然都是取偶数，但却是不同列
再来就一些FORM常用的选择器
$(':button').click(function(){ alert('a'); });
这就代表说绑定所有的bitton一个click事件，其他还有像:input、:button、:enabled、:disabled都可以跟其他选择器一起组合成新的选择器
更加强大的.filter()
当有时候一般的选择器已经不能不能满足我们复杂的DOM时，例如要抓div的爸爸的哥哥的儿子的妹婿的二姑的大舅时...，这时候还可以用一个方法filter，这个方法特别的地方在于他可以带function进去
可以看到function里面限制return index == 1才可以增加CSS，这个好处就在于可以在里面做很多复杂的逻辑运算
当然Jquery还有太多太多选择器可以使用，像还有.next()、.parent()、.children()一般常用的这几个，其实就很够用了我认为，再多的选择器有时候好像只是展示不同的写法，但其实只要能抓取到你想要的元素，解决问题
你甚至想要这样写$('div').children().children().children().children().children()也不会有人说不行..