首页 > 代码库 > 锋利的jQuery读书笔记---选择器
锋利的jQuery读书笔记---选择器
前段时间入手了锋利的jQuery(第二版)，想着加强下自己的js能力，可前段时间一只在熟悉Spring和Hibernate。最近抽时间开始读这本书了，随便也做了些记录。
读书的过程是边看边代码测试，所以笔记和代码也就写到一起了。下面是选择器的记录：
<!DOCTYPE html><html><head lang="zh"> <meta charset="UTF-8"> <script type="text/javascript" src="../js/jquery-2.1.3.js"></script> <title></title> <style> 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: 10px; } div.hide { display: none; } </style></head><body><h1>jQuery选择器</h1><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><br/><br/><br/><br/><br/><br/><br/><br/><hr/><div title="en">title为en的div元素</div><div title="en-UK">title为en-UK的div元素</div><div title="english">title为english的div元素</div><div title="en uk">title为en uk的div元素</div><div title="uken">title为uken的div元素</div><br/><br/><br/><br/><br/><br/><br/><br/><hr/><form id="form1" action="#"> 可用元素: <input name="add" value="可用文本框" /> <br/> 不可用元素: <input name="email" disabled="disabled" value="不可用文本框" /> <br/> 可用元素: <input name="che" value="可用文本框" /> <br/> 不可用元素: <input name="name" disabled="disabled" 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></form></body><script type="text/javascript"> /** * 1.基本选择器 * * #id 根据给定的id匹配一个元素 返回单个元素 $("#test")选取id为test的元素 * .class 根据给定的类名匹配元素 返回集合元素 $(".test")选取所有class为test的元素 * element 根据给定的元素名匹配元素 返回集合元素 $("p")选取所有的<p>元素 * * 匹配所有的元素 返回集合元素 $("*")选取所有的元素 * selector1, * selector2, 将每一个选择器匹配的元素 返回集合元素 $("div, span, p.myClass")选取所有<div>, * ......, 合并后一起返回 <span>和拥有class为myClass的<p>标签的一组元素 * selectorN * */ //改变id为one的元素的背景色 //$("#one").css("background", "#bbffaa"); //改变class为mini的所有元素的背景色 //$(".mini").css("background", "#bbffaa"); //改变元素名称是<div>的所有元素的背景色 //$("div").css("background", "#bbffaa"); //改变所有元素的背景色 //$("*").css("background", "#bbffaa"); //改变所有span元素和id为two的元素的背景色 //$("span, #two").css("background", "#bbffaa"); /** * 2.层次选择器 * * $("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素 返回集合元素 $("div span")选取<div>里所有的<span>元素 * $("parent > child") 选取patent元素下的child(子)元素 返回集合元素 $("div > span")选取<div>元素下元素名是<span>的子元素 * $("prev + next") 选取紧接在prev元素后的next元素 返回集合元素 $(".one + div")选取class为one的下一个<div>元素 * $("prev ~ siblings") 选取prev元素之后的所有siblings元素 返回集合元素 $("#two ~ div")选取id为two的元素后面的所有<div>同辈元素 * */ //改变body内所有div的背景色---可以包括多层继承关系 //$("body div").css("background", "#bbffaa"); //改变body内子div元素的背景色----仅包括一层继承关系 //$("body > div").css("background", "#bbffaa"); //改变class为one的下一个div同辈元素的背景色 //$(".one + div").css("background", "#bbffaa"); //改变id为two的元素后面的所有div同辈元素的背景色 //$("#two ~ div").css("background", "#bbffaa"); /** * 总结：在层次选择器中，第1和第2个选择器比较常用，而后面的两个因为在jQuery里可以使用更加简单的方法替代，所以使用几率较小。 * * 1.可以使用next()方法来代替$("prev + next")选择器----即$(".one + div") == $(".one").next("div") * 2.可以使用nextAll()方法来代替$("prev ~ siblings")选择器----即$(".one ~ div") == $(".one").nextAll("div") * * * tips: * siblings()方法与$("prev ~ siblings")选择器的比较： * $("#prev ~ div")选择器只能选择"prev"元素后面的同辈<div>元素 * 而siblings()方法与前后位置无关，只要是同辈节点都能匹配 * */ /** * 3.过滤选择器 * * 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以冒号(:)开头。 * 按照不同的过滤规则，过滤选择器可以分为基本过滤器、内容过滤器、可见性过滤器、属性过滤器、子元素过滤器和表单对象属性过滤器 * */ /** * 3.1.基本过滤器 * :first 选取第一个元素 返回单个元素 $("div:first")选取所有<div>元素中第1个<div>元素 * :last 选取最后一个元素 返回单个元素 $("div:last")选取所有<div>元素中最后一个<div>元素 * :not(selector) 去除所有与给定选择器匹配的元素 返回集合元素 $("input:not(.myClass)")选取class不是myClass的<input>元素 * :even 选取索引是偶数的所有元素，索引从0开始 返回集合元素 $("input:even")选取索引是偶数的<input>元素 * :odd 选取索引是奇数的所有元素，索引从0开始 返回集合元素 $("input:odd")选取索引是奇数的<input>元素 * :eq(index) 选取索引等于index的元素，索引从0开始 返回单个元素 $("input:eq(1)")选取索引等于1的<input>元素 * :gt(index) 选取索引大于index的元素，索引从0开始 返回集合元素 $("input:gq(1)")选取索引大于1的<input>元素(大于1，不包括1) * :lt(index) 选取索引小于index的元素，索引从0开始 返回集合元素 $("input:lq(1)")选取索引小于1的<input>元素(小于1，不包括1) * :header 选取所有的标题元素，例如h1，h2等 返回集合元素 $(":header")选取网页中所有的<h1>,<h2>,<h3>...... * :animated 选取当前正在执行动画的元素 返回集合元素 $("div:animated")选取正在执行动画的<div>元素 * :focus 选取当前获取焦点的元素 返回集合元素 $(":focus")选取当前获取焦点的元素 * */ //改变第1个<div>元素的背景色 //$("div:first").css("background", "#bbffaa"); //改变最后一个<div>元素的背景色 //$("div:last").css("background", "#bbffaa"); //改变class不为one的<div>元素的背景色 //$("div:not(.one)").css("background", "#bbffaa"); //改变索引值为偶数的<div>元素的背景色 //$("div:even").css("background", "#bbffaa"); //改变索引值为奇数的<div>元素的背景色 //$("div:odd").css("background", "#bbffaa"); //改变索引值等于3的<div>元素的背景色 //$("div:eq(3)").css("background", "#bbffaa"); //改变索引值大于3的<div>元素的背景色 //$("div:gt(3)").css("background", "#bbffaa"); //改变索引值小于3的<div>元素的背景色 //$("div:lt(3)").css("background", "#bbffaa"); //改变所有标题元素，例如<h1>,<h2>,<h3>......这些元素的背景色 //$(":header").css("background", "#bbffaa"); //改变当前正在执行动画的元素的背景色 //$(":animated").css("background", "#bbffaa"); //改变当前获取焦点的元素的背景色 //$(":focus").css("background", "#bbffaa"); /** * 3.2.内容过滤器 * * :contains(text) 选取含有文本内容为"text"的元素 返回集合元素 $("div:contains(‘我‘)")选取含有文本"我"的<div>元素 * :empty 选取不包含子元素或文本的空元素 返回集合元素 $("div:empty")选取不包含子元素(包括文本元素)的<div>元素 * :has(selector) 选取含有选择器所匹配的元素的元素 返回集合元素 $("div:has(p)")选取含有<p>元素的<div>元素 * :parent 选取含有子元素或者文本的元素 返回集合元素 $("div:parent")选取拥有子元素(包括文本元素)的<div>元素 * */ //改变含有文本"di"的<div>元素的背景色 //$("div:contains(di)").css("background", "#bbffaa"); //改变不包含子元素(包括文本元素)的<div>空元素的背景色 //$("div:empty").css("background", "#bbffaa"); //改变含有class为mini元素的<div>元素的背景色 //$("div:has(.mini)").css("background", "#bbffaa"); //改变含有子元素(包括文本元素)的<div>元素的背景色 //$("div:parent").css("background", "#bbffaa"); /** * 3.3.可见性过滤选择器 * * :hidden 选取所有不可见的元素 返回集合元素 $(":hidden")选取所有不可见的元素。包括<input type="hidden" />, <div style="display:none;">和<div style="visibility:hidden;">等元素。如果指向选取<input>元素，可以使用$("input:hidden") * :visible 选取所有可见的元素 返回集合元素 $("div:visible")选取所有可见的<div>元素 * */ //改变所有可见的<div>元素的背景色 //$("div:visible").css("background", "#bbffaa"); //显示隐藏的<div>元素 //$("div:hidden").show(3000); /** * 3.4.属性过滤选择器 * * [attribute] 选取拥有此属性的元素 返回集合元素 $("div[id]")选取拥有属性id的<div>元素 * [attribute=value] 选取属性的值为value的元素 返回集合元素 $("div[title=test]")选取属性title为"test"的<div>元素 * [attribute!=value] 选取属性的值不等于value的元素 返回集合元素 $("div[title!=test]")选取属性title不等于"test"的<div>元素(注意：没有属性title的<div>元素也会被选取) * [attribute^=value] 选取属性的值以value开始的元素 返回集合元素 $("div[title^=test]")选取属性title以"test"开始的<div>元素 * [attribute$=value] 选取属性的值以value结束的元素 返回集合元素 $("div[title$=test]")选取属性title以"test"结束的<div>元素 * [attribute*=value] 选取属性的值含有value的元素 返回集合元素 $("div[title*=test]")选取属性title含有"test"的<div>元素 * [attribute|=value] 选取属性等于给定的字符串或以该字符串为前缀的元素 返回集合元素 $("div[title|=‘en‘]")选取属性title等于en或以en为前缀(该字符串后跟一个连字符‘_‘)的<div>元素 * [attribute~=value] 选取属性用空格分隔的值中包含一个给定的值的元素 返回集合元素 $("div[title~=‘uk‘]")选取属性title用空格分隔的值中包含uk的<div>元素 * [attribute1][attribute2] 用属性选择器合并成一个复合属性选择器，满足多个条件。 返回集合元素 $("div[id][title$=‘test‘]")选取拥有属性id，并且属性title以"test"结束的<div>元素 * [attributeN] 每选择一次，缩小一次范围。 * */ //改变含有属性title的<div>的背景色 //$("div[title]").css("background", "#bbffaa"); //改变属性title值等于"test"的<div>元素的背景色 //$("div[title=test]").css("background", "#bbffaa"); //改变属性title值不等于"test"的<div>元素的背景色 //$("div[title!=test]").css("background", "#bbffaa"); //改变属性title值以"te"开始的<div>元素的背景色 //$("div[title^=te]").css("background", "#bbffaa"); //改变属性title值以"est"结束的<div>元素的背景色 //$("div[title$=est]").css("background", "#bbffaa"); //改变属性title值含有"es"的<div>元素的背景色 //$("div[title*=es]").css("background", "#bbffaa"); //改变含有属性id，并且属性title值含有"es"的<div>元素的背景色 //$("div[id][title*=es]").css("background", "#bbffaa"); //改变属性title值以"en"开始的<div>元素的背景色 //$("div[title^=en]").css("background", "#bbffaa"); //改变属性title值包含"en"的<div>元素的背景色 //$("div[title*=en]").css("background", "#bbffaa"); //改变属性title值以"en"结束的<div>元素的背景色 //$("div[title$=en]").css("background", "#bbffaa"); //改变属性title值等于"en"或以"en"为前缀(该字符串后跟一个连字符‘_‘)<div>元素的背景色 //$("div[title|=en]").css("background", "#bbffaa"); //改变属性title用空格分隔的值中包含字符"uk"的<div>元素的背景色 //$("div[title~=uk]").css("background", "#bbffaa"); /** * 3.5.子元素过滤选择器 * * :nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素(index从1算起) 返回集合元素 :eq(index)只匹配一个元素，而:nth-child将为每个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0开始的 * :first-child 选取每个父元素的第1个子元素 返回集合元素 :first只返回单个元素，而:first-child选择符将为每个父元素匹配第1个子元素。例如$("ul li:first-child")选取每个<ul>中第1个<li>元素 * :last-child 选取每个父元素的最后1个子元素 返回集合元素 :last只返回单个元素，而:last-child选择符将为每个父元素匹配最后1个子元素。例如$("ul li:last-child")选取每个<ul>中最后1个<li>元素 * :only-child 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。 返回集合元素 $("ul li:only-child")在<ul>中选取唯一子元素的<li>元素 * 如果父元素中含有其他元素，则不会被匹配。 * * -------------------------------------------------------------------------------------------------------------------------------------------------------- * :nth-child()选择器是很常用的子元素过滤选择器，详细功能如下： * 1.:nth-child(even)能选取每个父元素下的索引值是偶数的元素 * 2.:nth-child(odd)能选取每个父元素下的索引值是奇数的元素 * 3.:nth-child(2)能选取每个父元素下的索引值等于2的元素 * 4.:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素(n从1开始) * 5.:nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素(n从1开始) * */ //改变每个class为one的<div>父元素下的第2个子元素的背景色 //$("div.one :nth-child(2)").css("background", "#bbffaa"); //改变每个class为one的<div>父元素下的第一个子元素的背景色 //$("div.one :first-child").css("background", "#bbffaa"); //改变每个class为one的<div>父元素下的最后一个子元素的背景色 //$("div.one :last-child").css("background", "#bbffaa"); //如果class为one的<div>父元素下只有一个子元素，那么则改变这个子元素的背景色 //$("div.one :only-child").css("background", "#bbffaa"); /** * 3.6.表单对象属性过滤选择器 * * :enabled 选取所有可用的元素 返回集合元素 $("#form1 :enabled")选取id为form1的表单内所有可用的元素 * :disabled 选取所有不可用的元素 返回集合元素 $("#form1 :disabled")选取id为form1的表单内所有不可用的元素 * :checked 选取所有被选中的元素(单选框，复选框) 返回集合元素 $("input:checked")选取所有被选中的<input>元素 * :selected 选取所有被选中的选项元素(下拉列表) 返回集合元素 $("select option :selected")选取所有被选中的选项元素 * * */ //改变表单内可用的<input>元素的值 //$("#form1 input:enabled").val("这里变化了!"); //改变表单内不可用<input>元素的值 //$("#form1 input:disabled").val("这里变化了！"); //获取多选框选中的个数 //$("input :checked").length; //获取下拉选择框选中的内容 //$("select :selected").text(); /** * 表单选择器 * 为了使用户能够更加灵活的操作表单，jQuery中专门加入了表单选择器。利用这个选择器，能及其方便地获取到表单的某个或某类型的元素 * * :input 选取所有的<input>、<textarea>、<select>和<button>元素 返回集合元素 $(":input")选取所有<input>、<textarea>、<select>和<button>元素 * :text 选取所有的单行文本框 返回集合元素 $(":text")选取所有的单行文本框 * :password 选取所有的密码框 返回集合元素 $(":password")选取所有的密码框 * :radio 选取所有的单选框 返回集合元素 $(":radio")选取所有的单选框 * :checkbox 选取所有的多选框 返回集合元素 $(":checkbox")选取所有的多选框 * :submit 选取所有的提交按钮 返回集合元素 $(":submit")选取所有的提交按钮 * :image 选取所有的图像按钮 返回集合元素 $(":image")选取所有的图像按钮 * :reset 选取所有的重置按钮 返回集合元素 $(":reset")选取所有的重置按钮 * :button 选取所有的按钮 返回集合元素 $(":button")选取所有的按钮 * :file 选取所有的上传域 返回集合元素 $(":file")选取所有的上传域 * :hidden 选取所有不可见元素 返回集合元素 $(":hidden")选取所有不可见的元素 * * * */</script></html>
锋利的jQuery读书笔记---选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。