一、引入
① 官网 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( )