jQuery教程05-层级选择器
生活随笔
收集整理的這篇文章主要介紹了
jQuery教程05-层级选择器
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
jQuery選擇器之層級選擇器
文檔中的所有的節(jié)點(diǎn)之間都是有這樣或者那樣的關(guān)系。我們可以把節(jié)點(diǎn)之間的關(guān)系可以用傳統(tǒng)的家族關(guān)系來描述，可以把文檔樹當(dāng)作一個(gè)家譜，那么節(jié)點(diǎn)與節(jié)點(diǎn)直接就會(huì)存在父子，兄弟，祖孫的關(guān)系了。
選擇器中的層級選擇器就是用來處理這種關(guān)系
子元素 后代元素 兄弟元素 相鄰元素通過一個(gè)列表，對比層級選擇器的區(qū)別：
仔細(xì)觀察層級選擇器之間還是有很多相似與不同點(diǎn)
層級選擇器都有一個(gè)參考節(jié)點(diǎn) 后代選擇器包含子選擇器的選擇的內(nèi)容 一般兄弟選擇器包含相鄰兄弟選擇的內(nèi)容 相鄰兄弟選擇器和一般兄弟選擇器所選擇到的元素，必須在同一個(gè)父元素下示例代碼：
<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>jQuery選擇器之層級選擇器</title><link rel="stylesheet" href="imooc.css" type="text/css"><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script><style>.left,.right {width: 300px;height: 120px;}.left div,.right div {width: 100px;height: 90px;padding: 5px;margin: 5px;float: left;background: #bbffaa;border: 1px solid #ccc;}.bottom {width: 800px;}.bottom div,.bottom span {display: block;width: 80px;height: 80px;margin: 5px;background: #bbffaa;float: left;font-size: 14px;}.bottom .small {width : 60px;height : 25px;font-size : 12px;background : yellow;}</style> </head> <body><h2>子選擇器與后代選擇器</h2><div class="left"><div class="aaron"><p>div下的第一個(gè)p元素</p></div><div class="aaron"><p>div下的第一個(gè)p元素</p></div></div><div class="right"><div class="imooc"><article><p>div下的article下的p元素</p></article></div><div class="imooc"><article><p>div下的article下的p元素</p></article></div></div><script type="text/javascript">//子選擇器//$('div > p') 選擇所有div元素里面的子元素P$('div > p').css("border", "1px groove red");</script><script type="text/javascript">//后代選擇器//$('div p') 選擇所有div元素里面的p元素$('div p').css("border", "1px groove red");</script><h2>相鄰兄弟選擇器與一般兄弟選擇器</h2><div class="bottom"><div>兄弟節(jié)點(diǎn)div, +~選擇器不能向前選擇</div><span class="prev">選擇器span元素</span><div>span后第一個(gè)兄弟節(jié)點(diǎn)div</div><div>兄弟節(jié)點(diǎn)div<div class="small">子元素div</div></div><span>兄弟節(jié)點(diǎn)span,不可選</span><div>兄弟節(jié)點(diǎn)div</div></div><script type="text/javascript">//相鄰兄弟選擇器//選取prev后面的第一個(gè)的div兄弟節(jié)點(diǎn)// $('.prev + div').css("border", "3px groove blue");</script><script type="text/javascript">//一般相鄰選擇器//選取prev后面的所有的div兄弟節(jié)點(diǎn)$('.prev ~ div').css("border", "3px groove blue");</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的jQuery教程05-层级选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： input输入框汇总
- 下一篇： SimpleDateFormat的一些简