What?
http://jquery.com/
一个优秀的JS函数库
使用了jQuery的网站超过90%
中大型WEB项目开发首选
Write Less, Do More!!!
Why?
HTML元素选取(选择器)
HTML元素操作
CSS操作
HTML事件处理
JS动画效果
链式调用
读写合一：读数据写数据用一个函数
隐式遍历(迭代)：一次操作多个元素(遍历内部dom元素(伪数组形式存储)的过程叫隐式遍历)
浏览器兼容
易扩展插件
ajax封装
......
How?
1. 引入jQuery库
2. 使用jQuery
jQuery核心函数
jQuery核心对象
区别2种js库库文件
开发版(测试版)
生产版(压缩版)
区别2种引用JS库的方式
服务器本地库
开发测试时使用
加重了服务器负担, 上线时一般不使用这种方式
CDN远程库
项目上线时, 一般使用比较靠谱的CDN资源库
减轻服务器负担
区别jQuery的不同版本
1.x
兼容老版本IE
文件更大
2.x
部分IE8及以下不支持
文件小, 执行效率更高
3.x
完全不再支持IE8及以下版本
提供了一些新的API
提供不包含ajax/动画API的版本
-----------------------------------------------------------------------------------------
jQuery的2把利器
1.jQuery函数
理解
即: $ 或 jQuery
jQuery定义了这个全局的函数供我们调用
它既可作为一般函数调用, 且传递的参数类型不同/格式不同功能就完全不同
也可作为对象调用其定义好的方法, 此时$就是一个工具对象
作为函数调用
1. 参数为函数,当dom加载完毕后执行此回调函数
$(function(){})
完整版：$(document).ready(function(){})
2. 参数为选择器(selector)字符串，查找所有匹配的标签,并将它们封装成jquery对象
$("#div1")
3. 参数为DOM对象，将dom对象封装成jquery对象
$(div1Ele)
4. 参数为html标签字符串，创建标签对象并封装成jquery对象
$("<div>")
作为对象使用
发送ajax请求的方法
$.ajax()
$.get()
$.post()
......
其它工具方法
$.each()
$.trim()
$.parseJSON()
......
2.jQuery对象
理解
即执行jQuery函数返回的对象
jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)
jQuery对象拥有很多有用的属性和方法, 让程序员能方便的操作dom
注意：js只能使用js的属性和方法，jQuery只能使用jQuery的属性和方法
.属性/方法
基本行为
length 包含的dom元素个数
[index]/get(index) 得到对应位置的dom元素
each(function(index,domEle){}) 遍历包含的所有dom元素,this是每个dom元素
index() 得到在所在兄弟元素中的下标
属性： 操作内部标签的属性或值
CSS： 操作标签的样式
文档： 对标签进行增删改操作
筛选： 根据指定的规则过滤内部的标签
事件： 处理事件监听相关
效果： 实现一些动画效果
----------------------------------------------------------------------------------------
使用jQuery核心函数
选择器
说明
选择器本身只是一个有特定语法规则的字符串, 没有实质用处
它的基本语法规则使用的就是CSS的选择器语法, 并对基进行了扩展
只有调用$(), 并将选择器作为参数传入才能起作用
$(selector)作用 :
根据选择器规则在整个文档中查找所有匹配的标签的数组, 并封装成jQuery对象返回
分类
基本选择器
最基本最常用的选择器
#id
id选择器
element
元素选择器
.class
属性选择器
*
任意标签
selector1,selector2,selectorN
取多个选择器的并集(组合选择器)
selector1selector2selectorN
取多个选择器的交集(相交选择器)
层次选择器
查找子元素, 后代元素, 兄弟元素的选择器
ancestor descendant
在给定的祖先元素下的后代元素中匹配元素
parent > child
在给定的父元素下的子元素中匹配元素
prev + next
匹配所有紧接在prev元素后的next元素
prev ~ siblings
匹配prev元素之后的所有siblings元素
过滤选择器
在原有选择器匹配的元素中进一步进行过滤的选择器
多个过滤选择器是依次执行的
:first 第一个
:last 最后一个
:eq(index) 第几个
:odd 索引为奇数的元素
:even 索引为偶数的元素
:checked 被选中的表单元素
:not() 不是xxx的
.......
表单选择器
.......
工具
$.each($("xxx"),function(index,ele){})
遍历数组或对象中的数据
$.trim()
去除字符串两边的空格
$.type(obj)
得到数据的类型
$.isarray(obj)
判断是否是数组
$.isFunction(obj)
判断是否是函数
.......
$.extend([deep],target,object1,[objectN])
deep:如果是true为深拷贝，默认为false浅拷贝
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象
objectN：待拷贝到第N个对象的对象
浅拷贝是把被拷贝的对象复杂数据类型的地址拷贝给目标对象，
修改目标对象会影响被拷贝对象。
浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象，冲突会直接覆盖
深拷贝，完全克隆(拷贝的对象而不是地址),修改目标对象不会影响被拷贝对象。
深拷贝把复杂数据类型里面的数据完全复制一份给目标对象，
如果有里面不冲突的属性会合并到一起。
ajax
ajax()
get()
post()
......
-----------------------------------------------------------------------------------------
使用jQuery对象
属性
操作任意属性
attr("属性"，"属性值") 读写属性，操作元素的自定义属性
prop("属性"，"属性值") 读写属性，专门操作元素的固有属性或值
为布尔值的属性
removeAttr() 移除属性
data("属性"，"属性值") 数据缓存 可以在指定的元素上存取数据，并不会修改dom元素结
构，一旦页面刷新，之前存放的数据将被移除
操作class类名
addClass() 添加class类名
removeClass() 移除class类名
.hasClass() 判断有没有类名，返回布尔值
.toggleClass() 切换类名，存在就加上，不存在就移除
操作HTML代码/文本/值
html() 解析标签
text() 不解析标签
val() 表单元素的value值
CSS
设置css样式/读取css值
读：css("属性")
设置：css("属性","属性值") css({属性:"属性值",属性:"属性值"})
获取/设置标签的位置数据(参数不用加单位)
offset()
相对页面左上角的坐标
position()
相对于最近的有定位的父元素左上角的坐标(只能获取不能设置)
scrollTop() 读取设置滚动条y坐标
scrollLeft() 读取设置滚动条x坐标
获取/设置标签的尺寸数据(参数不用加单位)
height() 不包括内边距和边框的尺寸
widtht() 不包括内边距和边框的尺寸
innerHeight() 包括内边距,但不包括边框的尺寸
innerWidth() 包括内边距,但不包括边框的尺寸
outerHeight() 包括内边距和边框的尺寸，如过传入true则加上margin
outerWidth() 包括内边距和边框的尺寸，如过传入true则加上margin
文档
创建元素:
$("<li>我的创建的li</li>")
添加节点
append(内容)
向当前匹配的所有元素内部的最后插入指定内容(父元素结尾插入)
prepend(内容)
向当前匹配的所有元素内部的最前面插入指定内容(父元素开头插入)
before(内容)
将指定内容插入到当前所有匹配元素的前面(兄弟元素开头插入)
after(内容)
将指定内容插入到当前所有匹配元素的后面(兄弟元素结尾插入)
替换节点
replaceWith(内容)
用指定内容替换所有匹配的标签
删除节点
empty()
删除所有匹配元素的子元素
remove()
删除所有匹配的元素
克隆：
clone() 不带事件
clone(true)带事件
筛选
过滤
在jQuery对象中的元素对象数组中过滤出一部分元素来
first() 第一个元素
last() 最后一个函数
eq(index|-index) 第几个
filter(selector)
not(selector)
has(selector)
查找孩子/父母/兄弟标签
在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
children() 子元素
find() 后代元素
parent() 父元素
parents() 可以返回指定的祖先元素
preAll() 当前元素前面的兄弟元素
nextall() 当前元素之后的兄弟元素
siblings() 兄弟元素不包括自己
事件
事件处理
.on("xxx",function(){})
通用的绑定事件监听
可以一次绑定多个事件:
on({xxx:function(){},xxx:function(){}})
如果两个事件的处理程序一样可以：
on("xxx事件 xxx事件",function(){})
.xxx(function(){})
绑定某个具体的事件监听
.off()
解绑所有事件监听
.off("click")解绑click事件监听
.one("事件名",function(){})
注册一次性事件
事件委派(委托)：将子元素事件委托给父元素处理
$("委托对象(父元素)").on("xx事件"，"被委托对象(子元素)")，function(){})
绑定委托事件监听,回调函数this是子函数
$("委托对象(父元素)").off("xx事件","被委托对象(子元素)")
移除委托事件监听
注意：写被委托对象(子元素)的时候不用写$("xxx"),直接写"xxx"
函数里的this是被委托对象(子元素)
触发绑定的事件：
.事件名()
.trigger("事件名或自定义事件") 通用
.triggerHandler("事件") 不会触发默认行为
自定义事件
.on("自定义事件",function(){})
注册自定义事件(自定义事件只能用trigger触发)
事件切换
hover(function(){鼠标经过触发的函数},function(){鼠标离开触发的函数})
同时绑定鼠标移入和移出监听
(如果里面只写一个函数那么鼠标经过和离开都触发这个函数)
事件对象
事件坐标
相对可视窗口左上角
event.clientX
event.clientY
相对页面左上角
event.pageX
event.pageY
相对元素左上角
event.offsetX
event.offsetY
阻止事件冒泡
event.stopPropagation();
取消事件的默认行为
event.preventDefault();
return false
效果
滑动动画
不断改变元素的高度配合display来实现的，括号里写时间就有动画，
不写动画就快(单位是毫秒)
slideDown(持续时间)
展开
slideUp(持续时间)
收缩
slideToggle(持续时间)
切换展开/收缩
淡入淡出动画
不断改变元素的透明度配合display来实现的，括号里写时间就有动画，
不写动画就快(单位是毫秒)
fadeIn(持续时间)
淡入
fadeOut(持续时间)
淡出
fadeToggle(持续时间)
淡入淡出切换显示/隐藏
fadeTo(持续时间,透明度0-1)
渐进方式调整不透明度，这两个参数必写
显示/隐藏动画
不断改变元素的尺寸和透明度配合display来实现，括号里写时间就有动画，
不写就没有(单位是毫秒)
show(持续时间)
带动画的显示
hide(持续时间)
带动画的隐藏
toggle(持续时间)
带动画的切换显示/隐藏
自定义动画
animate({属性:"属性值"，属性:"属性值"},持续时间)
自定义动画效果的动画，只支持数值类的样式，数值可以不加单位(默认px，
不加单位不用加"")
jQuery的动画方法都支持回调函数和切换效果
动画方法(持续时间,切换效果，function(){})
animate({属性:"属性值"，属性:"属性值"},持续时间,切换效果,function(){})
切换效果默认是swing，可选参数：linear
动画方法中的回调函数在动画播放完毕立即执行
回调函数的this是播放动画的dom元素
停止动画(必须写在动画前面)
stop()
停止当前动画
stop(true)
在动画当前状态停止
stop(true,true)
直接到当前动画的结束状态
延迟动画
delay(延迟时间)
使用：$("选择器").delay(延迟时间).动画方法()
获取表单数据的方法(也叫序列化)
serialize()
表单元素要有name属性才可以获取到value值
获取到的数据的格式：name1=value1&name2=value2...
jQuery对象使用特点
链式调用
调用jQuery对象的任何方法后返回的还是当前jQuery对象
读写合一
读: 内部第一个dom元素
写: 内部所有的dom元素
-----------------------------------------------------------------------------------------
window.onload与$(function(){})的区别：
window.onload：
包括页面和图片都加载完后才会执行回调(晚)
只能有一个监听回调，写多个后面的会将前面的覆盖
可以用$(window).on("load",function(){})
$(function(){})：
页面加载完就回调，不管图片(早)
可以有多个监听回调
-----------------------------------------------------------------------------------------
插件机制：
插件是jQuery提供的扩展机制，本质是往jQuery原型对象上添加方法
语法：
JQuery.fn.extend({
插件名(参数){
逻辑
}
})
使用：$("xxx").插件名(实参)
this是调用的jQuery本身
---------------------------------------------------------------------------------------
多库共存：
jQuery使用$作为标识符，随着jQuery的流行，其他js库也会用这$作为标识符，这样一起使用就会起冲突
需要一个解决方案，让jQuery和其他js库不冲突，可以同时存在。这就叫多库共存
jQuery解决方案：
1. 把里面的$符号统一改为jQuery,比如jQuery("div")
2. jQuery变量规定新的名称：$.noConflict()
var xxx=$.noConflict() 用xxx代替$
1071
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
