PHP經(jīng)典實用正則表達(dá)式小結(jié)
703
2024-01-10
其實選擇器就像開罐器一樣，會用這個工具的人，自然吃的到甜頭，但不會用這個工具的人，不管罐頭里面的面筋土豆有多美味，吃不到就是吃不到，就如同jquery再怎么強大，也只能看著熒幕，而不知該如何下手，不過雖然選擇器不難，也容易上手，但老實說，我用了一年多下來，還是覺得自己只有用皮毛而已，所以希望藉著這一系列的筆記，讓自己能更長進(jìn)一些
DOM怎么吃
DOM可以說是JavaScript與網(wǎng)頁之間的聯(lián)系管道，他提供了一個模型，讓JavaScript能藉由此模型來改變或操作整個網(wǎng)頁，
<div class="one"> <p>two_1</p> <p>two_2</p> <p>two_2</p> </div>
我這邊就簡單介紹一下DOM模型，有個元素class名為one的是父元素，底下有三個兒子元素<p>，每個元素都視為一個節(jié)點，也可以看成一個樹形圖，因為我認(rèn)為有些東西是Google會講得比我好，所以還想知道更多糾結(jié)的父子關(guān)系...，可以去這，那邊有很好的說明，這邊就不多加解釋，而當(dāng)Jquery利用選擇器抓取到DOM元素以后，就會將他包裝成一個Jquery object，并且回傳
$('#MyDiv')<-- 他是一個物件
這里有個觀念十分重要，因為許多初學(xué)者，甚至是一些從Jquery開始學(xué)起Javascript的開發(fā)者(包括我)，常常會把以下兩個程序碼搞混在一起
//原生JavaScript取id為a的div
var result1 = document.getElementById('a');
console.log(result1);
//用jquery取id為a的div
var result2=$('#a');
console.log(result2);
如果你執(zhí)行這段程序碼出來，??會發(fā)現(xiàn)console出來的結(jié)果，用JavaScript取出來的結(jié)果是DOM，可是一樣的div用Jquery取出來的卻是個包裝過后的物件，換句話說，你不能直接對包裝過后的Jquery物件增加DOM的事件，而是要用Jquery提供的事件，有人會說，那意思是不是說以后只能河水不犯井水，往后互不干涉，從此分道揚鑣呢? 到也不是
var b=$('#a')[0];
只要跟上述程序碼一樣就可以取得DOM的元素了
$()工廠
不管是如何選擇，我們都會用相同的函式$()，就如之前所講的，他能接受CSS選擇器的語法做為參數(shù)，而最主要的三個參數(shù)分別為tag name、ID與class，當(dāng)然，這三個參數(shù)可以再與其他CSS語法做結(jié)合
//tag name
$('div')
//ID
$('#myId')
//class
$('.myClass')
而上述函式都會如同第一章所介紹的，都有隱式迭代的特色，而為了做到跨覽器的支援，Jquery的選擇器包含了CSS1-3，所以不用擔(dān)心一些比較特別的瀏覽器(對就是IE6)不能執(zhí)行，除非瀏覽器沒有開啟JavaScript
接著接下來我簡單介紹幾個用法
http://jsfiddle.net/XZnQ7/
//將不含color1 class的p增加一個color2 class
$('p:not(.color1)').addClass('color2');
http://jsfiddle.net/bpJct/3/
//這里是用正規(guī)表示法
$('a[href^="mailto:"]').addClass('font1');
$('a[href^="http"]').addClass('font2');
$('a[href$=".pdf"]').addClass('font3');
當(dāng)然還提供了一些客制化(custom)的選擇器，但一般來說原生(native)的方式會來的效能比較快，如果有注重這塊的朋友，可能要盡量避免使用客制化的選擇器例如以下范例
http://jsfiddle.net/MF8mu/
//替index為1的tr加上class
$('tr:eq(1)').addClass('color1');
//替index為1的tr加上class
$('tr:nth-child(1)').addClass('color2');
這里很特別的是，為什么都是替index為1的tr加上class，卻是不同的結(jié)果呢?，因為:eq()算是一個JavaScript陣列，index是0起始，所以才會選到第二個，而nth-child()是CSS選擇器的一種，所以index是以1起始，選到的就是第一個，以下的范例意思相同
http://jsfiddle.net/3PrJt/
//選擇偶數(shù)的tr增加class
$('tr:even').addClass('color1');
//選擇偶數(shù)的tr增加class
$('tr:nth-child(even)').addClass('color2');
就如同剛剛所講的，index起始不同(JavaScript起始為0，CSS為1)，所以雖然都是取偶數(shù)，但卻是不同列
再來就一些FORM常用的選擇器 http://jsfiddle.net/qcXSy/3/
$(':button').click(function(){
alert('a');
});
這就代表說綁定所有的bitton一個click事件，其他還有像:input、:button、:enabled、:disabled都可以跟其他選擇器一起組合成新的選擇器
更加強大的.filter()
當(dāng)有時候一般的選擇器已經(jīng)不能不能滿足我們復(fù)雜的DOM時，例如要抓div的爸爸的哥哥的兒子的妹婿的二姑的大舅時...，這時候還可以用一個方法filter，這個方法特別的地方在于他可以帶function進(jìn)去 http://jsfiddle.net/wGz3k/
可以看到function里面限制return index == 1才可以增加CSS，這個好處就在于可以在里面做很多復(fù)雜的邏輯運算
當(dāng)然Jquery還有太多太多選擇器可以使用，像還有.next()、.parent()、.children()一般常用的這幾個，其實就很夠用了我認(rèn)為，再多的選擇器有時候好像只是展示不同的寫法，但其實只要能抓取到你想要的元素，解決問題
你甚至想要這樣寫$('div').children().children().children().children().children()也不會有人說不行..
實例
一個網(wǎng)站中有10種的文章分類，我們設(shè)計一個類似WordPress顯示各文章分類的名稱及其文章數(shù)量的欄目，當(dāng)用戶進(jìn)入一個頁面時，默認(rèn)顯示前面5個分類的名稱以及最后一個分類——其他分類，用戶可以通過單擊“顯示全部分類”按鈕來顯示全部分類，同時一些推薦的分類會加下劃線顯示，按鈕中的文字會改變?yōu)椤帮@示部分分類”，再次單擊“顯示部分分類”后會回到之前的頁面狀態(tài)。
首先為了實現(xiàn)這個功能，我們需要寫出相應(yīng)的 html
<div class="CategoryBox">
<h2>分類列表</h2>
<ul>
<li><a >互聯(lián)網(wǎng)(55)</a></li>
<li><a >前端(22)</a></li>
<li><a >css(10)</a></li>
<li><a >jQuery(12)</a></li>
<li><a >后臺(28)</a></li>
<li><a >Php(10)</a></li>
<li><a >jsp(6)</a></li>
<li><a >.net(5)</a></li>
<li><a >CMS(9)</a></li>
<li><a >其他分類(3)</a></li>
</ul>
<div class="more">
<a ><span>顯示全部分類</span></a>
</div>
</div>
在Html寫后好再添加一些簡單的css，然后就可以開始jQuery的編寫。
下面的代碼將實現(xiàn)頁面加載完畢后選取相應(yīng)的對象并隱藏，這里選取的是第6個分類到第9個分類4個對象，因為需要控制隱藏和顯示的便是這四個分類。
var $category = $('ul li:gt(4):not(:last)');
$category.hide();
$('ul li:gt(4):not(:last)')的意思便是獲取索引值大于4的li元素并且去掉最后一個，需要注意的是索引值是從0開始，所以這樣便可以獲取第6到第9個分類。
下面將會獲取“顯示全部分類”按鈕，并且給該按鈕添加一個事件，單擊該按鈕后顯示所有分類
var $toggleBtn = $('.more a');
$toggleBtn.click(function() {
$category.show();
return false;
});
.show()是用于顯示元素的動畫，另外由于給超鏈接添加onclick事件，因此需要添加return false語句阻止該超鏈接跳轉(zhuǎn)。
寫到這里，我們不難發(fā)現(xiàn)，jQuery的選擇器跟css選擇器有相近之處，其原理都是先以選擇器選擇對象，再添加操作，不過jQuery的選擇器明顯比css的豐富和簡便得多，這也是使用jQuery能大大提高網(wǎng)站開發(fā)效率的重要原因。
接著上面的例子，根據(jù)文章開頭設(shè)定的條件，在單擊“顯示全部分類”的按鈕后，部分推薦的分類會添加下劃線，同時按鈕中的文字會變成“顯示部分分類”，因此我們還需要在.show()和return false之間添加以下代碼：
$('.more a span').text("顯示部分分類");
$('ul li').filter(":contains('前端'),:contains('css'),:contains('jQuery'),:contains('CMS')").addClass("feature");
.text()用于改變對象中的文字，filter()可以用于選出推薦對象，這里推薦的是前端，CSS，jQuery，CMS，然后使用addClass()為它們添加“feature”類，因為我已預(yù)先寫feature類的css，所以以上推薦對象在單擊按鈕后便會加上下劃線。至此，可以說基本完成了這次需要的jQuery，當(dāng)然用戶單擊“顯示部分分類”后的效果還沒有寫上相應(yīng)的jQuery。但有了前面的一段jQurey代碼，相信寫出單擊“顯示部分分類”后的代碼應(yīng)該不難。
在單擊“顯示部分分類”后的效果中其中一個是需要去掉推薦分類的下劃線效果，我們可以使用removeClass()，用法與addClass相同。
現(xiàn)在余下的問題是如何把兩段代碼寫在一起，由于用戶在兩個事件上單擊的是同一個按鈕，因此事件仍然是在剛才的按鈕元素上，要使兩種狀態(tài)在一個元素上進(jìn)行，我們可以使用判斷：
if(元素顯示狀態(tài) ) {
//隱藏元素
}else{
//顯示元素
}
整個完整的jQuery代碼如下：
$(document).ready(function() {
var $category = $('ul li:gt(4):not(:last)');
$category.hide();
var $toggleBtn = $('.more a');
$toggleBtn.click(function() {
if($category.is(":visible")) {
$category.hide();
$('.more a span')
.text("顯示全部分類");
$('ul li').removeClass("feature");
}else{
$category.show();
$('.more a span')
.text("顯示部分分類");
$('ul li').filter(":contains('前端'),:contains('css'),:contains('jQuery'),:contains('CMS')")
.addClass("feature");
}
return false;
});
});
上面的判斷語句，用法與一般的高級編程語言相近，但放在jQuery這個以輕便聞名的js庫中不免顯得繁瑣，其實在jQuery中有更為輕便的方法去實現(xiàn)上面的例子，即toggle()方法，代碼如下：
$(document).ready(function(){
var $category = $('ul li:gt(4):not(:last)');
$category.hide();
var $toggleBtn = $('.more a');
$toggleBtn.toggle(function(){
$category.show();
$('.more a span')
.text("顯示部分分類");
$('ul li').filter(":contains('前端'),:contains('css'),:contains('jQuery'),:contains('CMS')")
.addClass("feature");
},function(){
$category.hide();
$('.more a span')
.text("顯示全部分類");
$('ul li').removeClass("feature");
});
});
具體的效果可以看demo note-selector
