jquery选择的艺术

jQuery是什么？ 是一款JavaScript数据库，方便地处理HTML、事件、动画等,可以兼容多浏览器，80%以上网站使用

• jQuery下载压缩版本，用于生产 ；下载非压缩版本，用于开发；
• 如何使用？ <script src="jquery-3.1.0.js"></script>
• 如何选择版本？

v1.x
v2.x:不兼容IE6-8
v3.x:分为精简版和普通版

• 使用cdn Content Delivery Network 内容分发网络

jQuery的基本概念

• 结构，表现 和行为分离 （html，js和css）
• $

window.jQuery === window.$

• $.xxx

• $.each(...)
• $.noop
• $.toArray()
• ...

• $(xxx)

$('#myDiv')
$('.myClass')
... 
$(domObject) ->jQuery Object
$(xxx).get(0) ->DOM Object
$(xxx)[0] -> DOM Object

链式语法chaining

$('#divTest') .text('Hello,  world!')   $('#divTest')
$('#divTest').removeClass('blue')         .text('Hello,  world!')                    
$('#divTest').addClass('bold')            .removeClass('blue')                    
$('#divTest').css('color', 'red')         .addClass('bold')
                                          .css('color', 'red')                                 

$(document).ready(function(){…})
• vs window onload

JavaScript中如何选择元素？
• document.getElementById()
• document.getElementsByName()
• document.getElementsByTagName()
• document.getElementsByClassName()

JavaScript中如何选择元素？
• document.querySelector()
• document.querySelectorAll()

E: 元素选择器，是很常见的选择器，E代表文档元素，比如div，p等等
E[attr] 只使用属性名，但没有确定任何属性值，就是只要有这个属性就ok
E[attr="value"] 指定了属性名，并指定了该属性的属性值，必须有这个属性，并且属性 值为value才行
E[attr*="value"] 属性值包含value就行
E[attr^="value"] 选定了属性以value开头的所有元素，比如把attr写成href，value写成 http://
E[attr$="value"]选定了属性以value结尾的所有元素，比如要选择所有png格式的图片，attr写成src，value写成png就行
E[attr~="value"] 如果属性值包含很多词，并且以空格隔开的话，可以用这种来选择，比如元素的title属性值为hello world，要选中它，就在这里把value写成hello或者world就行，用得比较少
E[attr|="value"] 选择了属性值是value或者以“value-”开头的值，比如attr写成lang，value写成zh，就包含了zh，zh-cn等等语言的元素，用得比较少

:link 选择所有未被访问的链接。
:visited 选择所有已被访问的链接。
:hover 选择鼠标指针位于其上的链接。
:active 选择活动链接。
:focus 选择获得焦点的 input 元素。
:enabled 选择每个启用的 <input> 元素。
:disabled 选择每个禁用的 <input> 元素。
:checked 选择每个被选中的 <input> 元素。
:first-child 选择某个元素的第一个子元素
:last-child 选择某个元素的最后一个子元素
:nth-child() 选择某个元素的一个或多个特定的子元素, 括号里可以写整数值，比如1，2，也可以写表达式，注意这里的元素是从1开始，并不是从0开始
:nth-last-child() 选择某个元素的一个或多个特定的子元素，括号里面的写法和nth-child一样，不过是从这个元素的最后一个子元素开始算起
:nth-of-type() 类似于:nth-child，不同的是他多了个type，也就是只在符合type的子元素中进行计算
:nth-last-of-type() 和nth-last-child()类似，也是从最后一个子元素开始算起
:first-of-type 选择一个上级元素下的第一个同类子元素
:last-of-type 选择一个上级元素的最后一个同类子元素
:empty 选择的元素里面没有任何内容,这里没有内容指的是一点内容都没有，哪怕 是一个空格也都没有
:not() 否定选择器，not后面跟着一个选择器，表示选择和括号里的选择刚好相反
::first-line 用于选取指定选择器的首行
::first-letter 用于选取指定选择器的首字母
::before 在被选元素的内容前面插入内容。
::after 在被选元素的内容后面插入内容。
::selection 应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）

jQuery选择器简介

• 兼容CSS3选择器标准

