標籤：分組 cti 寫法 建議 children 瀏覽器 tle class ext
jQuery選取器和css一樣，但相容性更好
<body> <p>p1</p> <p>p1</p> <p>p1</p> <div id="box"> <p>p2</p> <p>p2</p> <p>p2</p> <div> <p>p3</p> <p>p3</p> <p>p4</p> </div> </div> <p>p4</p> <p>p4</p> <p>p4</p></body>
層次選取器：
$(function(){ //後代選取器 $(‘#box p‘).css(‘color‘,‘red‘); $(‘#box‘).find(‘p‘).css(‘color‘,‘blue‘); //子選取器 $(‘#box > p‘).css(‘color‘,‘red‘); $(‘#box‘).children(‘p‘).css(‘color‘,‘blue‘); //next選取器，擷取節點後一個同級DOM對象，如果不是所指定的沒有效果 $(‘#box + p‘).css(‘color‘,‘red‘); $(‘#box‘).next(‘p‘).css(‘color‘,‘blue‘); //nextAll，擷取節點後所有同級DOM對象 $(‘#box ~ p‘).css(‘color‘,‘red‘); $(‘#box‘).nextAll(‘p‘).css(‘color‘,‘blue‘);});
jQuery方法對選取器的補充：
//jQuery對進階選取器的補充，提供的幾種方法 //同級上指定元素:一個或所有個 $(‘#box‘).prev(‘p‘).css(‘color‘,‘red‘); $(‘#box‘).prevAll(‘p‘).css(‘color‘,‘blue‘); //同級非指定元素:上或下 $(‘#box‘).prevUntil(‘p‘).css(‘color‘,‘red‘); $(‘#box‘).nextUntil(‘p‘).css(‘color‘,‘blue‘); //同級指定元素：上和下 $(‘#box‘).siblings(‘p‘).css(‘color‘,‘red‘);
註：1 方法如果不傳參相當於*，表示任意，不建議使用
2 方法相對進階選取器寫法好一些：find()最快，可以拆分組合使用
var box = $(‘#box‘); var p = box.find(‘p‘);
----------------------------------------------------------------------------------------------------------------------------------------------------------
屬性選取器：
<a sss="x" title="num1 aaa bbb">num1</a> <a>num2</a> <a>num3</a> <a>num4</a> <a sss="s" title="num5">num5</a> <a title="num-6">num6</a> <a title="nsdfnumsdf">num7</a>
//屬性瀏覽器 $(‘a[title]‘).css(‘color‘,‘red‘); $(‘a[title=num1]‘).css(‘color‘,‘blue‘); $(‘a[title^=num]‘).css(‘color‘,‘red‘); $(‘a[title$=1]‘).css(‘color‘,‘blue‘); $(‘a[title|=num]‘).css(‘color‘,‘red‘); $(‘a[title!=num5]‘).css(‘color‘,‘blue‘); $(‘a[title~=aaa]‘).css(‘color‘,‘red‘); $(‘a[title*=num]‘).css(‘color‘,‘blue‘); $(‘a[sss][title=num5]‘).css(‘color‘,‘red‘);
jQuery進階選取器和其等價方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
