<table><colgroup><col /><col /></colgroup><tbody><tr class="firstRow"><td>选择器</td><td>描述</td></tr><tr><td>$(":input")</td><td>选择所有的input、textarea、select和button元素</td></tr><tr><td>$(":text")</td><td>匹配所有文本框</td></tr><tr><td>$(":password")</td><td>匹配所有密码框</td></tr><tr><td>$(":radio")</td><td>匹配所有单选按钮</td></tr><tr><td>$(":checkbox")</td><td>匹配所有复选框</td></tr><tr><td>$(":submit")</td><td>匹配所有提交按钮</td></tr><tr><td>$(":image")</td><td>匹配所有图像域</td></tr><tr><td>$(":reset")</td><td>匹配所有重置按钮</td></tr><tr><td>$(":button")</td><td>匹配所有按钮</td></tr><tr><td>$(":filter")</td><td>匹配所有文件域</td></tr></tbody></table><p><br /></p>

<table><colgroup><col /><col /></colgroup><tbody><tr class="firstRow"><td>选择器</td><td>描述</td></tr><tr><td>$(":first-child")</td><td>选择所有父元素下的第一个子元素</td></tr><tr><td>$(":last-child")</td><td>选择所有父元素下的最后一个子元素</td></tr><tr><td>$(":only-child")</td><td>如果某个元素是其父元素的唯一一个子元素，那么它会被选中</td></tr><tr><td>$(":nth-child")</td><td>选择他们所有父元素中的第n个子元素</td></tr><tr><td>$(":nth-last-child")</td><td>选择所有他们父元素的第n个子元素，计数从最后一个元素开始到第一个</td></tr><tr><td>:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)</td><td><br /></td></tr><tr><td><br /></td><td>:last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素</td></tr><tr><td><br /></td><td>如果子元素只有一个的话，:first-child与:last-child是同一个</td></tr><tr><td><br /></td><td> :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配</td></tr><tr><td><br /></td><td>jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的</td></tr><tr><td><br /></td><td>nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算</td></tr></tbody></table><p><br /></p>

<table><colgroup><col /><col /></colgroup><tbody><tr class="firstRow"><td>选择器</td><td>描述</td></tr><tr><td>$(":first-child")</td><td>选择所有父元素下的第一个子元素</td></tr><tr><td>$(":last-child")</td><td>选择所有父元素下的最后一个子元素</td></tr><tr><td>$(":only-child")</td><td>如果某个元素是其父元素的唯一一个子元素，那么它会被选中</td></tr><tr><td>$(":nth-child")</td><td>选择他们所有父元素中的第n个子元素</td></tr><tr><td>$(":nth-last-child")</td><td>选择所有他们父元素的第n个子元素，计数从最后一个元素开始到第一个</td></tr></tbody></table><p><br /></p>

<table><colgroup><col /><col /></colgroup><tbody><tr class="firstRow"><td>选择器</td><td>描述</td></tr><tr><td>$("[attribute|='value']")</td><td>选择指定属性值等于给定字符串或以该文字串为前缀（该字符串后跟一个连字符）的元素</td></tr><tr><td>$("[attribute*='value']")</td><td>选择指定属性具有包含一个给定的字符串的元素（选择指定的属性是以包含某些值得元素）</td></tr><tr><td>$("[attribute-='value']")</td><td>选择指定属性用空格分隔的值中包含一个给定的元素</td></tr><tr><td>$("[attribute='value']")</td><td>选择指定属性是给定值的元素</td></tr><tr><td>$("[attribute!='value']")</td><td>选择不存在的指定属性，或者指定的属性值不等于给定值的元素</td></tr><tr><td>$("[attribute^='value']")</td><td>选择指定属性是给定字符串开始的元素</td></tr><tr><td>$("[attribute$='value']")</td><td>选择指定属性是以给定值结尾的元素，这个比较区分大小写</td></tr><tr><td>$('[attribute]')</td><td>选择所有指定属性的元素，该属性可以是任何值</td></tr><tr><td>$("[attributeFilter1][attributeFilter1]")</td><td>选择匹配所有指定筛选器的元素</td></tr></tbody></table><p><br /></p>

<table><colgroup><col /><col /></colgroup><tbody><tr class="firstRow"><td>选择器</td><td>描述</td></tr><tr><td>$(":visible")</td><td>选择所有显示的元素</td></tr><tr><td>$(":hidden")</td><td>选择所有隐藏的元素</td></tr><tr><td>CSS display的值是none。<br />type="hidden"的表单元素。<br />宽度和高度都显式设置为0。<br />一个祖先元素是隐藏的，该元素是不会在页面上显示<br />CSS visibility的值是hidden<br />CSS opacity的指是0</td><td><br /></td></tr></tbody></table><p><br /></p>