• 对选择器语法有更多扩充

• 返回0、1或多个jQuery元素的集合

• 集合内元素顺序和在页面上顺序一致

jQuery中的基本选择器

^	$("input[name^='news']")	选择所有的 name 属性以'news'开头的 input 元素

*	$("*")	所有元素

• ID选择器

#id	$("#lastname")	id="lastname" 的元素

• 类选择器

.class	$(".intro")	所有 class="intro" 的元素

.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

• 元素选择器

• 后代选择器

parent > child	$("div > span")	选取 <div> 元素的直接子元素的 <span> 元素

• 属性选择器

[attribute]	$("[href]")	所有带有 href 属性的元素

[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素

[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素

[attribute$=value]	$("[href$='.jpg']")	所有带有 href 属性的元素

[attribute][attribute]	$("input[id][name$='man']")	可以使用多个属性进行联合选择，该选择器是得到所有的含有 id 属性并且那么属性以 man 结尾的元素

jQuery中的筛选器/过滤器

• 位置筛选器

• 子元素筛选器

• 表单筛选器

• 内容筛选器

• 其他筛选器

• 自定义选择器

---

1.位置筛选器

:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个<p>元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(n)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(n)	$("ul li:lt(3)")	列出 index 小于 3 的元素

2.子元素筛选器

:first-child	$("div span:first-child")	返回所有的 div 元素的第一个子节点的数组
:last-child	$("div span:last-child")	返回所有的 div 元素的最后一个节点的数组
:first-of-type	$("p:first-of-type")	选取属于其父元素的第一个 <p> 元素的每个 <p> 元素
:last-of-type	$("p:last-of-type")	选取属于其父元素的最后一个 <p> 元素的每个 <p> 元素
:nth-child()	$("p:nth-child(3)")	选取属于其父元素的第三个子元素的每个 <p> 元素
:nth-last-child()	$("p:nth-last-child(3)")	选取属于其父元素的第三个子元素的 <p> 元素，从最后一个子元素开始计数
:nth-of-type()	$("p:nth-of-type(3)")	选取属于其父元素的第三个 <p> 元素的每个 <p> 元素
:nth-last-of-type()	$("p:nth-last-of-type(3)")	选取属于其父元素的第三个 <p> 元素的每个 <p> 元素，从最后一个子元素开始计数
:only-child	$("div button:only-child")	返回所有的 div 中只有唯一一个子节点的所有子节点的数组
:only-of-type	$("p:only-of-type")	$("p:only-of-type")

3.表单筛选器

:input	$(":input")	所有 <input> 元素
:checked	$(":checked")	所有被选中的 input 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:reset	$(":reset")	所 有 type="reset" 的 <input> 元 素
:disabled	$(":disabled")	所有禁用的 input 元素
:checkbox	$(":checkbox")	所 有 type="checkbox" 的 <input> 元 素
:selected	$(":selected")	所有被选取的 input 元素
:enabled	$(":enabled")	所有激活的 input 元素
:file	$(":file")	所 有 type="file" 的 <input> 元 素
:submit	$(":submit")	所 有 type="submit" 的 <input> 元 素
:focus	$(":focus")	选取当前具有焦点的元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:text	$(":text")	所 有 type="text" 的 <input> 元 素
:password	$(":password")	所 有 type="password" 的 <input> 元 素
:radio	$(":radio")	所 有 type="radio" 的 <input> 元 素

4.内容筛选器

:empty	$(":empty")	无子（元素）节点的所有元素
:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:has(selector)	$("p:has(span)")	$("p:has(span)")
:parent	$("td:parent")	选取所有带有子元素且包含文本的 <td> 元素

5.其他筛选器

:lang(language)	$("p:lang(it)")	选取所有 lang 属性为 "it" 的 <p> 元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素
:root		:root 选择器选取文档的根元素。
:target		:target 选择器可用于选取当前活动的目标元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格
:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素

jQuery选择器的性能优化
• 尽量使用CSS中有的选择器
• 避免过度约束
• 尽量以ID开头
• 让选择器的右边有更多特征
• 避免使用全局选择器
• 缓存选择器结果