jQuery操作的只能是jQuery对象
1、获取元素
| 操作 | 说明 |
|---|
| $(“选择器”) | 获取元素,获取的是jQuery对象 |
| $(‘ul li:first’) | 筛选出第一个元素 |
| $(‘ul li:eq(2)’) | 筛选出第几个元素 |
| $(‘ol li:odd’) | 筛选出偶数索引元素 |
| $(‘ol li:even’) | 筛选出奇数索引元素 |
2、元素属性操作
| 操作 | 说明 |
|---|
| $().prop(“属性名”) | 获取元素的属性值(只能获取默认属性) |
| $().prop(“属性名”, “属性值”) | 修改元素的属性值(只能获取默认属性) |
| $().attr(“属性名”) | 获取元素的属性值(默认属性|自定义属性) |
| $().attr(“属性名”, “属性值”) | 修改元素的属性值(默认属性|自定义属性) |
| $().removeAttr(“属性名”) | 删除元素的属性(默认属性|自定义属性) |
| $().data(“属性名”) | 获取元素的属性值(只能获取自定义属性形式如:data-属性名=“属性值”) |
| $().data(“属性名”, “属性值”) | 修改元素的属性值(只能获取自定义属性形式如:data-属性名=“属性值”) |
| |
元素内容文本值
| 操作 | 说明 |
|---|
| $().html() | 获取元素的html结果值 |
| $().html(“html标签结构”) | 修改元素的html内部标签结构 |
| $().text() | 获取元素的文本信息 |
| $().text(“文本”) | 修改元素的文本信息 |
| $().val() | 获取表单元素的value值 |
| $().val(“修改的value”) | 修改表单元素的value值 |
获取元素的大小
console.log($('div').width());
console.log($('div').innerWidth());
console.log($('div').outerWidth());
console.log($('div').outerWidth(true));
获取元素的位置
console.log($('.son').offset());
console.log($('.son').position());
3、元素样式style和类class操作
| 操作 | 说明 |
|---|
| $().css(‘属性名’) | 获取样式style属性 |
| $().css(‘属性名’, “属性值”) | 设置样式style属性 |
| $().css({属性名1:属性值1,属性名2:属性值2}) | 通过对象形式设置样式style属性 |
| $().addClass(“className”) | 给元素添加类名 |
| $().removeClass(“className”) | 删除元素的类名 |
| $().toggleClass(“className” | 添加获取删除类名 |
| $().hasClass() | 是否具有该类名 |
显示隐藏与划入划出
(回调可以省略,时间也可省略,设置了默认时间的)
| 操作 | 说明 |
|---|
| $().hide(time, callback) | 隐藏元素 |
| $().show(time, callback) | 显示元素 |
| $().toggle(time, callback) | 切换元素的显示和隐藏 |
| |
| $().slideDown(time, callback) | 下滑显示元素 |
| $().slideUp(time, callback) | 上滑隐藏元素 |
| $().slideToggle(time, callback) | 切换元素的下滑与上滑 |
| |
| $().animate({left: 500, top: 300}) | 设置自定义动画,通过对象配置设置结束时的样式 |
| $().stop() | 停止动画方法 |
4、节点操作
| 操作 | 说明 |
|---|
| $().parent() | 获取元素的父节点 |
| $().parents(‘选择器’) | 获取指定的祖先元素 |
| $().children(‘选择器) | 获取子节点,数组,亲儿子 |
| $().find(’选择器) | 获取子节点,数组,可以选择里面所有孩子,包括儿子、孙子 |
| $().siblings(‘选择器’) | 选择兄弟节点 |
| $().next() | 下一个兄弟节点,通过传递参数可以进行二次选择 |
| $().prev() | 前一个兄弟 多选方法,通过传递参数可以进行二次选择 |
| $().nextAll() | 后面所有兄弟,通过传递参数可以进行二次选择 |
| $().prevAll() | 前面所有兄弟,通过传递参数可以进行二次选择 |
节点的创建、添加、删除
| 操作 | 说明 |
|---|
| $(‘ | 创建一个jQuery节点对象,参数为标签结构形式的字符串 |
| $().append(jQury节点对象) | 在该元素内部添加到子节点的最后面(内部添加) |
| $().prepend(jQury节点对象) | 在该元素内部添加到子节点的最前面(内部添加) |
| $().after(jQury节点对象) | 在该元素后面添加节点(外部添加) |
| $().before(jQury节点对象) | 在该元素前面添加节点(外部添加) |
| $().remove() | 删除该节点元素 |
| $().empty() | 情况该节点的子节点 |
5、事件操作
| 操作 | 说明 |
|---|
| $().事件名(callback) | 给事件绑定回调函数callback |
| $().on(“事件名”, callback) | 给事件绑定回调函数callback |
| $().on(“事件名1 事件名2”, callback) | 给多个事件绑定相同的回调函数callback |
| $().on(“事件名1”, "“事件名2”, callback) | 给多个事件绑定相同的回调函数callback |
| $().on({事件名1: callback1, 事件名2: callback2}) | 通过对象配置项作为参数,给多个事件绑定不同的回调callback |
| $().off() | 解除所有事件的绑定 |
| $().off(“事件名”) | 解除指定事件的绑定 |
| $()one(事件名:callback) | 设置的事件只能触发一次 |
| $().trigger(“事件名”) | 自动触发事件,即该代码会触发指定事件的回调 |
| $().triggerHandler(“事件名”) | 自动触发事件,不会触发元素的默认事件 |
对象拷贝
var targetObj = {
id: 0,
phone: '15736542784'
};
var obj = {
id: 1,
name: 'andy',
msg: {
age: 10
}
}
$.extend(targetObj, obj);
obj.msg.age = 20;
console.log(targetObj);
var targetObj = {
id: 0,
phone: '15736542784',
msg: {
sex: '男'
}
};
var obj = {
id: 1,
name: 'andy',
msg: {
age: 10
}
}
$.extend(true, targetObj, obj);
obj.msg.age = 20;
console.log(targetObj);