jQuery子選擇器和後代選擇器區別簡單介紹
在jQuery中有子選擇器和後代選擇器,這兩種選擇器具有相似之處,當然區別也是巨大的,下面就通過例項程式碼介紹一下兩者的區別是什麼,希望能夠給初學者帶來一定的幫助。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body{text-align:center} #top,#bottom{ width:200px; height:200px; border:1px solid black; margin:0px auto; margin-top:10px; } .middle{ width:100px; height:100px; margin-top:50px; margin-left:50px; } .inner{ width:50px; height:50px; margin-top:25px; margin-left:25px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function (){ $("#bt").click(function(){ $("#top div").css("border","1px solid black"); $("#bottom>div").css("border","1px solid black"); }) }); </script> </head> <body> <div id="top"> <div class="middle"> <div class="inner"></div> </div> </div> <div id="bottom"> <div class="middle"> <div class="inner"></div> </div> </div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
以上程式碼實現了後代選擇器和子選擇器的區別,區別其實很明顯的,後代選擇器可以匹配當前元素的所有後代元素,而子選擇器只能夠匹配一級子元素,匹配的範圍有所不同。
相關文章
- jQuery選擇器介紹:基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery
- jQuery 後代選擇器jQuery
- jQuery的萬用字元選擇器簡單介紹jQuery字元
- 基本CSS選擇器,複合選擇器,後代選擇器CSS
- jQuery選擇器——子元素過濾選擇器jQuery
- jQuery dom元素層級匹配選擇器簡單介紹jQuery
- CSS-選擇器4-後代選擇器CSS
- jQuery選擇器——基本選擇器jQuery
- CSS樣式中的後代選擇器和子代選擇器CSS
- jQuery選擇器——表單元素過濾選擇器jQuery
- css :target偽類選擇器簡單介紹CSS
- JQuery選擇器——可見性篩選選擇器和屬性篩選選擇器jQuery
- jQuery選擇器——層次選擇器jQuery
- css選擇器的解析順序簡單介紹CSS
- CSS3屬性選擇器簡單介紹CSSS3
- jQuery選擇器 標籤選擇元素+css簡單新增移除操作jQueryCSS
- jQuery選擇器之層次選擇器jQuery
- jQuery選擇器——基本過濾選擇器jQuery
- jQuery選擇器jQuery
- jQuery 選擇器jQuery
- jQuery子元素過濾選擇器jQuery
- jQuery選擇器——內容過濾選擇器jQuery
- jQuery選擇器——屬性過濾選擇器jQuery
- jQuery選擇器——可見性過濾選擇器jQuery
- input和:input選擇器的區別
- jQuery選擇器(下)jQuery
- jQuery 選擇器效率jQuery
- Jquery的選擇器jQuery
- jQuery :last選擇器jQueryAST
- jQuery .class選擇器jQuery
- jQuery element選擇器jQuery
- jQuery #id選擇器jQuery
- [JS] jQuery選擇器JSjQuery
- jQuery系列:選擇器jQuery
- jQuery選擇器大全jQuery
- 初學jQuery(表單選擇器)jQuery
- css選擇器中的加號+的作用簡單介紹CSS
- jQuery 選擇器彙總-思維導圖-選擇器jQuery