7.20 jQuery1. jQure jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。 2

1. jQure

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。

2. jq 与 dom 对象转换

jq -> dom $obj[0];
dom -> jq $(obj);
二者方法不通用

3. 选择器

1. 层级选择器

prev + next 匹配所有紧接在prev元素后的next元素
prev ~ siblings 匹配prev元素之后的所有siblings元素

2. 基本选择权

：eq(index) 索引选择器 ：even 偶数选择器 ：odd 奇数选择器 ：gt(index) 大于index ：lt(index) 小于index ：header 选中所有h标签 ：not() 除某元素选中其他全部

3. 可见性选择器

    : hidden 隐藏元素(none)
    : visable 可见元素 visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局

4. 属性选择器

    [name]
    [name|="value"] 以该字符串为前缀
    [name*="value"] 包含该字符串
    [name~="value"] 空格分隔的值中包含一个给定值的元素
    [name$="value"] 以给定值结尾的元素。
    [name="value"]  匹配属性相等元素
    [name!="value"] 匹配不包含该属性值的元素
    [name^="value"] 以给定字符串开始的元素
    [name="value"][name2="value2"] 匹配所有指定的属性筛选器的元素

5. 子元素子元素筛选

:first-child 所有父级元素下的第一个子元素
:first-of-type 所有相同的元素名称的第一个兄弟元素
:last-child 所有父级元素下的最后一个子元素
:last-of-type 所有相同的元素名称的最后一个兄弟元素
:nth-child(n) 选择他们所有父元素的第n个子元素索引从1开始或一个方程式( :nth-child(even) :nth-child(2n-1) )
:nth-last-child() 选择他们所有父元素的最后一个个子元素

    <!--规定属于其父元素的第二个 p 元素的每个 p，从最后一个子元素开始计数-->
    p:nth-last-of-type(2)
    {
    background:#ff0000;
    }

:nth-last-of-type() 匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数
:nth-of-type()选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
:only-child选择器匹配属于其父元素的唯一子元素的每个元素
:only-of-type()选择器选取属于其父元素的特定类型的唯一子元素的每个元素

6. 表单选择器

:button
:checkbox
:checked
:disabled
:enabled
:focus
:file
:image
:input
:password
:radio
:reset
:selected
:submit
:text

7. 内容筛选选择器

:contains() 选择所有包含指定文本的元素
:empty() 选择所有没有子元素的元素（包括文本节点）
:has() 选择元素其中至少包含指定选择器匹配的一个种元素
:parent() 选择所有含有子元素或者文本的父级元素

4. 属性

1. `.attr()`

获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性,只设置一次

2. `.prop()`

获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性，用于特性处理

3. `.removeProp() .removeAttr()`

.removeProp()方法用来删除由.prop()方法设置的属性集。

4. `.toggleClass( className )`

为匹配的元素集合中的每个元素上添加或删除一个或多个样式类（class）如果存在（不存在）就删除（添加）一个类

.height()获取或设置每一个匹配元素的高度值

.width()获取或设置每一个匹配元素的宽度值
.innerHeight() 包括padding，但不包括border

.innerWidth()包括padding，但不包括border）
.outerHeight( [includeMargin ])包括padding，border和可选的margin

includeMargin (默认: false)一个布尔值，表明是否在计算时包含元素的margin值。

.outerWidth( [includeMargin ])
.offset()在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档（document）

.position()获取匹配元素中第一个元素的当前坐标，相对于最近的而且被定位过的祖先元素的坐标

.offsetParent()取得离指定元素最近的含有定位信息的祖先元素
.scrollLeft()获取或设置匹配的元素集合中第一个元素的当前水平滚动条（left）的位置。

.scrollTop()获取或设置匹配的元素集合中第一个元素的当前垂直滚动条（top）的位置

5. 操作

1. 插入

.appendTo( target )将匹配的元素插入到目标元素的最后面（内部插入）
.append( content [, content ] ) => $('h2').appendTo($('.container'));在每个匹配元素里面的末尾处插入参数内容（内部）
.prepend( content [, content ] ) => $('.inner').prepend('<p>Test</p>');将参数内容插入到每个匹配元素的前面（内部）
.prependTo( target ) => $('h2').prependTo($('.container')); 将所有元素插入到目标前面（内部）
.html()获取或设置集合中第一个匹配元素的HTML内容
.text()获取或设置匹配元素集合中每个元素的合并文本，包括他们的后代
.after( content [, content ] ) => $('.inner').after('<p>Test</p>');在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
.before( content [, content ] ) => $('.inner').before('<p>Test</p>');根据参数设定，在匹配元素的前面插入内容
.insertAfter(target) => $('<p>Test</p>').insertAfter('.inner');在目标元素后面插入集合中每个匹配的元素(插入的元素作为目标元素的兄弟元素)。
.insertBefore(target)在目标元素前面插入集合中每个匹配的元素(插入的元素作为目标元素的兄弟元素)。

