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开头
• 让选择器的右边有更多特征
• 避免使用全局选择器
• 缓存选择器结果
