JQuery学习笔记（三）——选择器2

来源：互联网发布：vivo y67支持4g网络编辑：程序博客网时间：2024/05/08 10:22

4.属性过滤

1)[attribute] 选取拥有此属性的元素
2)[attribute=value]选取指定属性的值为value的元素
3)[attribute!=value]选取指定属性的值不等于value的元素和没有该属性的元素
4)[attribute^=value]选取指定属性的值以value开始的元素
5)[attribute$=value]选取指定属性的值以value结束的元素

6)[attribute*=value]选取指定属性的值含有value的元素

7)[selector1][selector2]复合属性选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="css/style.css"><style type="text/css">div, span, p {    width: 140px;    height: 140px;    margin: 5px;    background: #aaa;    border: #000 1px solid;    float: left;    font-size: 17px;    font-family: Verdana;}div.mini {    width: 55px;    height: 55px;    background-color: #aaa;    font-size: 12px;}div.hide {    display: none;}</style><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("div[title]").css("background","#FF00AA");});$("#btn2").click(function(){$("div[title='test']").css("background","#FF00AA");});$("#btn3").click(function(){$("div[title!='test']").css("background","#FF00AA");});$("#btn4").click(function(){$("div[title^='te']").css("background","#FF00AA");});$("#btn5").click(function(){$("div[title]$='est'").css("background","#FF00AA");});$("#btn6").click(function(){$("div[title*='es']").css("background","#FF00AA");});$("#btn7").click(function(){$("div[id][title*='es']").css("background","#FF00AA");});$("#btn8").click(function(){$("div[title][title!='test']").css("background","#FF00AA");});})</script></head><body><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'的 div 元素." id="btn7"/><input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8"/><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" value="123456789" size="8"></div><div id="mover">正在执行动画的div元素.</div></body></html>

5.子元素过滤
1):nth-child(index/even/odd/equation)
选取每个父元素下的index个元素获取奇偶元素(index从1起)
*:nth-child(3n)选取3的倍数
2):first-child选取每个父元素的第一个子元素
3):last-child 选取每个父元素的最后一个字元素
4):only-child 如果某个元素是它父元素中唯一的子元素，那么将被匹配

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="css/style.css"><style type="text/css">div, span, p {    width: 140px;    height: 140px;    margin: 5px;    background: #aaa;    border: #000 1px solid;    float: left;    font-size: 17px;    font-family: Verdana;}div.mini {    width: 55px;    height: 55px;    background-color: #aaa;    font-size: 12px;}div.hide {    display: none;}</style><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(document).ready(function(){$("#btn1").click(function(){$("div.one :nth-child(2)").css("background","#F22222");});$("#btn2").click(function(){$("div.one :first-child").css("background","#F22222");});$("#btn3").click(function(){$("div.one :last-child").css("background","#F22222");});$("#btn4").click(function(){$("div.one :only-child").css("background","#F22222");});});</script></head><body><input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/><input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/><input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/><input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/><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" value="123456789" size="8"></div><div id="mover">正在执行动画的div元素.</div></body></html>

6.表单对象属性过滤选择器
1):enabled 选取所有可用元素
2):disabled 选取所有不可用元素
3):checked 选取所有被选中的元素(单选框，复选框)
4):selected 选取所有被选中选项元素(下拉列表)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$(":text:enabled").val("可用赋值");});$("#btn2").click(function(){$(":text:disabled").val("不可用赋值");});$("#btn3").click(function(){alert($(":checkbox[name='newsletter']:checked").length);});$("#btn4").click(function(){$(":checkbox[name='newsletter']:checked").each(function(){alert(this.value);});});$("#btn5").click(function(){$("select :selected").each(function(){alert(this.value);});});})</script></head><body><h3>表单对象属性过滤选择器</h3> <button id="btn1">对表单内 可用input 赋值操作.</button>   <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br /> <button id="btn3">获取多选框选中的个数.</button> <button id="btn4">获取多选框选中的内容.</button><br /><br />         <button id="btn5">获取下拉框选中的内容.</button><br /><br /> <form id="form1" action="#">可用元素: <input name="add" value="可用文本框1"/><br>不可用元素: <input name="email" disabled="true" value="不可用文本框"/><br>可用元素: <input name="che" value="可用文本框2"/><br>不可用元素: <input name="name" disabled="true" value="不可用文本框"/><br><br>多选框: <br><input type="checkbox" name="newsletter" checked="checked" value="test1" />test1<input type="checkbox" name="newsletter" value="test2" />test2<input type="checkbox" name="newsletter" value="test3" />test3<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4<input type="checkbox" name="newsletter" value="test5" />test5<br><br>下拉列表1: <br><select name="test" multiple="multiple" style="height: 100px"><option>浙江</option><option selected="selected">辽宁</option><option>北京</option><option selected="selected">天津</option><option>广州</option><option>湖北</option></select><br><br>下拉列表2: <br><select name="test2"><option>浙江</option><option>辽宁</option><option selected="selected">北京</option><option>天津</option><option>广州</option><option>湖北</option></select><textarea rows="" cols=""></textarea></form></body></html>

选择器练习

1. 点击所有的 p 节点, 能够弹出其对应的文本内容

2. 使第一个 table 隔行变色

3.点击 button, 弹出 checkbox 被选中的个数

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){//1. 点击所有的 p 节点, 能够弹出其对应的文本内容$("p").click(function(){// 隐式迭代alert(this.firstChild.nodeValue);//alert($(this).text());});//2. 使第一个 table 隔行变色$("table:first tr:even").css("background","#FF22BB");//3. 点击 button, 弹出 checkbox 被选中的个数$("button").click(function(){//alert($(":checked[name='test']").length);alert($(":checkbox:checked").length);});});</script></head><body><p>段落1</p><p>段落2</p><p>段落3</p><table><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr></table><br><hr><br><table><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr></table><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><button>您选中的个数</button></body></html>

0 0