jQuery:是一个js函数库,口号写少 做多 write less do more
封装简化DOM操作(增删改查)/ajax
为什么使用:强大的选择器:方便快速查找DOM元素
隐式遍历:一次监听多个
读写合一:读数据(读是读第一个数据) 写数据(所有)使用的是一个方法
事件处理
链式调用:不断通过 . 不断调用方法 因为里面都有return this 返回的是jquery对象
DOM(CURD)增删改、
样式操作
动画
浏览器兼容
如何使用:引入库(本地 cdn远程引入) 是有$核心函数
两个利器 jQuery函数 jQuery对象
选择器:是有特定语法规则的字符串,用来查找某个 些DOM元素
选择器:$(选择器)
里面填写的内容
基本:#id 、tagName 、.class 、selector1,selector2 并集、selector1 selector2 交集
层次:找子孙后代 、selector1 >selector2 子元素 、selector1 selector2 后代元素
过滤:在原有基础上筛选内容
:first 、:last 、:eq(index) 、:lt 、:gt 、:odd 、:even 、:not(selector) 、:hidden 、:visible
、[attrName]、[attrName=value]、
表单::input 、:text 、:checkbox 、:radio 、:checked 选中的
属性 :操作标签属性、标签文本
attr(name) /attr(name,value):读写非布尔值的标签属性
prop(name)/prop(name,value):读写布尔值的标签属性
removeAttr(name) /removeProp :删除属性
addClass(classValue):添加class
removeClass(classValue):移除class
val()/val(value):读写标签的value
html()/html(htmlString):读写标签文本
CSS模块
css模块:
style样式
.css(styleName) 读样式
.css(样式名,样式值):设置一个样式
.css({多个样式对}) :设置多个样式
位置坐标 左上角
offset :取匹配元素在当前视口的相对偏移 相对页面左上角的坐标
position 取匹配元素在当前视口的相对偏移 相对页面左上角的坐标
scrollTop:读取/设置y坐标的位置 元素 或者页面
尺寸 width height 相对于盒子模型的宽高
innerwidth 加上内边距
outerwidth 加上边框
筛选模块
过滤:返回是新的过滤后的jQuery对象
根据下标过滤:first(选择器)、 last(选择器)、 eq (index)
根据选择器:filter(选择器)、not(选择器) 对当前元素要求并取反
has(选择器) :子孙元素要求
查找:查找子孙 兄都 父
children:子元素
find:后代元素 子孙
preAll:前面的兄弟
siblings:所有兄弟
parent:父元素
文档处理模型:
增
append appendTo//插入后部
preppend preppendTo插入前部
before:插入前面
after:插入后面
删
remove:全部为空
empty:自己还在
改
replayWith替换
事件处理模块
绑定事件:on 、事件名
常用事件名:click mouseenter mouseleave mouseover mouserout focus /blur
hover
解绑事件
off
事件委派(委托);子元素事件委托给父元素
delegate委托
undelegate取消委托
好处:新增元素没有监听 减少监听数量 只需要1次
事件坐标:event事件对象
event.offsetX 原点是元素左上角
event.clientX 原点是窗口左上角
event.pageX 原点是页面左上角
停止事件冒泡 event.stopPropagation()
阻止事件默认行 为event.preventDefault()
动画效果:(时间 速度 动画完成的监听回调函数)在一定时间内 不断改变样式 有一个速度的过程 变一下停一下
fadeOut():慢慢淡出 改变透明度 opcity 1--0 然后显示display:none
fadeIn:淡入 display 0 --1 display block
slideUp 向上收缩 主要变化的是当前元素变化的高度
slideDown 向下展开
show():(不)带动画的显示
hide():(不)带动画的隐藏
toggle:(不)带动画的切换显示/隐藏
自定义动画
animate({结束时的样式},time,fun)
stop()结束动画
插件机制
$.fn.extend({
xxx:function(){ //this是jQuery对象 $()
}
}
$().xxx
)//扩展jQuery对象
$.extend({
xxx:function(){ //this是jQuery $
}
})//扩展jQuery函数
$.xxx