前言
今天刚接触jQuery,记录一下学习的内容
jQuery不是一个新的语言,是一个用原生js封装的js类库
作用是大量直接操作DOM 解决了兼容问题
dom操作
操作html:获取元素 更改标签属性 操作节点
操作css:设置或更改css样式
添加事件
网页特效
jQuery是一个类库
类库
是提供一些常用的方法,任何项目可以导入该库去使用他里面的方法完成我们的业务逻辑
插件
是有一定的业务功能,例如轮播图插件/选项卡插件/模态框插件 插件规定了当前这个功能的样式和结构,实现的功能用就JS封装
UI组件
是把结构样式行为全部封装好 我们想实现一个功能直接导入进来即可
框架
是具备一定编程思想,开发者按照其思想开发 一般框架提供了常用的类库方法 也提供了强大的功能插件 也提供了强大的UI组件
jQuery常用方法
html() =====innerHTML
attr("width") ===obj.style.width 获取和设置一个属性
addClass()/removeClass()/toggleClass() =====obj.className
click()
mouseover()
mouseout()
mousemove()
css()操作样式 设置多个属性用json格式
实现原理width/height/opacity
show(1000)显示 可以设置动画
hide()隐藏
toggle()显示隐藏切换
实现原理height/display
slideDown()卷入
slideUp()卷出
slideToggle()切换
实现原理display/opacity
fadeIn()淡入
fadeOut()淡出
fadeTo(1000时间,0.6透明度)淡入到哪里
节点关系
eq()获得的是所有元素的合集
parent() 必须是亲父亲
chilren()亲儿子
siblings() 兄弟 除了自己之外的所有亲兄弟
链式编程 jQuery的特点
find()查找后代
next() 下一个兄弟
nextAll()后面所有的兄弟
prev()上一个兄弟
prevAll()前面有所有的兄弟
parents()所有祖先元素
$().length 获取dom对象的个数
$().size 获取dom对象的个数
jQuery排序
eq() jQ对象获得所有的符合的元素 去调用eq()方法序号标号从第一个元素一直到最后一个
index()得到下标位置由自己在父元素中位置决定
each()循环
arguments.callee
bind(事件名称,时间处理函数)多个用,隔开
delegate
参数:3个
1.要绑定事件的元素
2.要绑定事件的名称
3.绑定事件的处理函数--匿名函数
on()
两个参数 1事件名称 2时间处理函数
三个参数 1 事件名称 2要绑定事件的元素 3 事件处理函数
on是父级元素调用,目的为自己元素去绑定事件
父级元素.on("事件类型","子级元素",事件处理函数)