jquery用户自定义选择器及选择器高级用法实验
2015-05-17 12:19
711 查看
//用户自定义选择器
$(function(){
// Define custom filter by extending $.expr[":"]
$.expr[":"].greenbg = function(element) {
return $(element).css("background-color") === "rgb(0, 128, 0)";
};
var n = $(":greenbg").length;
console.log("There are " + n + " green divs");
});
<div style="width:10; height:10; background-color:green;"></div>
<div style="width:10; height:10; background-color:black;"></div>
<div style="width:10; height:10; background-color:blue;"></div>
------------------------------------------------------------jquery 选择器---------------------------------------------------
/属性选择器
$("[attributeName='string2match']");
$("[attributeName^='str']");//匹配str开头所有元素
$("[attributeName$='str']");//匹配str结尾所有元素
$("[attributeName*='str']");//包含str所有元素
$("[attributeName~='str']");//包含str所有元素(包含空格隔开的，如：xxx
str)
//复式属性选择器
var n = $("form[name$='Office1']form[name^='admin']").length;
//位置选择器
$("li:even") //返回偶数成员值,0也是偶数
li:odd //奇数
li:first //第一个元素
li:last //最后一个
li:eq(3) //返回第四个
li:gt(2)//返回匹配集合索引大于2的所有元素
li:lt(3)//小于3
//过滤选择器
:animated //选择当前正在执行动画所有元素
:header //选择所有标题元素 如：h1,h2,h3
:not //选择与选择器不匹配元素
//过滤表单元素
$(function(){
var n1 = $("input").length;//xuaninput的所有元素
var n2 = $(":input").length;//包含dom
(input,textarea,select,button)所有元素
var n3 = $("form > *").length;//表单内所有元素
var n4 = $(":text").length;//属性为text所有
var n5 = $("input[type='text']").length;//属性为text所有
console.log(n1 + ","+ n2 +","+ n3 + "," + n4 + "," + n5);
});
</script>
<form name="" method="post">
<input type="text" />
<input type="text" />
<input type="text" />
<button>
</form>
<button>
//可见性过滤器
jquery根据元素offsetWidth\offsetHeight属性判断一个元素是否可见
如果这个2个属性都为0，jquery认为该元素是隐藏，
元素样式为display:block,display:none jquery检测这些
$(function(){
var numInv = $(":text:hidden").length; //所有隐藏
var numVis = $(":text:visible").length;//所有可见
console.log(numInv);//1
console.log(numVis);//1
});
<form name="" method="post">
<input type="text" name="text1" style="display:none;"/>
<input type="text" name="text2" style="offsetWidth:0;
offsetHeight:0;"/>
<input type="text" name="text3" style="display:block;/>
</form>
//内容过滤器
:contains()
$(function(){
var jennies = $("p:contains('jenny')").length;
console.log(jennies); // returns 2
});
<p>jenny smith</p>
<p>jennyjones</p>
<p>jim bob</p>
//：has()
$(function(){
var jennies = $("p:contains('jenny')").length;
console.log(jennies); // returns 2
var hasdoemo = $("div:has('p')").attr("id");//在该元素的后代元素
中至少包含一个与指定的选择器匹配的元素
console.log(hasdoemo); //lt
});
<div id="gt">
<p>jenny smith</p>
<p>jennyjones</p>
<p>jim bob</p>
</div>
<div id="lt">
afdfd</div>
//不包含任何内容 :empty()
$(function(){
var nothing = $("p:empty").length;
console.log(nothing); //returns 1
});
div>
<p></p>
<p>something here</p>
</div>
//:parent() 选择具有子元素的元素
$(function(){
console.log($("div:parent").attr("id"));//gt
});
<div id="lt">afdfd</div>
<div id="gt">
<p>jenny smith</p>
<p>jennyjones</p>
<p>jim bob</p>
</div>
////根据关系进行过滤
<script>
$(function(){
console.log( $("div span:first-child") ) // 选择每个父元素第一个
//[span#turkey, span#bear, span#martian]
console.log( $("div span:last-child") ) // 选择每个父元素最后
一个
//[span#hawk, span#horse, span#martian]
console.log( $("div span:only-child") ) // 选择每个父元素只有
唯一
//[span#martian]
console.log( $("div span:nth-child(2)") ) //每个父元素第n个
//[span#chicken, span#rabbit]
console.log( $("div span:nth-child(2n+1)") ) //n=0.....n
//[span#turkey, span#parrot, span#hawk, span#bear, span#fox, span#horse,
span#martian]
console.log( $("div span:nth-child(even)") )
//[span#chicken, span#pigeon, span#rabbit, span#monkey]
});
</script>
</head>
<body>
<div>
<span id="turkey">Turkey</span>
<span id="chicken">Chicken</span>
<span id="parrot">Parrot</span>
<span id="pigeon">Pigeon</span>
<span id="hawk">Hawk</span>
</div>
<div>
<span id="bear">bear</span>
<span id="rabbit">rabbit</span>
<span id="fox">fox</span>
<span id="monkey">monkey</span>
<span id="horse">horse</span>
</div>
<div>
<span id="martian">martian</span>
</div>
$(function(){
// Define custom filter by extending $.expr[":"]
$.expr[":"].greenbg = function(element) {
return $(element).css("background-color") === "rgb(0, 128, 0)";
};
var n = $(":greenbg").length;
console.log("There are " + n + " green divs");
});
<div style="width:10; height:10; background-color:green;"></div>
<div style="width:10; height:10; background-color:black;"></div>
<div style="width:10; height:10; background-color:blue;"></div>
------------------------------------------------------------jquery 选择器---------------------------------------------------
/属性选择器
$("[attributeName='string2match']");
$("[attributeName^='str']");//匹配str开头所有元素
$("[attributeName$='str']");//匹配str结尾所有元素
$("[attributeName*='str']");//包含str所有元素
$("[attributeName~='str']");//包含str所有元素(包含空格隔开的，如：xxx
str)
//复式属性选择器
var n = $("form[name$='Office1']form[name^='admin']").length;
//位置选择器
$("li:even") //返回偶数成员值,0也是偶数
li:odd //奇数
li:first //第一个元素
li:last //最后一个
li:eq(3) //返回第四个
li:gt(2)//返回匹配集合索引大于2的所有元素
li:lt(3)//小于3
//过滤选择器
:animated //选择当前正在执行动画所有元素
:header //选择所有标题元素 如：h1,h2,h3
:not //选择与选择器不匹配元素
//过滤表单元素
$(function(){
var n1 = $("input").length;//xuaninput的所有元素
var n2 = $(":input").length;//包含dom
(input,textarea,select,button)所有元素
var n3 = $("form > *").length;//表单内所有元素
var n4 = $(":text").length;//属性为text所有
var n5 = $("input[type='text']").length;//属性为text所有
console.log(n1 + ","+ n2 +","+ n3 + "," + n4 + "," + n5);
});
</script>
<form name="" method="post">
<input type="text" />
<input type="text" />
<input type="text" />
<button>
</form>
<button>
//可见性过滤器
jquery根据元素offsetWidth\offsetHeight属性判断一个元素是否可见
如果这个2个属性都为0，jquery认为该元素是隐藏，
元素样式为display:block,display:none jquery检测这些
$(function(){
var numInv = $(":text:hidden").length; //所有隐藏
var numVis = $(":text:visible").length;//所有可见
console.log(numInv);//1
console.log(numVis);//1
});
<form name="" method="post">
<input type="text" name="text1" style="display:none;"/>
<input type="text" name="text2" style="offsetWidth:0;
offsetHeight:0;"/>
<input type="text" name="text3" style="display:block;/>
</form>
//内容过滤器
:contains()
$(function(){
var jennies = $("p:contains('jenny')").length;
console.log(jennies); // returns 2
});
<p>jenny smith</p>
<p>jennyjones</p>
<p>jim bob</p>
//：has()
$(function(){
var jennies = $("p:contains('jenny')").length;
console.log(jennies); // returns 2
var hasdoemo = $("div:has('p')").attr("id");//在该元素的后代元素
中至少包含一个与指定的选择器匹配的元素
console.log(hasdoemo); //lt
});
<div id="gt">
<p>jenny smith</p>
<p>jennyjones</p>
<p>jim bob</p>
</div>
<div id="lt">
afdfd</div>
//不包含任何内容 :empty()
$(function(){
var nothing = $("p:empty").length;
console.log(nothing); //returns 1
});
div>
<p></p>
<p>something here</p>
</div>
//:parent() 选择具有子元素的元素
$(function(){
console.log($("div:parent").attr("id"));//gt
});
<div id="lt">afdfd</div>
<div id="gt">
<p>jenny smith</p>
<p>jennyjones</p>
<p>jim bob</p>
</div>
////根据关系进行过滤
<script>
$(function(){
console.log( $("div span:first-child") ) // 选择每个父元素第一个
//[span#turkey, span#bear, span#martian]
console.log( $("div span:last-child") ) // 选择每个父元素最后
一个
//[span#hawk, span#horse, span#martian]
console.log( $("div span:only-child") ) // 选择每个父元素只有
唯一
//[span#martian]
console.log( $("div span:nth-child(2)") ) //每个父元素第n个
//[span#chicken, span#rabbit]
console.log( $("div span:nth-child(2n+1)") ) //n=0.....n
//[span#turkey, span#parrot, span#hawk, span#bear, span#fox, span#horse,
span#martian]
console.log( $("div span:nth-child(even)") )
//[span#chicken, span#pigeon, span#rabbit, span#monkey]
});
</script>
</head>
<body>
<div>
<span id="turkey">Turkey</span>
<span id="chicken">Chicken</span>
<span id="parrot">Parrot</span>
<span id="pigeon">Pigeon</span>
<span id="hawk">Hawk</span>
</div>
<div>
<span id="bear">bear</span>
<span id="rabbit">rabbit</span>
<span id="fox">fox</span>
<span id="monkey">monkey</span>
<span id="horse">horse</span>
</div>
<div>
<span id="martian">martian</span>
</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery ：eq选择器和eq（）方法的用法与比较
- Jquery选择器的各种用法
- jQuery中:not选择器用法实例
- jQuery中:empty选择器用法实例
- MVC中如何使用Jquery的用法小结(高级编程)
- jquery中选择器的用法
- jQuery中:disabled选择器用法实例
- jQuery基本过滤选择器用法示例
- jQuery中element选择器用法实例
- jQuery中:checkbox选择器用法实例
- jQuery选择器的灵活用法
- jQuery 选择器(selector)中的逗号(comma)的用法
- CSS3高级选择器用法
- jQuery过滤选择器用法分析
- jQuery中:animated选择器用法实例
- jQuery中:last选择器用法实例
- jQuery中:focus选择器用法实例
- jQuery中的基本选择器用法学习教程
- jQuery中Find选择器用法示例
- jquery的gt跟lt选择器用法