前端开发 JS 框架之 jQuery 的基础知识分享
jQuery 对象
jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象
注意:jQuery 对象只能使用 jQuery 里的前端培训方法,DOM 对象只能使用 DOM 对象的方法
jQuery 基础知识点
查找标签
基本选择器
id 选择器:$('#id')
标签选择器:$('tagName')
class 选择器:$(".className“)
配合使用:$("div.c1") //找到有 c1 的 div 标签
所有元素选择器:$("*")
组合选择器:$("#id, .className, tagName")
层级选择器:
$("div span"); //div 标签下所有后代 span 标签(子标签 ,子子标签...)
$("div > sapn"); //div 标签下所有儿子 span 标签
$("div + span"); //紧挨着 div 标签的第一 span 元素
$("div~span"); //div 标签下所有兄弟元素 span.
基本筛选器:
属性选择器:
[属性】
[属性名=value]
[属性!=value]
表单筛选器:
筛选器方法:
jQuery 的一些方法:
$("div").find("p") //查找 div 标签下的 p 标签 等价于 $("div p")
$("div").filter(".c1") //查找含有 c1 样式类的 div 标签。 等价于 $("div.c1)
$("div").first()
$("div").last()
$("div").not()
$("div").has()
$("div").eq()
标签操作
样式操作
位置操作
offset() 获取匹配元素在当前窗口的相对偏移或这种元素位置
position() 获取匹配元素相对父元素的偏移
scrollTop() 获取匹配元素相对滚动条顶部的偏移
scrollLeft() 获取匹配元素相对滚动条左侧的偏移
尺寸:
height() 高度
widght() 宽度
innerHeight()
innerWidth()
outerHeght()
outerWidth()
文本操作
取值操作
属性操作
注意:对于标签上有的能够看到的属性和自定义属性用 attr()方法
对于返回布尔值比如 checkbox,radion,option 这三个标签是否被选中,用 prop 方法
文档操作
事件
事件绑定方式:
注意:DOM 定义的事件可以用 .on()方法来绑定事件,但是 jQuery 定义的事件就不可以
常用事件有:
click 点击
hover 鼠标悬浮在目标上面
blur 输入域失去焦点
focus 输入域获取焦点(点击 input 输入框)
change 改变,一般用在选择、勾选框
keyup 释放键盘上的按键时触发
keydown 按下按键时触发
input 用户输入时触发
移除事件:把 on 改成 off,就是移除 .on()绑定的事件
阻止后续事件执行:事件函数中添加 return false; (常用于阻止表单提交等)或者 e.preventDefault()
阻止事件冒泡:添加 e.stopPropagation()
页面载入
事件委托
利用父标签去捕获子标签的事件
原创作者:NQ31
评论