jQuery选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/w_l_j/article/details/7307967

过滤选择器：

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM元素, 该选择器都以“:” 开头

按照不同的过滤规则, 过滤选择器可以分为基本过滤,内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

<li>

list item 1

</li>

<li>

list item 2

</li>

<li>

list item 3

</li>

<li>

list item 4

</li>

<li>

list item 5

</li>

</ul>

<li>

list item 6

</li>

<li>

list item 7

</li>

<li>

list item 8

</li>

<li>

list item 9

</li>

<li>

list item 10

</li>

</ul>

</div>

$(document).ready(function(){

//过滤器

//var$li=$("li").first();//获取匹配的第一个元素

//alert($li.html());

//获取页面中的第一个li的jQuery对象

var$li=$("li:first");

alert($li.text());

$li=$("#favs>li:first");//获取#favs下面的li 的第一个li的jQueryduix

alert($li.text());

//获取#favs下面 li 的最后的jQuery对象

$li=$("#favs>li:last");

alert($li.text());

});

基本过滤选择器

用户名<input type="text" name="name" class="uName"/><br/>

性别 <input type="text" name="sex" id="sex"/><br/>

</div>

$(document).ready(function(){

//选择tby下面的所有的input(父子关系)元素的jQuery对象

//var$ipts=$("#bty>input");

//$ipts.css("background-color","red");

//把id=sex的这个input的背景颜色采用默认值，就id=sex的这个input的背景颜色采用默认值，其他的都采用红色

//$ipts=$("#bty>input:not(#sex)");

//$ipts.css("background-color","blue");

// var $ipts=$("#bty>input");//获取tby下面的父子关系的所有input

//遍历实现隔一个有一个颜色

/* $ipts.each(function(i,domIpt){

var$ipt=$(domIpt);//转换成jQuery对象

if(i%2){

$ipt.css("background-color","pink");

}else{

$ipt.css("background-color","green");

}

});*/

//匹配所有的索引值为偶数的元素从0开始计算,返回的是偶数，实际上是奇数

// var$iptEven=$("#bty>input:even");

// $iptEven.css("background-color","red");

//匹配所有的索引值为奇数的元素从0开始计算,返回的是奇数，实际上是偶数

// var $iptOdd=$("#bty>input:odd");

// $iptOdd.css("background-color","red");

//把第三行变成黑色

var$thirdIpt=$("#bty>input:eq(2)");

$thirdIpt.css("background-color","black");

//大于2的变色，不包括2

var$gt=$("#bty>input:gt(2)");

$gt.css("background-color","yellow");

//小于2的变色，不包括2

var$lt=$("#bty>input:lt(2)");

$lt.css("background-color","green");

$(":header").css("background-color","mediumturquoise");

});

内容过滤选择器

l 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

<div>John Resig</div>

<div>GeorgeMartin</div>

<div>Malcom JohnSin</div>

<div>

</div>

$(document).ready(function(){

//包含Hohn的jQuery对象

var$divs=$("div:contains('Hohn')");

$divs.css("background-color","red");

//div 为空的

$("div:empty").css("background-color","pink");

//含有p标签的

$("div:has(p)").css("background-color","green");

//这个div只要能成为父亲的div都要把它变成下面这种颜色，排除没有子元素的div

$("div:parent").css("background-color","yellow");

});

可见性过滤选择器：

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

可见选择器 :hidden 不仅包含样式属性display 为none 的元素, 也包含文本隐藏域(<input type=“hidden”>)和visible:hidden 之类的元素

你是傻子

</div>

$(document).ready(function(){

alert($("div:hidden").text());//.text()会匹配所有，这句话就是只要是隐藏的，文本会一次显示出来

alert($("div:visible").text());//显示没有隐藏的文本

});

jQuery属性过滤选择器

<body>

<div align="center" id="tby">我可是爸爸级的div啊

<p>hello</p>

</div>

哥！

</div>

</body>

</html>

<!--

//当窗体加载完毕后触发function()匿名函数

$(document).ready(function(){

//属性过滤选择器原则：通过元素的属性来获取相应的元素

//$("div[attribute名称]")

//获取指定属性名称的jQuery对象

//var$divs=$("div[id]");//包含的是含有id这个属性名称的div的jQuery对象

//alert($divs.size());//2

//获取指定属性名称等于****的jQuery对象

//var$divs=$("div[id='test2']");//返回的是一个集合，一个数组的对象 div中id=test2的div的jQuery对象

//alert($divs.text());

//获取指定属性名称不等于***的它的jQuery对象

//var$divs=$("div[id!='test2']");

//alert($divs.size());

//获取指定属性名称以指定***开头的jQuery对象

//var$divs=$("div[id^='t']");

//alert($divs.size());

//获取指定属性名称以指定***结尾的jQuery对象

//var$divs=$("div[id$='t']");

//alert($divs.size());

//获取指定属性名称中包含****的jQuery对象

//var$divs=$("div[id*='y']");

//alert($divs.size());

//属性名称同时满足所有条件[selector1][selector2][selector3]的jQuery对象

var$divs=$("div[id*='t'][align='center']");

alert($divs.text());//满足以上条件的div的文本还有它子孙的文本都会显示出来哟

});

//-->

</script>

前提：引入js文件

选择器（二）