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值 |
获取元素的大小
// 1. 属性的width值
console.log($('div').width());
// 2. width + padding
console.log($('div').innerWidth());
// 3. width + padding + border
console.log($('div').outerWidth());
// 4. width + padding + border + margin
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(“事件名”) | 自动触发事件,不会触发元素的默认事件 |
对象拷贝
// 1. 浅拷贝遇到复杂数据类型,将数据地址拷贝
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);
// 2. 深拷贝 把里面数据完全复制给目标对象一份,如果有冲突的属性,会合并在一起
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);
原文地址:https://blog.csdn.net/zhoutao2333/article/details/127581898
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_45720.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。