>jQuery

* 是什么：what？

- 是一个JS函数库：write less，do more

- 封装简化DOM操作（CRUD）/Ajax

* 为什么用它：why？

- 强大的选择器：方便快速查找DOM元素

- 隐式遍历（迭代）：一次操作多个元素

- 读写合一：读数据/写数据用的是一个函数

- 事件处理

- 链式调用

- DOM操作（CUD）

- 样式操作

* 如何使用：How？

* 引入jQuery

* 本地引入与CDN远程引入

* 测试版本（未压缩版）与生产版本（压缩版）

* 使用jQuery

* 使用jQuery核心函数：$/jQuery

* 使用jQuery对象：$xxx( 执行$( )得到 )

* jQuery的两把利器

*jQuery函数：$/jQuery

* jQuery向外暴露的就是jQuery函数，可以直接使用

* 当成一般函数使用：$( param )

* param是function：相当于window.onload = function（文档加载完成的监听）

* param是选择器字符串：查找所有匹配的DOM元素，返回包含所有DOM元素的jQuery对象

* param是DOM元素：将DOM元素对象包装为jQuery对象返回$( this )

* param是标签字符串：创建标签DOM元素对象并包装为jQuery对象返回

* 当成对象使用：$.xxx

* each( obj/arr , function( key, value ){ } )

* trim( str )

* jQuery对象

* 包含所有匹配的n个DOM元素的维数组对象

* 执行$( )返回的就是jQuery对象

* 基本行为：

* length/size( )：得到dom元素的个数

* [ index ]：得到指定下标对应的dom元素

* each( function( index , domEle ){ } )：遍历所有dom元素

* index( )：得到当前dom元素在所有兄弟中的下标

>事件的委托（委派/代理）

例：

<ul>

....

</ul>

1）事件的委托

* 将多个子元素的事件监听委托给父辈元素处理

* 监听回调是加在了父辈元素上

* 当操作任何一个子元素时，事件会冒泡到父辈元素

* 父辈元素不会直接处理事件，而是根据event.target得到发生事件的子元素，通过这个子元素调用事件回调函数

2）事件委托的2方：

* 委托方：li（业主）

* 被委托方：ul（中介）

3）使用事件委托的好处

* 添加新的子元素，自动有事件响应处理

* 减少事件监听的数量：n==>1

4）jQuery的事件委托API

* 设置事件委托：$( parentSelector ).delegate( childrenSelector, eventName , callback )

* 移除事件委托：$( parentSelector ).undelegate( eventName )

>jQuery语法

1）CSS模块

- style样式

* css ( styleName )：根据样式名得到对应的值

* css ( styleName , value )：设置一个样式

* css ( { 多个样式对 } )：设置多个样式

- 位置坐标

* offset( )：读/写当前元素坐标（原点是页面左上角）

* position( )：读当前元素坐标（原点是父元素左上角）

* scrollTop( )/scrollLeft( )：读/写元素/页面的滚动条坐标

- 尺寸

* width( )/height( )：width/height

* innerWidth( )/innerHeight( )：width + padding

* outerWidth( false/true )/outerHeight( false/true )：width + padding + border ( + margin )，如果是true，就加上margin。默认是false，不加margin

2）筛选模块

- 过滤

* 在jQuery对象内部的元素中找出部分匹配的元素，并封装成新的jQuery对象返回

* first( )

* last( )

* eq( index )

* filter( selector )：对当前元素提要求

* not( selector )：对当前元素提要求，并取反

* has( selector )：对子孙元素提要求

- 查找

* 查找jQuery对象内部的元素的子孙/兄弟/父母元素，并封装成新的jQuery对象返回

* children( selector )：子元素

* find( selector)：后代元素

* prevAll( selector )：前面的所有兄弟

* siblings( selector )：所有兄弟

* parent( )：父元素

3）文档处理（CUD）模块

- 增加

* append( )/appendTo( )：插入后部

* preppend( )/preppendTo( )：插入前部

* before( )：插到前面

* after( )：插到后面

- 删除

* remove( )：将自己及内部的孩子都删除

* empty( )：掏空（自己还在）

- 更新

* replaceAll( )：生成一个元素替换掉另一个元素

* replaceWith( )：将原有的一个元素替换掉另一个

4）事件模块

- 绑定事件

* eventName( function( ){ } )

* on( "eventName" , function( ){ } )

* 常用：click( ) , mouseenter( )/mouseleave( ) mouseover( )/mouseout( ) , focus( )/blur( ) , hover( function( ){ } , function( ){ } )

- 解绑事件

* off( "eventName" )

- 事件委托

* 理解：将子元素的事件委托给祖先元素

~ 事件监听绑定在父元素上，但是事件发生在子元素

~ 事件会冒泡到父元素

~ 但最终调用事件回调函数的是子元素（通过event.target）

* 好处

~ 新增的元素没有事件监听

~ 减少监听的数量（n==>1）

* 编码

~ delegate( "selector" , "eventName" , function( ){ } ) //回调函数中的this是子元素

~ undelegate( "eventName" )

- 事件坐标

~ event.offsetX/Y：原点是当前元素左上角

~ event.clientX/Y：原点是视窗左上角

~ event.pageX/Y：原点是页面左上角

- 事件相关

* 停止事件冒泡：event.stopPropagation( )

* 阻止事件的默认行为：event.preventDefault( )

>动画

* 淡入淡出：不断改变元素的透明度( opcity )实现

* 滑动：不断改变元素的高度实现

* 显示与隐藏：默认没有动画，添加时间之后的动画是通过改变opacity、height、width来实现

* 动画animate( )：animate( { 结束时的样式 } , time , function( ){ } )

* 结束动画sotp( )

>onload与ready的区别

区别：window.onload 与 $( document ).ready( )

- window.onload

* 包括页面的图片加载完成后才会回调（晚）

* 只能有一个监听回调

- $( document ) . ready( )

* 等同于：$( function( ){ } )

* 页面加载完成后就回调（不包括图片，比较早）

* 可以有多个监听回调

>插件机制

- 扩展jQuery函数对象的方法

$.extent( {

xxx : function( ){ } //this是$

} )

调用方法：$.xxx( )

- 扩展jQuery对象的方法

$.fn.extent( {

xxx : function( ){ } //this是jQuery对象

} )

调用方法：$.obj.xxx( )

JQuery笔记