什么是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().