- A+
所属分类：Web前端
一、标签操作之样式操作
样式类
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('<a href="#">百度一下</a>') //可以使用函数来设置所有匹配元素的内容 $('ul').html(function(){ return '哈哈哈' })
text
text() 获取所有匹配元素包含的文本内容 text(val) 设置该所有匹配元素的文本内容 注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
val
// 用途：val()用于操作input的value值 // 示范一： <input type="radio" name="sex" value="male"> <input type="radio" name="sex" value="female"> <input type="radio" name="sex" value="none"> $('input[type=radio]').val(['male',]) // 示范二： <input type="checkbox" name="hobbies" value="111"> <input type="checkbox" name="hobbies" value="222"> <input type="checkbox" name="hobbies" value="333"> $('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")。
<h3>爱好</h3> <input type="checkbox" name="hobbies" value="basketball">篮球 <input type="checkbox" name="hobbies" value="football">足球 <input type="checkbox" name="hobbies" value="coding">编程 <h3>性别</h3> <input type="radio" name="sex" value="male"> <input type="radio" name="sex" value="female"> <input type="radio" name="sex" value="none"> <script> $(':checkbox[value=football]').prop('checked',true); $(':radio[value=male]').prop('checked',true); </script>
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h3>菜单</h3> <input type="button" value="全选" id="all"> <input type="button" value="反选" id="reverse"> <input type="button" value="取消" id="cancel"> <p> 蒸羊羔<input type="checkbox" name="menu"> </p> <p> 蒸鹿茸<input type="checkbox" name="menu"> </p> <p> 蒸熊掌<input type="checkbox" name="menu"> </p> <p> 烧花鸭<input type="checkbox" name="menu"> </p> <p> 烧雏鸡<input type="checkbox" name="menu"> </p> <p> 烧子鹅<input type="checkbox" name="menu"> </p> <script src="jquery-3.3.1.min.js"></script> <script> $('#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); }); </script> </body> </html>
案例：全选、反选、取消
四、标签操作之文档处理
//内部 $(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() // 删除匹配的元素集合中所有的子节点====》把元素的子元素都删掉（包含文本内容）
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { 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; } </style> </head> <body> <input type="button" value="新增" id="add"> <table border="1px" cellspacing="0px"> <thead> <tr> <th>#</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Egon</td> <td>18</td> <td> <input type="button" value="编辑" class="edit"> <input type="button" value="删除" class="del"> </td> </tr> </tbody> </table> <div class="cover hide"></div> <div class="modal hide"> <label for="name">姓名</label><input type="text" id="name"> <label for="age">年龄</label><input type="text" id="age"> <input type="button" value="提交" id="submit"> <input type="button" value="取消" id="cancel"> </div> <script src="jquery-3.3.1.min.js"></script> <script> // 显示模态框 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 < tdList.length; 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 = '<input type="button" value="编辑" class="edit">n' + '<input type="button" value="删除" class="del">'; $(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(); }); </script> </body> </html>
表格内容增删改
替换
replaceWith() replaceAll()
克隆
clone() // clone方法不加参数true，克隆标签但不克隆标签带的事件 // clone方法加参数true，克隆标签并且克隆标签带的事件
案例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>克隆</title> <style> #b1 { background-color: deeppink; padding: 5px; color: white; margin: 5px; } #b2 { background-color: dodgerblue; padding: 5px; color: white; margin: 5px; } </style> </head> <body> <button id="b1">屠龙宝刀，点击就送</button> <hr> <button id="b2">屠龙宝刀，点击就送</button> <script src="jquery-3.3.1.min.js"></script> <script> // clone方法不加参数true，克隆标签但不克隆标签带的事件 $("#b1").on("click", function () { $(this).clone().insertAfter(this); }); // clone方法加参数true，克隆标签并且克隆标签带的事件 $("#b2").on("click", function () { $(this).clone(true).insertAfter(this); }); </script> </body> </html>
案例：点击复制
