天天看点

常用的一些jQuery操作

什么是jQuery:js框架,是对js代码的封装,提高开发效率,降低开发难度

JS对象与jQuery对象相互转换的语法 转换语法
将JS对象转换为jQuery对象 $(JS对象)
将jQuery对象转换为JS对象

jq对象[索引]

jq对象的本质就是数组

基本选择器 语法
ID选择器 $("#ID值")
类选择器 $(".类名")
标签选择器 $(“标签名”)
层级选择器 说明 语法
获得A元素内部的所有的B元素 B元素是A元素的子孙元素都可以 $(“A B”)
获得元素下面的所有B子元素 B元素必须是A元素的子元素 $(“A>B”)
获得A元素同级,下一个B元素

A与B是同级的兄弟元素

如果A是老二,B是老三

$(“A+B”)
属性选择器 语法
获得有属性名的元素 标签名[属性名]
获得属性名等于指定值元素 标签名[属性名=属性值]
获得属性名不等于指定值元素 标签名[属性名!=属性值]
复合属性选择器,多个属性同时过滤 标签名[属性1][属性2]
基本过滤选择器 语法
获得选择的元素中的第一个元素 :first
获得选择的元素中的最后一个元素 :last
不包括指定内容的元素 :not
偶数,从0开始计数 :even
奇数,从0开始计数 :odd
等于第几个 :eq(index)
大于第n个,不含第index个 :gt(index)
小于第n个,不含第index个 :It(index)
表单属性选择器 语法
可用 :enabled
不可用 :disable
选中(单选radio,多选checkbox) :disabled
选择(下拉列表中的) :selected
不可见元素 :hidden
常用事件方法 说明
blur() 失去焦点事件
change() 值改变数据
click() 单击事件
dblclick() 双击事件
focus() 获得焦点事件
keydown() 键盘按下事件
keyup() 键盘松开事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
submit() 表单提交事件
hover(function,function) 鼠标悬停事件(参数1:当鼠标移入时触发,参数2:当鼠标移出时触发 )
事件绑定 语法
JQ对象.on( “事件名”,function(){} );

给JQ对象关联的元素动态绑定事件

参数1:事件名

参数2:事件回调函数

事件解绑 语法
JQ对象.off(“事件名1 事件名2”) 解绑JQ对象的指定事件
JQ对象.off() 解绑JQ对象的所有事件
JQuery对象遍历方式 说明
JQ对象.each(function(index,element))

对JQ对象进行遍历

传递回调函数:参数1:索引值,参数2:遍历到的元素

$.each(数组,function(index,element))

对JQ对象进行遍历

参数1:要遍历的JQ对象

参数2:回调函数:参数1:索引值,参数2:遍历到的元素

方法名 功能描述
html() 获取元素标签体内容
html(“HTML”) 设置元素标签体内容
text() 获取标签体内容:只是文本
text(“文本”) 设置标签体内容:有子标签会原样输出
val() 获取表单元素的值
val(“值”) 设置表单元素的值
方法名 功能描述
attr(“属性名”) 获取属性值
attr(“属性名”,“属性值”) 修改或添加属性
prop(“属性名”) 获取属性值
prop(“属性名”,“属性值”) 修改或添加属性
removeAttr(“属性名”) 删除属性
removeProp(“属性名”) 删除属性

如何选择attr()和prop():

1.如果属性值是boolean类型,使用prop()方法。如:selected,checked等

2.其它类型的属性使用attr().