锋利的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读书笔记---选择器的更多相关文章
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 锋利的jQuery读书笔记---jQuery中操作DOM
一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...
- 锋利的jQuery读书笔记---jQuery中动画
jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> < ...
- 锋利的jQuery读书笔记---jQuery中的事件
jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...
- <锋利的jQuery>读书笔记
- 锋利的jQuery学习笔记之jQuery选择器
在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 t ...
- Javascript & JQuery读书笔记
Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...
随机推荐
- [转载]Spring Bean Configuration Inheritance
转自: http://www.mkyong.com/spring/spring-bean-configuration-inheritance/ In Spring, the inheritance i ...
- MSVC CRT运行库启动代码分析
原文链接:http://www.programlife.net/msvc-crt-startup.html 在程序进入main/WinMain函数之前,需要先进行C运行库的初始化操作,通过在Visua ...
- 欧拉工程第57题：Square root convergents
题目链接 Java程序 package projecteuler51to60; import java.math.BigInteger; import java.util.Iterator; impo ...
- Debug模式应用程序输出Debug调试信息（现成的宏定义，用于格式化打印信息）
// Debug模式,主要输出一些调试的信息. #ifdef UNICODE #define _FILE_ _STR2WSTR(__FILE__) #define _FUNCTION ...
- 手动安装UniDAC的过程
每次安装都不一样,而且有时候挺麻烦的,所以记下来.我这次安装过程是这样的: 0. 修改Source\Delphi7\Make.bat,填入正确的IdeDir 1.找到source\delphi7目录, ...
- NSDate & NSDateFormatter
#import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasep ...
- Windows下Java File对象创建文件夹时的一个"坑"
import java.io.File; import java.io.IOException; public class DirCreate { public static void main(St ...
- Linux批量杀进程
ps -ef |grep 进程名|grep -v grep |awk '{print $2}' |xargs kill -9
- System,Integer,Calendar,Random和容器
System 1)arraycopy int[] a = {1.2.3.4}; int[] b = new int[5]; System.arraycopy(a,1,b,3,2); //把数组a中从下 ...
- Oracle 数据集成的实际解决方案
就针对市场与企业的发展的需求,Oracle公司提供了一个相对统一的关于企业级的实时数据解决方案,即Oracle数据集成的解决方案.以下的文章主要是对其解决方案的具体描述,望你会有所收获. Oracle ...