<table><colgroup><col /><col /></colgroup><tbody><tr class="firstRow"><td>选择器</td><td>描述</td></tr><tr><td>$(":contains(text)")</td><td>选择所有包含指定文本的元素</td></tr><tr><td>$(":parent")</td><td>选择所有包含子元素或者文本的元素</td></tr><tr><td>$(":empty")</td><td>选择所有没有子元素的元素（包含文本节点）</td></tr><tr><td>$(":has(selector)")</td><td>选择元素中至少包含指定选择器的元素</td></tr><tr><td>:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素<br />如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。<br />:parent与:empty是相反的，两者所涉及的子元素，包括文本节点</td><td><br /></td></tr></tbody></table><p><br /></p>

<table><colgroup><col /><col /></colgroup><tbody><tr class="firstRow"><td>选择器</td><td>描述</td></tr><tr><td>$(":first")</td><td>匹配第一个元素</td></tr><tr><td>$(":last")</td><td>匹配最后一个元素</td></tr><tr><td>$(":not(selector)")</td><td>一个用来过滤的选择器，选择所有的元素去除不匹配的给定的选择器元素</td></tr><tr><td>$(":eq(index)")</td><td>在匹配的集合中选择索引值为index的元素</td></tr><tr><td>$(":gt(index)")</td><td>选择匹配的集合中所有大于给定的索引值index的元素，从指定索引的下一个开始</td></tr><tr><td>$(":even")</td><td>选择索引值为偶数的元素，从0开始计数</td></tr><tr><td>$(":odd")</td><td>选择索引值为奇数的元素，从0开始计数</td></tr><tr><td>$(":lt(index)")</td><td>选择匹配集合中所有元素小于索引值index参数的元素</td></tr><tr><td>$(":header")</td><td>选择所有标题元素，像h1~h6这种</td></tr><tr><td>$(":lang(language)")</td><td>选择指定语言的所有元素</td></tr><tr><td>$(":root")</td><td>选择该文档的根元素</td></tr><tr><td>$(":animated")</td><td>选择正在执行动画效果的元素</td></tr></tbody></table><p><br /></p>

层级选择器以下四种：

$("parent>child") 子选择器，选择所有指定 "parent"元素中指定的 "child"的直接元素；

$("ancestor descendant") 后代选择器，选择给定的祖先元素的所有后代元素，一个元素的后代可能是该元素的一个孩子，孙子，曾孙等；

$("prev+next") 相邻兄弟选择器,选择所有进阶在"prev"元素后面的"next"元素；

$("prev-siblings") 一班兄弟选择器，匹配"prev"元素后面所有兄弟元素，具有相同的父元素，并匹配过滤"siblings"选择器

仔细观察层级选择器之间还是有很多相似与不同点

层级选择器都有一个参考节点

后代选择器包含子选择器的选择的内容

一般兄弟选择器包含相邻兄弟选择的内容

相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下

jQuery选择器中id选择器和class选择器区别在于：id选择器运行效率高，但只能单选，一次使用，没有循环处理，而后者都能做到，但class选择器运行效率低

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script><!--此处调用应该用https-->

</head>

<body>

<div>元素一</div>

<div>元素二</div>

<div>元素三</div>

    

    <script type="text/javascript">

$(document).ready(function(){

    var $div = $('div'); //读取div块的数组，相当于DOM中getElementsByTayName功能

    var div = $div.get(0);//数组中第一个元素

    div.style.color = 'red'; //操作dom对象的属性

});//此处使用ready()函数

    </script>

    

</body>

</html>

3-9 jq的属性与样式之元素的数据存储

jq提供的存储接口

jQuery.data(element,key,value)//静态接口、存数据

jQuery.data(element,key)//静态接口，取数据

.data(key,value)//实例接口，存数据

.data(key)//实例接口，存数据

2个方法在使用上的存取都是一个接口，传递元素，键值数据。在就jQuery的官方文档那个中，建议用.data()方法来代替。

把DOM看做一个对象，艾玛我们往对象上是可以存基本类型，引用类型的数据的，但是这里会存在循环引用的内存泄漏风险。

通过jQuery提供的数据接口处理这个问题，对照data方法使用而不需要关心底层如何实现。

.removeClass( )方法

1. .removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名

2. .removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名

.val()方法

1. .val()无参数，获取匹配的元素集合中第一个元素的当前值

2. .val( value )，设置匹配的元素集合中每个元素的值

3. .val( function ) ，一个用来返回设置值的函数

 注意事项：

1. 通过.val()处理select元素， 当没有选择项被选中，它返回null

2. .val()方法多用来设置表单的字段的值

3. 如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值

 

1. :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

2. :last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素

3. 如果子元素只有一个的话，:first-child与:last-child是同一个

4.  :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配

5. jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的

6. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

我们有几种方式可以隐藏一个元素：

1. CSS display的值是none。

2. type="hidden"的表单元素。

3. 宽度和高度都显式设置为0。

4. 一个祖先元素是隐藏的，该元素是不会在页面上显示

5. CSS visibility的值是hidden

6. CSS opacity的指是0