jQuery选择器解释和说明

ゝ一纸荒年。 2023-08-17 17:19 121阅读 0赞

jQuery选择器的意义在于快速的找出特定的DOM元素，然后添加相应的行为。

<table style="border-width:0px;border-color:#272ad8;"> 
 <tbody> 
 <tr> 
 <td>基本选择器</td> 
 <td> 
 <div> 
 <pre> //选择 id为 one 的元素
 $('#btn1').click(function(){
 $('#one').css("background","#bfa");
 });
 //选择 class 为 mini 的所有元素
 $('#btn2').click(function(){
 $('.mini').css("background","#bfa");
 });
 //选择 元素名是 div 的所有元素
 $('#btn3').click(function(){
 $('div').css("background","#bfa");
 });
 //选择 所有的元素
 $('#btn4').click(function(){
 $('*').css("background","#bfa");
 });
 //选择 所有的span元素和id为two的div元素
 $('#btn5').click(function(){
 $('span,#two').css("background","#bfa");
 }); 
 </pre> 
 </div> &nbsp; </td> 
 </tr> 
 <tr> 
 <td>层次选择器</td> 
 <td> 
 <div> 
 <pre>//选取所有后代元素
$("ancestor descendant")
//选取父元素下的子元素(注意和第一个的区别)
$("parent&gt;child")
//选取紧跟在prev后面的next元素
$("prev+next")
/*选取prev元素之后的所有siblings元素,
可以用next方法来替代
eg:$(".one+div");等价于$(".one").next("div");
 */
$("prev~siblings")
/*(注意和siblings()方法的区别，
siblings()和前后位置无关，匹配所有同辈节点)
可以用nextAll()方法来替代*/</pre> 
 </div> &nbsp; <pre>&nbsp;</pre> </td> 
 </tr> 
 <tr> 
 <td>&nbsp;过滤选择器</td> 
 <td>&nbsp;1基本过滤选择器 
 <div> 
 <pre> $('#btn1').click(function(){
 $('div:first').css("background","#bfa");
 })
 //选择最后一个div元素.
 $('#btn2').click(function(){
 $('div:last').css("background","#bfa");
 })
 //选择class不为one的 所有div元素.
 $('#btn3').click(function(){
 $('div:not(.one)').css("background","#bfa");
 })
 //选择 索引值为偶数 的div元素。
 $('#btn4').click(function(){
 $('div:even').css("background","#bfa");
 })
 //选择 索引值为奇数 的div元素。
 $('#btn5').click(function(){
 $('div:odd').css("background","#bfa");
 })
 //选择 索引等于 3 的元素
 $('#btn6').click(function(){
 $('div:eq(3)').css("background","#bfa");
 })
 //选择 索引大于 3 的元素
 $('#btn7').click(function(){
 $('div:gt(3)').css("background","#bfa");
 })
 //选择 索引小于 3 的元素
 $('#btn8').click(function(){
 $('div:lt(3)').css("background","#bfa");
 })
 //选择 所有的标题元素.比如h1, h2, h3等等...
 $('#btn9').click(function(){
 $(':header').css("background","#bfa");
 })
 //选择 当前正在执行动画的所有元素.
 $('#btn10').click(function(){
 $(':animated').css("background","#bfa");
 });
 //选择 当前获取焦点的所有元素.
 $('#btn11').click(function(){
 $(':focus').css("background","#bfa");
 }); </pre> 
 </div> &nbsp;2内容过滤选择器 
 <div> 
 <pre> //选取含有文本"di"的div元素.
 $('#btn1').click(function(){
 $('div:contains(di)').css("background","#bbffaa");
 })
 //选取不包含子元素(或者文本元素)的div空元素.
 $('#btn2').click(function(){
 $('div:empty').css("background","#bbffaa");
 })
 //选取含有class为mini元素 的div元素.
 $('#btn3').click(function(){
 $("div:has('.mini')").css("background","#bbffaa");
 })
 //选取含有子元素(或者文本元素)的div元素.
 $('#btn4').click(function(){
 $('div:parent').css("background","#bbffaa");
 }) </pre> 
 </div> 3可见性过滤选择器 &nbsp; 
 <div> 
 <pre> //给id为mover的元素添加动画.
 function animateIt() {
 $("#mover").slideToggle("slow", animateIt);
 }
 animateIt();
 
 //选取所有不可见的元素.包括&lt;input type="hidden"/&gt;.
 $('#btn_hidden').click(function(){
 alert( "不可见的元素有："+$('body :hidden').length +"个!\n"+
 "其中不可见的div元素有:"+$('div:hidden').length+"个!\n"+
 "其中文本隐藏域有:"+$('input:hidden').length+"个!");
 $('div:hidden').show(3000).css("background","#bbffaa");
 })
 //选取所有可见的元素.
 $('#btn_visible').click(function(){
 $('div:visible').css("background","#FF6500");
 })</pre> 
 </div> &nbsp; 4属性过滤选择器 &nbsp; 
 <div> 
 <pre>//选取 属性title值 以 en 开始 的div元素.
 $('#btn1').click(function(){
 $('div[title^="en"]').css("background","#bbffaa");
 })
 //选取 属性title值 含有 en 的div元素.
 $('#btn2').click(function(){
 $('div[title*="en"]').css("background","#bbffaa");
 })
 //选取 属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素
 $('#btn3').click(function(){
 $('div[title|="en"]').css("background","#bbffaa");
 })
 //选取 属性title用空格分隔的值中包含字符uk的元素.
 $('#btn4').click(function(){
 $('div[title~="uk"]').css("background","#bbffaa");
 })</pre> 
 </div> &nbsp; 5子元素过滤选择器 &nbsp; 
 <div> 
 <pre>//选取每个父元素下的第2个子元素
 $('#btn1').click(function(){
 $('div.one :nth-child(2)').css("background","#bbffaa");
 })
 //选取每个父元素下的第一个子元素
 $('#btn2').click(function(){
 $('div.one :first-child').css("background","#bbffaa");
 })
 //选取每个父元素下的最后一个子元素
 $('#btn3').click(function(){
 $('div.one :last-child').css("background","#bbffaa");
 })
 //如果父元素下的仅仅只有一个子元素，那么选中这个子元素
 $('#btn4').click(function(){
 $('div.one :only-child').css("background","#bbffaa");
 })</pre> 
 </div> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/s-z-y/p/4323785.html