简介:介绍jQuery常用的过滤选择器
1.基本过滤选择器
1.过滤选择器简介
- 过滤选中的元素中的第一个:$("div:first")
- 过滤选中元素中的最后一个:$("div:last")
- 过滤选中元素中类名不为one的元素:$("div:not(.one)")
- 可以根据选中元素的索引的奇偶数进行过滤:$("div:even") 【偶数】$("div:odd")【奇数】
- 可以指定选中元素的索引进行过滤:$("div:eq(3)")【索引等于3、索引是从0开始计算的】
- 可以指定选中元素大于某个索引进行过滤:$("div:gt(3)") 【索引大于3】$("div:lt(3)")【索引小于3】
- 可以过滤动画的元素、和当前焦点所在的元素$(":focus")【当前焦点所在元素】$(":animated")【动画元素】
- 可以过滤标题所有元素:$(":header")
2.具体例子如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>基本过滤选择器</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- 引入jQuery -->
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="lib/assist.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//选择第一个div元素
$("#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的div元素
$("#btn6").click(function(){
$("div:eq(3)").css("background","#bfa");
});
//选择索引值大于3的div元素
$("#btn7").click(function(){
$("div:gt(3)").css("background","#bfa");
});
//选择索引值小于3的div元素
$("#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");
});
});
</script>
</head>
<body>
<h3>
基本过滤选择器.
</h3>
<button id="reset">
手动重置页面元素
</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br />
<br />
<input type="button" value="选择第一个div元素." id="btn1" />
<input type="button" value="选择最后一个div元素." id="btn2" />
<input type="button" value="选择class不为one的 所有div元素." id="btn3" />
<input type="button" value="选择索引值为偶数 的div元素." id="btn4" />
<input type="button" value="选择索引值为奇数 的div元素." id="btn5" />
<input type="button" value="选择索引值等于3的元素." id="btn6" />
<input type="button" value="选择索引值大于3的元素." id="btn7" />
<input type="button" value="选择索引值小于3的元素." id="btn8" />
<input type="button" value="选择所有的标题元素." id="btn9" />
<input type="button" value="选择当前正在执行动画的所有元素." id="btn10" />
<input type="button" value="选择当前获取焦点的所有元素." id="btn11" />
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">
class为mini
</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">
class为mini,title为other
</div>
<div class="mini" title="test">
class为mini,title为test
</div>
</div>
<div class="one">
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
</div>
</div>
<div class="one">
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini" title="tesst">
class为mini,title为tesst
</div>
</div>
<div style="display: none;" class="none">
style的display为"none"的div
</div>
<div class="hide">
class为"hide"的div
</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
2.属性过滤选择器
1.属性过滤选择器
简介:jQuery:可以根据元素的属性进行过滤
- 含有title属性的div元素:$("div[title]")
- title属性等于test的div元素:$("div[title=test]")
- title属性不等于test的div元素:$("div[title!=test]")(没有title属性的div也将被选中)
- 选取title属性的值以te开始的div元素$("div[title^=te]")
- 选取title属性的值以est结束的div元素$("div[title$=est]")
- 选取title属性的值含有es的div元素:$("div[title*=es]")
组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有“es”的元素$("div[id][title*=es]")
2.属性过滤选择器程序代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>属性选择器</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- 引入jQuery -->
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="lib/assist.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//选取含有 属性title 的div元素.
$("#btn1").click(function(){
$("div[title]").css("background","#bfa");
});
//选取 属性title值等于“test”的div元素.
$("#btn2").click(function(){
$("div[title='test']").css("background","#bfa");
});
//选取 属性title值不等于“test”的div元素(没有属性title的也将被选中).
$("#btn3").click(function(){
$("div[title!='test']").css("background","#bfa");
});
//选取 属性title值 以“te”开始 的div元素." id="btn4
$("#btn4").click(function(){
$("div[title^='te']").css("background","#bfa");
});
//选取 属性title值 以“est”结束 的div元素.
$("#btn5").click(function(){
$("div[title$='est']").css("background","#bfa");
});
//选取 属性title值 含有“es”的div元素.
$("#btn6").click(function(){
$("div[title*=es]").css("background","#bfa");
});
//组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有“es”的元素
$("#btn7").click(function(){
$("div[id][title*=es]").css("background","#bfa");
});
});
</script>
</head>
<body>
<button id="reset">
手动重置页面元素
</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>
<h3>
属性选择器.
</h3>
<input type="button" value="选取含有 属性title 的div元素." id="btn1" />
<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2" />
<input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3" />
<input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4" />
<input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5" />
<input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6" />
<input type="button" value="组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有“es”的元素."
id="btn7" />
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">
class为mini
</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">
class为mini,title为other
</div>
<div class="mini" title="test">
class为mini,title为test
</div>
</div>
<div class="one">
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
</div>
</div>
<div class="one">
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini" title="tesst">
class为mini,title为tesst
</div>
</div>
<div style="display: none;" class="none">
style的display为"none"的div
</div>
<div class="hide">
class为"hide"的div
</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
3.可见性过滤器
1.可见性过滤器
- 查找所有可见的div元素:$("div:visible")
- 查找body内所有隐藏的元素$("body :hidden")
- 查找div隐藏函数的个数$('div:hidden').length
- input type='hidden'且div style='display:none;'都视为隐藏元素
2.程序例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>可见性过滤选择器</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- 引入jQuery -->
<script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#reset").click(function(){
window.location.reload();
});
$("#btn_visible").click(function(){
$("div:visible").css("background","#ffbbaa");
});
$("#btn_hidden").click(function(){
alert("不可见的元素有:"+$('body :hidden').length+"个\n"+
"其中不可见的div元素:"+$('div:hidden').length+"个\n");
$("div:hidden").show(3000).css("background","#bbffaa");
});
});
</script>
</head>
<body>
<h3>
可见性过滤选择器.
</h3>
<button id="reset">
手动重置页面元素
</button><br />
<br />
<input type="button" value="选取所有可见的div元素." id="btn_visible" />
<br />
<input type="button" value="选取所有不可见的元素.包括<input type='hidden'/>和<div style='display:none;'>."
id="btn_hidden" />
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">
class为mini
</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">
class为mini,title为other
</div>
<div class="mini" title="test">
class为mini,title为test
</div>
</div>
<div class="one">
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
</div>
</div>
<div class="one">
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini" title="tesst">
class为mini,title为tesst
</div>
</div>
<div style="display: none;" class="none">
style的display为"none"的div
</div>
<div class="hide">
class为"hide"的div
</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
4.表单选择器和转义字符(\\)
1.表单选择器代码
var $alltext = $("#form1 :text");
var $allpassword = $("#form1 :password");
var $allradio = $("#form1 :radio");
var $allcheckbox = $("#form1 :checkbox");
var $allsubmit = $("#form1 :submit");
var $allimage = $("#form1 :image");
var $allreset = $("#form1 :reset");
var $allbutton = $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
var $allfile = $("#form1 :file");
var $allhidden = $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");