更新時(shí)間:2023-01-04 來源:黑馬程序員 瀏覽量:
jQuery選擇器的出現(xiàn)不僅是為了簡(jiǎn)化JavaScript的寫法,也是由于JavaScript提供的選擇DOM的方式較少,難以滿足實(shí)際開發(fā)的眾多需求。因此,jQuery選擇器中提供了更多選擇DOM的方式,支持從CSS1到CSS3所有的選擇器以及其他常用的選擇器。
jQuery選擇器按照功能可以分為基本選擇器、層次選擇器、過濾選擇器,下面我們?cè)敿?xì)介紹。
jQuery中基本選擇器是最簡(jiǎn)單直觀的選擇器,包括id選擇器、類選擇器、元素選擇器和通配符選擇器。如下表所示:
#id | id選擇器,根據(jù)id值匹配一個(gè)元素 | 單個(gè)元素 |
.class | 類選擇器,根據(jù)類名匹配元素 | 元素集合 |
element | 元素選擇器,根據(jù)元素名匹配所有元素 | 元素集合 |
* | 通配符選擇器,匹配所有元素 | 元素集合 |
selector1,selector2,…,selectorN | 同時(shí)獲取多個(gè)元素 | 元素集合 |
選擇器 | 描述 | 返回值 |
---|
上表中,jQuery提供的同時(shí)獲取多個(gè)元素的選擇器,是利用逗號(hào)(,)分隔,將每一個(gè)選擇器匹配到的元素合并后一起返回。
為了大家更好地理解基本選擇器的使用,接下來通過一個(gè)案例進(jìn)行演示,HTML代碼片段如demo1.html所示。
<style> div { border: 1px solid black; } </style> <div id="byId">第1個(gè)div元素,id值為byDiv</div> <p>第1個(gè)p元素</p> <p class="byclass">第2個(gè)p元素,類名為byclass</p> <div class="byclass">第2個(gè)div元素,類名為byClass</div>
上述代碼中,定義了兩個(gè)div元素和兩個(gè)p元素,第1個(gè)div元素的id值為byld,第2個(gè)div元素與第2個(gè)p元素設(shè)置了相同的類名byClass。
使用瀏覽器訪問demo1.html頁(yè)面的初始效果如下圖所示:
圖1 頁(yè)面初始效果
下面使用不同的jQuery基本選擇器操作以上的HTML頁(yè)面。
1.id選擇器
與類選擇器不同的是,一個(gè)規(guī)范的HTML 文檔中不會(huì)出現(xiàn)多個(gè)元素具有相同id值的情況。因此,一個(gè)id選擇器只能獲取一個(gè)元素。 下面為id是byld的元素設(shè)置背景色。在demo1.html 文件中添加jQuery代碼,如下所示。
$('#byId').css('background', 'pink');
上述代碼中,css()是 jQuery提供的方法,用于設(shè)置元素的CSS樣式。其中,background用于設(shè)置背景,pink是背景顏色的值。修改完成后,重新使用瀏覽器訪問demo1.html,頁(yè)面效果如下圖所示。
圖2 id選擇器
2、類選擇器
一個(gè)HTML文檔中,可以為不同元素設(shè)置同名的class值,這樣便可以同時(shí)設(shè)置不同元素的相同樣式或行為。
修改demo1.html中的jQuery 代碼,為頁(yè)面中類名為byClass的所有元素設(shè)置相同的背景色。如下所示。
$('.byClass').css('background', '#a0edbc');
修改完成后,重新使用瀏覽器訪問 demo1.html,頁(yè)面效果如下圖所示。
圖3 類選擇器
從上圖可以看出,引用了類名為byClass的p元素和div元素都被設(shè)置了背景色。
3、元素選擇器
元素選擇器適用于開發(fā)中需要為頁(yè)面中的所有匹配元素添加樣式或行為。修改demo1.html中的jQuery代碼,將p元素中的文本大小設(shè)置為10 px,如下所示。
$('p').css('font-size', '10px');
修改完成后,重新使用瀏覽器訪問demo1.html,頁(yè)面效果如下圖所示。
圖4 元素選擇器
4.通配符選擇器
在實(shí)際開發(fā)中,若需要為頁(yè)面上的所有元素添加相同的樣式或者行為,此時(shí)便可用通配符選擇器“*”一次性獲取頁(yè)面所有元素。修改demo1.html 中的jQuery代碼,將頁(yè)面的背景色設(shè)為yellow,如下所示。
$('*').css('background', 'yellow');
修改完成后,重新使用瀏覽器訪問demo1.html,頁(yè)面效果如下圖所示。
圖5 通配符選擇器
例如,修改以上的jQuery代碼,為class值為byClass和id值為byld的元素設(shè)置背景色,如下所示。
$('.byclass, #byId').css ('background', 'yellow');
圖6 同時(shí)獲取多個(gè)元素
層次選擇器中的“層次”是指DOM元素的層次關(guān)系。例如,按照層次結(jié)構(gòu)關(guān)系可以獲取指定DOM元素的子元素、后代元素、兄弟元素、父元素等。
jQuery的層次選擇器可以快速定位與指定元素具有層次關(guān)系的元素。層次選擇器按照DOM元素的層次可以分為子元素選擇器、后代選擇器和兄弟選擇器,具體如下表所示。
parent>child | 子元素選擇器,根據(jù)父元素匹配所有的子元素 | 元素集合 |
selector selector1 | 后代選擇器, 根據(jù)祖先元素(selector)匹配所有的后代元素(selector1) | 元素集合 |
prev + next | 兄弟選擇器,匹配prev元素近鄰的兄弟元素 | 元素集合 |
prev ~ siblings | 兄弟選擇器,匹配prev元素后代的所有兄弟元素 | 元素集合 |
選擇器 | 描述 | 返回值 |
---|
為了大家更好地理解層次選擇器的使用,接下來通過一個(gè)案例為讀者進(jìn)行演示,HTML代碼片段如 demo2.html所示。
<p>這是div前面的p元素</p> <div id="dv"> <p>這是div中的第1個(gè)p元素</p> <ul> <li>這是第1個(gè)li元素</li> <li><p>這是第2個(gè)li中的p元素</p></li> </ul> <p>這是div中的第2個(gè)p元素</p> </div> <p>這是div后面的第1個(gè)p元素</p> <p>這是div后面的第2個(gè)p元素</p> <p>這是div后面的第3個(gè)p元素</p>
頁(yè)面結(jié)構(gòu)設(shè)計(jì)完成后,下面將最外層的div元素當(dāng)做默認(rèn)的元素,子元素、后代元素以及兄弟元素都是相對(duì)于該div元素進(jìn)行操作。使用瀏覽器訪問demo2.html,頁(yè)面的初始效果如下圖所示。
圖7 頁(yè)面初始效果
下面使用不同的jQuery基本選擇器操作以上的HTML頁(yè)面。
1. 子元素選擇器
子元素選擇器指的是通過父元素(parent)獲取其下的指定子元素(child)。下面在demo2.html文件中添加如下jQuery 代碼,為div元素的子元素添加背景色。
$('#dv >p').css('backgroundColor', 'red');
上述代碼中,在選擇器中通過符號(hào)“>”獲取id值為dv下的所有子元素p,并修改它們的背景色。修改完成后,使用瀏覽器訪問 demo2.html,頁(yè)面效果如下圖所示。
圖8 子元素選擇器
從上圖可以看出,程序僅為id值為dv的元素下的p元素添加背景色,不會(huì)影響其他p元素的樣式。
多學(xué)一招:children()方法
在jQuery中,還可以使用children()方法代替子元素選擇器,獲取指定元素的子元素.例如,獲取demo2.html中,id值等于dv的元素下所有的子元素p,如下所示。
$('#dv >p'); //使用子元素選擇器獲取 $('#dv').children('p'); //使用 children()方法獲取
上述代碼中,children()方法的參數(shù)p表示要獲取的子元素,調(diào)用該方法的是子元素的父元素對(duì)象,如$('div')。
2. 后代選擇器
后代元素與子元素的區(qū)別在于,后代元素不僅包括子元素,還包括子元素下的所有其他元素。
替換demo2.html中的jQuery 代碼,為id值等于dv的所有后代p元素添加背景色,如下所示。
$('#dv p').css('backgroundColor', 'red');
上述代碼中,在選擇器中通過空格,獲取id值為dv下的所有后代p元素,并修改它們的背景色。修改完成后,使用瀏覽器訪問 demo2.html,頁(yè)面效果如下圖所示。
圖9 后代選擇器
對(duì)比圖9與圖8,可以清楚地看出jQuery的子選擇器和后代選擇器的區(qū)別。
多學(xué)一招:find()方法
在jQuery中,還可以使用find()方法獲取指定元素的后代元素。例如,獲取 demo2-2.html 中 id值等于dv的元素下所有后代p元素,如下所示。
$('#dv p'); //使用后代選擇器荻取 $('#dv') .find ('p'); //使用find()方法獲取
上述代碼中,find()方法傳遞的參數(shù)p表示要獲取的所有后代p元素。
3. 兄弟選擇器
通過兄弟選擇器可以獲取指定元素的兄弟元素,兄弟元素可以理解為同輩元素或同級(jí)元素。
修改demo2.html中的jQuery代碼,為id為dv下一個(gè)p元素設(shè)置背景色,如下所示。
$('#dv + p').css('backgroundColor', 'red');
上述代碼中,在選擇器中通過符號(hào)“+”獲取緊鄰id值為dv的下一個(gè)兄弟元素p,并修改它的背景色。修改完成后,使用瀏覽器訪問demo2.html,頁(yè)面效果如下圖所示。
圖10 獲取相鄰兄弟元素
另外,若要獲取指定元素后的所有兄弟元素,可以在選擇器中使用符號(hào)“~”。修改demo2.html 頁(yè)面中的jQuery代碼,如下所示。
$('#dv ~ p').css('backgroundColor', 'red');
修改完成后,使用瀏覽器訪問demo2.html,頁(yè)面效果如圖11所示。
對(duì)比圖11與圖10可以清楚地看出,“prev + next”僅能獲取prev元素緊鄰的下一個(gè)同級(jí)元素,“prev ~ siblings”可獲取prev后的所有同級(jí)元素。
多學(xué)一招:next()、nextAll()和siblings()方法的使用
jQuery中提供的next()方法可獲取指定元素緊鄰的下一個(gè)兄弟元素,nextAll()方法可獲取指定元素后的所有兄弟元素,而siblings()方法則可獲取指定元素的所有兄弟元素。
下面以demo2.html為例進(jìn)行演示,示例代碼如下。
//獲取id為dv后緊鄰的兄弟元素p $('div').next('p').css('background', 'red'); //獲取id為dv后所有兄弟元素p $('div').nextAll('p').css('background', 'red'); //獲取id為dv的所有兄弟元素p $('div').siblings('p').css('background', 'red');
、
圖12 siblings()獲取所有兄弟元素
上述代碼中,前兩行代碼獲取的p元素分別與圖10和圖11相同。最后一行獲取的p元素頁(yè)面效果如圖12所示。