2. 移除

.detach()从DOM中去掉所有匹配的元素
.empty()从DOM中移除集合中匹配元素的所有子节点
.remove()将匹配元素集合从DOM中删除
.unwrap()匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置

3. 替换

.replaceAll() => $('<h2>New heading</h2>').replaceAll('.inner');用集合的匹配元素替换每个目标元素
.replaceWith() => $('div.second').replaceWith('<h2>New heading</h2>');用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

6. 遍历

1. 筛选

`.eq()`索引

`.filter()`表达式

`.first()`
`.last()`获取匹配元素集合中第一个/最后一个元素。


`.has()`筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

`.is()`判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true

`.map()`通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象

`.not()`从匹配的元素集合中移除指定的元素

`.slice( start [, end ] )` 根据指定的下标范围，过滤匹配的元素集合，并生成一个新的 jQuery 对象。

2. 各种遍历

.add()创建一个新的jQuery对象，元素添加到匹配的元素集合中
.contents() 获得匹配元素集合中每个元素的子元素，包括文字和注释节点
.each( function(index, Element) )为每个匹配元素执行的一个函数,Element是dom对象，可以用$(Element)转换
.end() 终止在当前链的最新过滤操作，并返回匹配的元素的以前状态

3. 树遍历

.addBack()添加堆栈中元素集合到当前集合
.children()获得匹配元素集合中每个元素的子元素
.closest()从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素
.find()通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代
.next()得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
.nextAll()获得每个匹配元素集合中所有下面的同辈元素
.nextUntil()通过选择器，DOM节点，或jQuery对象得到每个元素之后的所有兄弟元素，但不包括匹配的元素。
.siblings()获得匹配元素集合中每个元素的兄弟元素
.parent()取得匹配元素集合中每个元素的父元素
.parents()获得集合中每个匹配元素的祖先元素
.parentsUntil() => $("li.item-2").parentsUntil( $("ul.level-1"), ".yes" )找当前元素的所有的前辈元素，直到遇到选择器， DOM 节点或 jQuery 对象匹配的元素为止，但不包括这些元素。
.prev()获取集合中每个匹配元素紧邻的前一个兄弟元素
.prevAll()获得集合中每个匹配元素的所有前面的兄弟元素
.prevUntil()获取每个元素但不包括选择器，DOM节点，或者jQuery对象匹配的元素的所有前面的兄弟元素

7.事件

浏览器事件

.scroll() JavaScript 的 "scroll" 事件绑定一个处理函数，或者触发元素上的该事件
文档加载 .holdReady()暂停或恢复.ready() 事件的执行

.ready()DOM加载完成后执行
事件绑定 .delegate()为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素

.off()移除一个事件处理函数

.on()绑定和委托都可用的方法

父元素.on('click',子元素,function(){})事件委托

.one()绑定一次自动解绑

.trigger()根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
表单事件

.blur()元素失去焦点不支持冒泡

.change()表单元素的值发生变化

.select()元素对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

.focus()元素获得焦点

.submit()用户递交表单
键盘事件

.keydown() 按下键盘

.keypress()按下键盘（指的是按下）

.keyup()松开键盘
鼠标事件

.click() .dblclick()

.contextmenu()

.focusin() .focusout()

.hover()

.mousedown() .mouseenter() .mouseleave() .mousemove() .mouseout() .mouseover() .mouseup()

8. 事件对象

event.type 用于获取事件对象的类型
event.preventDefault()用于阻止默认事件触发
event.preventPropagation()用于阻止冒泡事件
event.targrt获取到触发事件的元素
event.pageX event.pageY获取光标相对于页面的x坐标和y坐标，如果有滚动条，还要加上滚动条的宽度和高度

9. Ajax (Asynchronous Java and XML)

是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助
它扮演的角色相当于通信桥梁，使得浏览器可以发出HTTP请求与接收HTTP响应
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

10. 状态码

200请求成功；

301：永久转移（永久重定向）访问老地址（老域名）永久指向新地址（新域名）这就是301永久转移

302：临时转移（临时重定向）服务器临时转移地址，缓解服务器压力；

304：读取的缓存数据；我们不经常改变的文件比如文件中css，js我们存在缓存中，页面再次刷新请求服务多次，我们不怎么改变的文件走缓存

307：临时重定向

400：请求参数错误；

401：请求权限不够

404：地址不存在；

500：未知服务器错误

503：服务器超负荷请求；比如一个1000人可以访问，多余一千人访问就会出现503

504：服务器请求响应超时

7.20 jQuery