一、引入
① 官网 http://jquery.com/download/ 下载 jquery（开发版/生产版）；
② cdn（百度cdn：http://cdn.code.baidu.com/）引入：
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>；
二、开始
1、页面加载
① 页面结构加载完成后执行script
$(document).ready(function(){
……
});
简写：
$(function(){
……
});
② 所有内容加载后执行
$(window).load(function(){
...
})
等同于
window.onload = function(){
……
}
2、jq对象与DOM对象
① jq转DOM
var $cr = $('#cr');
var cr = $cr[0]; 或 var cr = $cr.get(0);
② DOM转jq
var cr = document.getElementById('cr');
var $cr = $(cr);
3、jquery 与其他库的冲突
① jq 在其他库之后导入
jQuery.noconflict();
之后 $ 以 jQuery 代替，$ 解除占用。
|
jQuery(function($){ 内部继续使用 $ ; }) |
采用传参的形式将实参jQuery 传递给 形参$ (function($){ 内部继续使用 $ ; })(jQuery) |
或 自定义备用名
var jq = jQuery.noconflict();
② jq 在其他库之前导入
不需使用 noconflict() 函数，直接使用 jQuery(fucntion(){ }) 即可。
三、选择器
1、基本选择器
#id、.class、tagname、*
通过‘，’连接的复合选择器
2、层次选择器
(空格) —— 后代
> —— 子元素
+ —— 紧邻的 next 元素；等价于.next() 方法
~ —— 本身之后的所有 同级 元素；等价于.nextAll() 方法
3、过滤选择器（以：开头）
① 基本过滤
:first、:last、
:even、:odd
:lt(index)、:eq(index)、:gt(index)
:not(selector) 从集合中去除掉
特殊：:header 标题元素（h1h2h3h4h5h6）、:animated 正在执行动画的元素、:focus 当前获取焦点的元素
② 内容过滤
:contains(text) 和 :has(selector) —— 前者指 包含文本内容；后者指 包含选择器匹配的元素
:empty 不包含 子元素 或 文本 的空元素
:parent 包含 子元素 或 文本 的元素
③ 可见性过滤
:hidden、:visible
④ 属性过滤（没有：）
[attr] —— 拥有attr属性的元素
| [attr=val] | [attr!=val] | [attr^=val] | [attr$=val] | [attr*=val] | [attr|=val] | [attr~=val] |
| = | ！= | ^= | $= | *= | |= | ~= |
| 等于 | 不等于 | 以 开头 | 以 结尾 | 包含 | 等于 或 包含val且以 - 后缀连接 | 包含空格分割的val |
[]可连写，增加过滤条件，缩小过滤范围
⑤ 子元素过滤
:first-child、:last-child、:only-child
:nth-child(index/ even/ odd/ equation) index从1开始
⑥ 表单元素属性过滤
:enable、:disable、:checked（单、复选框）、:selected（下拉列表）
4、表单选择器
:input 所有<input>、<textarea>、<select>和<button>元素（注意：不加冒号 只选择 input 元素）
:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file
四、DOM操作
1、创建节点
$( ) 工厂函数 —— （）内引号包裹完整 html，创建完整的元素节点/属性节点/文本节点
2、插入节点
① 元素内部 追加内容
append( ) 和 appendTo( ) 后添加
prepend( ) 和 prependTo( ) 前添加
② 元素外部 插入内容
after( ) 和 insertAfter( ) 后添加
before( ) 和 insertBefore( ) 前添加
3、删除节点
remove( 可带选择器 ) —— 该节点 及 后代节点
—— 返回删除的节点引用，绑定的事件、附加数据将消失
detach( 可待选择器 ) —— 同上
—— 返回删除的节点引用，保留绑定的事件、附加数据
empty( ) —— —— —— 清空节点内容及子节点，该节点保留
4、克隆节点、替换节点、包裹节点
clone( 可选内容 “true” ) —— （）为空，只复制节点内容
—— 带 true 参数，复制元素中绑定的事件
replaceWith( ) 和 replaceAll( ) —— 绑定事件将消失
wrap( 标签 ) —— 逐个包裹
wrapAll( 标签 ) —— 整体包裹
wrapInner( 标签 ) —— 包裹节点内部内容
unwrap( ) —— 删除父级包裹
5、属性操作、类操作、内容操作
① 获取和设置、删除
attr( )、html( )、text( )、height( )、width( )、val( )、css( )等
—— 不带参数 或 只带属性名称，获取
—— 带 属性名称 和 属性值，设置
removeAttr( 属性名 ) —— 删除属性
prop( ) —— 当属性值只有 true 或 false 时使用
② 类操作、内容操作
class 操作 —— addClass( )、removeClass( )、toggleClass( )
内容操作 —— html( )、text( )、val( )
③ css 操作
css( "height‘’) 与 height( ) —— 前者返回与 样式设置 有关；后者返回真实高度，width同理
offset( ).left / top
position( ).left / top —— 只对position设置了 relative 或 absolute 的元素有效
scrollTop( ) 和 scrollLeft( )
6、遍历节点
children( ) —— 子元素
parent( ) / parents( ) —— 前者返回一个父级节点；后者返回祖先元素集合
prev( ) / next( ) / siblings( )—— （前 / 后面）紧邻的同辈元素
closet( ) —— 返回最先匹配的祖先元素
五、事件
1、事件绑定 / 解绑
① bind（类型，（可选数据对象），处理函数）
—— 事件类型：blur focus load resize scroll unload click dbclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup 和 error 等，或自定义名称
—— 可以多次调用
—— 可一次绑定多个事件类型
—— 事件类型后添加 .命名空间；触发事件后加！，匹配所有不包含在命名空间里的该类型方法
对于只需要触发一次即立即解绑的情况，使用 one( )
② unbind（类型，指定的处理函数）
2、事件冒泡
事件按照DOM的层次结构向上触发
① 停止事件冒泡
event.stopPropagation( )
② 阻止默认行为
event.preventDefault( )
同时停止冒泡和默认行为
return false
3、事件对象的属性
① event.type 获取事件类型
② event.preverntDefault( ) 阻止默认行为
③ event.stopPropagation( ) 阻止冒泡
④ event.target 获取触发事件的元素
⑤ evetn.relatedTarget 相关元素
⑥ event.pageX 和 pageY 获取光标相对于页面的坐标
⑦ event.which 获取鼠标按键 1 左键 2 中键 3 右键
⑧ event.metaKey 获取<ctrl>
4、模拟操作
trigger（类型，传递给事件处理函数的附加数据）
triggerHandler( ) 只触发绑定事件，不触发浏览器默认事件
六、动画
1、常用方法
| hide( ) 和show( ) | 高度、宽度、透明度变化 |
| toggle( ) | |
| fadeIn( ) 和 fadeOut( ) | 透明度变化至消失/显示 |
| fadeToggle( ) | |
| slideUp( ) 和 slideDown( ) | 高度变化 |
| slideToggle( ) | |
| fadeTo( ) | 透明度变化至指定值 |
| animate( ) |
2、animate( )
①animate("属性：值"，速度，动画完成执行函数)
—— 一个animate( ) 中应用多个属性，同时进行；
链式连写方法，按照顺序执行
② stop( 清除队列？，跳至结尾？)
—— 两个参数均包括 true 和 false 两个值；
—— 清除队列 停止正在进行的动画，进行下一个；
—— 跳至结尾 正在进行 的动画直接到达末状态
③ is(":animated") 判断元素是否正在执行动画
④ delay( 时间 ) 设置动画延迟时间
七、jquery中的Ajax
1、load( ) 和 $get( )、$post( )
① load( url，[发送至服务器的数据]，[回调函数])
—— url 指定获取文档名称，并可添加筛选
—— 没有第二个参数，默认get方式；若传参，则转换为post方式
—— 回调函数 callback（返回内容，请求状态，XMLHttpRequest对象）
—— 请求状态：success、error、notmodified，timeout 4种。无论Ajax请求是否成功，请求完成后都会执行回调函数
② get(url，发送的数据，回调函数，返回内容类型)、post(url，发送的数据，回调函数，返回内容类型)
—— 回调函数会在返回状态为 success 时触发
—— callback（返回内容，请求状态）
—— 返回类型：xml、html、script、json、text 和 default
| get方法 | post方法 | |
| 数据发送 | 数据附在url后传递 | 作为http消息的实体内容传递 |
| 数据大小 | 通常不大于2k | 几乎无限制 |
| 数据存储 | 浏览器会缓存请求数据 |
2、$.getScript( ) 和 $.getJson( )
获取 js 或 Json 文件，都可带回调函数callback( )
3、$.ajax( )
$.ajax(
url,
type: //get 或 post,
timeout: //超时时间（毫秒）,
data: //键值对对象 或 字符串,
dataType: //返回类型,
beforeSend: function(XMLHttpRequest) //发送请求前修改XMLHttpRequest 对象的函数 ,
complete: function(XMLHttpRequest,描述成功请求类型的字符串) //请求完成（无论成功或失败）后调用的回调函数,
success: function(返回数据，成功状态),
error: functon(XMLHttpRequest,错误状态，捕获的错误对象) //请求失败后的回调函数
global: true 或 false //默认为true，是否触发全局Ajax事件
)
4、序列化元素
serialize( )方法，转化为字符串形式
serializeArray( )方法，转化为 json 格式
$.param( ) 方法，对一个数组或对象按照 键值对 格式进行序列化
5、Ajax全局事件
ajaxStart( callback ) —— ajax请求开始时
ajaxStop( callback ) —— ajax请求结束时
ajaxComplete( callback ) —— ajax请求完成时
ajaxError( callback ) —— ajax发生错误时，捕获错误作为最后一个参数传递
ajaxSend( callback ) —— ajax发送前
ajaxSuccess( callback ) —— ajax请求成功时
八、常用插件、插件写法
1、常用插件
① validation 表单验证插件 metadata.js辅助插件 message_cn.js中文提示信息包
② form 表单插件
③ simplemodal 模态窗口插件
④ cookie 插件
2、编写 jquery 插件
① 插件 3种类型
封装对象方法的插件（最常见）—— jQuery.fn.extend( )
封装全局函数的插件 —— jQuery,extend( )
选择器插件 —— jQuery,extend( )
② ;(function($){ // 建议以一个 ; 开始
……
}(jQuery)) // 将jQuery 传参给 $ ，即可在函数内部使用 $
—— 没有指定返回值时，应return this 使方法可链
③ jQuery 功能扩展
jQuery.fn.extend( 目标对象，对象1，对象2,……对象n) //用一个或多个对象扩展目标对象
jQuery,extend( )