一、标签操作之样式操作
样式类
addClass(); // 添加指定的CSS类名。 removeClass(); // 移除指定的CSS类名。 hasClass(); // 判断样式存不存在 toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
CSS
css("color","red") //DOM操作：tag.style.color="red"示例：
$("p").css("color", "red"); //将所有p标签的字体设置为红色位置：
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() // 获取匹配元素相对父元素的偏移
scrollTop() // 获取匹配元素相对滚动条顶部的偏移
scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
例1
$("#bb").offset({"left":100,"top":100})
例2
$(window).scrollTop(0); // 跳到首页.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
示例：
返回顶部示例
尺寸：
height() width() innerHeight() innerWidth() outerHeight() outerWidth()
二、标签操作之文本内容操作
html
html()是获取选中标签元素中所有的内容
html(val)设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
$('ul').html('百度一下') //可以使用函数来设置所有匹配元素的内容$('ul').html(function(){ return '哈哈哈'})text
text() 获取所有匹配元素包含的文本内容 text(val) 设置该所有匹配元素的文本内容 注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
val
// 用途：val()用于操作input的value值// 示范一：$('input[type=radio]').val(['male',])// 示范二：$('input[type=checkbox]').val(['111','222'])三、标签操作之属性操作
用于ID等或自定义属性：
attr(attrName) // 返回第一个匹配元素的属性值$('.box2 img').attr('title','美女') // 为所有匹配元素设置一个属性值attr({'title': '美女', 'alt':'图片被狗吃了'}) // 为所有匹配元素设置多个属性值removeAttr('title') // 从每一个匹配的元素中删除一个属性用于checkbox和radio
prop('value') // 获取value属性的值prop('checked',true); // 设置属性removeProp('value') // 移除value属性注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
爱好篮球足球编程性别
$(':checkbox[value=football]').prop('checked',true);
$(':radio[value=male]').prop('checked',true);" _ue_custom_node_="true">案例：
Document菜单
蒸羊羔
蒸鹿茸
蒸熊掌
烧花鸭
烧雏鸡
烧子鹅
$('#all').click(function () {
$('p input').prop('checked', true);
});
$('#reverse').click(function () {
$('p input').each(function () {
$(this).prop('checked', !$(this).prop('checked'));
})
});
$('#cancel').click(function () {
$('p input').prop('checked', false);
});" _ue_custom_node_="true">案例：全选、反选、取消
四、标签操作之文档处理
//内部$(A).appendTo(B) // 把A追加到B内部的最后面$(A).prependTo(B) // 把A前置到B内部的最前面//外部$(A).insertAfter(B) // 把A放到B外部的后面$(A).insertBefore(B) // 把A放到B外部的前面
了解
//内部$(A).append(B) // 把B追加到A内部的最后$(A).prepend(B) // 把B前置到A内部的最前面//外部$(A).after(B) // 把B放到A外部的后面$(A).before(B) // 把B放到A外部的前面
移除和清空元素
$('.p1').remove() // 从DOM中删除所有匹配的元素。====>把元素本身删掉$('.p1').empty() // 删除匹配的元素集合中所有的子节点====》把元素的子元素都删掉（包含文本内容）案例：
Document {
margin: 0;
padding: 0;
}
.cover {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(150, 150, 150, 0.3);
}
.modal {
position: absolute;
width: 500px;
height: 300px;
left: 50%;
top: 200px;
margin-left: -250px;
background-color: white;
}
.hide {
display: none;
} " _ue_custom_node_="true">#姓名年龄操作1Egon18<label for="name">姓名<label for="age">年龄// 显示模态框
function show() {
$('.cover').removeClass('hide');
$('.modal').removeClass('hide');
} // 隐藏模态框
function hide() {
$('.cover').addClass('hide');
$('.modal').addClass('hide');
} // 清除输入框内容
function clear() {
$('#name,#age').val('');
}
let current_obj=''; function bind() { // 点击编辑按钮，修改全局变量submit_tag='edit',提交时则执行编辑内容的功能；
$('.edit').click(function () {
submit_tag = 'edit';
current_obj=this;
show();
let name=$(this).parent().siblings()[1].innerHTML;
let age=$(this).parent().siblings()[2].innerHTML;
$('#name').val(name);
$('#age').val(age);
});
$('.del').click(function () {
let tdList = $(this).parent().parent().nextAll(); for (let i = 0; i ) {
let num = $(tdList[i]).children()[0].innerHTML;
$(tdList[i]).children()[0].innerHTML = num - 1;
}
$(this).parent().parent().remove();
});
} // 为现有的编辑和删除按钮绑定事件 bind();
let submit_tag = ''; // 点击新增按钮，修改全局变量submit_tag='add',提交时则执行添加新内容的功能；
$('#add').click(function () {
submit_tag = 'add';
show();
}); // 点击提交按钮，根据全局变量submit_tag的值，来执行不同的功能；
$('#submit').click(function () { if (submit_tag == 'add') { //添加新内容的功能
let tr = document.createElement('tr');
let td1 = document.createElement('td');
let td2 = document.createElement('td');
let td3 = document.createElement('td');
let td4 = document.createElement('td');
td1.innerHTML = $('tbody tr').length + 1;
td2.innerHTML = $('#name').val();
td3.innerHTML = $('#age').val();
td4.innerHTML = '\n' + '';
$(td1).appendTo(tr);
$(td2).appendTo(tr);
$(td3).appendTo(tr);
$(td4).appendTo(tr);
$(tr).appendTo($('tbody'));
bind();
hide();
clear()
} else if (submit_tag == 'edit') { //编辑已经存在内容的功能
let tdL=$(current_obj).parent().siblings();
tdL[1].innerHTML=$('#name').val();
tdL[2].innerHTML=$('#age').val();
hide();
clear();
}
});
$('#cancel').click(function () {
clear();
hide();
});" _ue_custom_node_="true">表格内容增删改
替换
replaceWith() replaceAll()
克隆
clone()// clone方法不加参数true，克隆标签但不克隆标签带的事件// clone方法加参数true，克隆标签并且克隆标签带的事件
案例：
克隆
#b1 {
background-color: deeppink;
padding: 5px;
color: white;
margin: 5px;
}
#b2 {
background-color: dodgerblue;
padding: 5px;
color: white;
margin: 5px;
} " _ue_custom_node_="true">屠龙宝刀，点击就送屠龙宝刀，点击就送// clone方法不加参数true，克隆标签但不克隆标签带的事件
$("#b1").on("click", function () {
$(this).clone().insertAfter(this);
}); // clone方法加参数true，克隆标签并且克隆标签带的事件
$("#b2").on("click", function () {
$(this).clone(true).insertAfter(this);
});" _ue_custom_node_="true">案例：点击复制
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
