jQuery思维导图

本文介绍: 思维导图

JQue ry
简介
是一个对Jav aSc rip t进行了封装的库，简化了用户使用Jav aSc rip t
特点：写得少做的多
使用方法
在页面引入jQue ry库：引入外部的JS文件
$:jQue ry的全局对象，代表的就是jQue ry
$(function(){})：jQuery 代码的入口函数。原始的写法：
$(document).ready(function(){})—window.on load
简写为：$(function(){})
jquery的选择器
强调
jQuery的CSS()函数–作用
是jQuery中用于设置元素CSS样式的函数
CSS(‘样式属性名’,’属性值’)：设置单个样式
css({属性名1：属性值1，属性名2：属性值2…})
eq(index)：匹配一个给定索引值的元素。页面中元素的索引值从0开始
基本选择器
 id 选择器：$(‘#id‘)
class 选择器（类选择器）：$(‘.class‘)
标签名选择器：$(‘标签名‘)
*通配符选择器：$(‘*’)
合并选择器：$(‘#id,.class,….’)
过滤选择器：是通过特定的过滤规则来筛选出所需的DOM元素。以”:”开头
基本过滤选择器
:first—选择第一个元素
:las t—选择最后一个元素
:no t(sec t ion)–去除所有与给定选择器相匹配的元素
:even–匹配所有索引值为偶数的元素，从索引0开始计数
:od d—匹配所有索引值为奇数的元素，从索引0开始计数
:eq(index)–匹配一个给定索引值的元素
:g t(index)–匹配一个大于给定索引值的元素
:lt(index)–匹配一个小于给定索引值的元素
内容过滤选择器
:contains–匹配包含给定文本的元素
:empty–匹配所有不包含子元素或文本的空元素
:has(selector)–匹配含有选择器所匹配的元素的元素
:parent–匹配含有子元素或文本的元素
可见性选择器
:h id den–匹配所有不可见的元素，或者type为hid den的元素。不仅包含样式属性display为none的元素，也包含文本隐藏域<input type=”hid den”>和visible:hi d den之类的元素
:visible–匹配所有可见元素
属性过滤选择器
[attri bute]：匹配包含给定属性的元素
[attri bute=value]：匹配给定的属性是某个特定值的元素
[attri bute!=value]：匹配所有不含某个指定的属性，或者属性不等于特定值的元素
[attri bute^=value]：匹配给定的属性是以某些值开头的元素
[attri bute$=value]：匹配给定的属性是以某些值结尾的元素
[attri bute*=value]：匹配给定的属性是包含某些值的元素
子元素选择器：索引值从1开始
:first–child–匹配第一个子元素
:last-child–匹配最后一个子元素
:nth–child
:nth–child(even/odd)—选取父元素下索引值为奇数或偶数的元素
:nth–child(2)—选取父元素下索引值为2的元素
:nth–child(2n)—选取父元素下索引值为2的倍数的元素
表单选择器
:text–单行文本框
:password—密码框
jQuery的属性
操作属性
attr(name)：获取属性值。参数 name是属性名
attr(key,fn)：修改属性值
参数 key：代表元素的属性名
参数fn：是一个函数，将该函数的返回值作为作为key的属性
attr(key,value)：修改属性值，将value的值赋给key
removeAttr(name)：删除指定的属性
操作样式
css(key,value)、css({‘属性名1′:’属性值1′,’属性名2’:’属性值2’…})
addClass(class|fn)：为匹配的元素添加指定的类名
removeClass(c lass|fn)：从所有匹配的元素中删除全部或指定的类
参数可以是类名，也可以是函数(将函数的返回值作为类名)
toggleClass(class|fn)：如果所匹配的元素存在某个类就删除，不存在就添加
 操作元素的宽度高度
 width()：获取元素的宽度
width(value):设置元素的宽度
 height()：获取元素的高度
height(value)：设置元素的高度
 操作元素的内容
html()：获取匹配元素的内容（底层使用的元素innerHTML）
html(val)：设置匹配元素的内容（可以识别标签）
text()：获取匹配元素的文本（底层使用的元素innerText属性，不能识别 html 标签）
text(val)：设置匹配元素的文本（不能设置标签）
操作值
val()：获取匹配元素的value属性值
val(ar gs)：设置匹配元素的value属性值
查找
add()
find(exp):
jQuery的自定义动画
animate(params,[speed],[easing],[fn])
params:一组包含作为动画属性和终值样式属性及其值的集合
speed：三种预定速度之一的字符串(‘slow’,’normal‘,’fast’)
easing:动画的效果，要使用的擦除效果的名称（需要插件）
jQuery的对象访问
 index([selector|element])：获取页面元素的索引值，索引值从0开始
jQuery的事件处理
 事件绑定
 bind(type,[data],fn):给匹配元素的事件绑定处理程序
参数type：事件类型
参数data：作为event.data传递事件处理程序的数据对象
参数fn：事件处理程序
 模拟鼠标悬停事件：当鼠标悬停到目标对象上方、离开目标对象时触发
 hover(over,out)
参数over：是一个函数，鼠标悬停到目标对象上方时触发
参数out：是一个函数，鼠标离开目标对象时触发
强调：在jQuery的应用中如果某个对象同时会触发 mouse over、mouse out 事件，建议使用 hover
为匹配的元素绑定一个一次性的事件处理函数
 one(type,[data|[fn]])
bind()的反向操作,从每一个匹配的元素中删除绑定事件，如果没有参数，则删除所有绑定事件
unbind(type,[data],fn)
on(events,[selector],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数
参数events：一个或多个用空格分隔的事件类型
 off：(events,[selector],fn)
在选择元素上移除一个或多个事件的事件处理函数
事件类型
 click：鼠标单击
 blur：失去焦点
focus：获得焦点
change：元素的值发生改变时触发
jQuery的动画
 显示/隐藏：show()、hide()
有三个参数(slow/normal/fast)
交替显示/隐藏：toggle(speed)
向上收缩/向下展开：通过高度的变化来显示/隐藏元素
slideUp([speed],[easing],fn)：向上收缩
slideDown([speed],[easing],fn)：向下展开
slideToggle([speed],[easing],fn)：交替
淡入淡出：通过改变匹配元素的透明度来显示和隐藏元素
fadeIn([speed],[easing],fn):通过不透明度的变化来实现所有匹配元素的淡入效果
 fadeOut([speed],[easing],fn):通过不透明度的变化来实现所有匹配元素的淡出效果
fadeToggle([speed],[easing],fn)：交替实现元素的淡入和淡出