欢迎光临
我的个人博客网站

jQuery——标签操作之(样式、文本内容、属性、文档处理)操作

一、标签操作之样式操作 

样式类

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()是相对于相对于父级元素的位移。

示例:

jQuery——标签操作之(样式、文本内容、属性、文档处理)操作返回顶部示例

尺寸:

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>

案例:

jQuery——标签操作之(样式、文本内容、属性、文档处理)操作jQuery——标签操作之(样式、文本内容、属性、文档处理)操作

<!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()   // 删除匹配的元素集合中所有的子节点====》把元素的子元素都删掉(包含文本内容)

案例:

jQuery——标签操作之(样式、文本内容、属性、文档处理)操作jQuery——标签操作之(样式、文本内容、属性、文档处理)操作

<!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,克隆标签并且克隆标签带的事件

案例:

jQuery——标签操作之(样式、文本内容、属性、文档处理)操作jQuery——标签操作之(样式、文本内容、属性、文档处理)操作

<!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>

案例:点击复制

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » jQuery——标签操作之(样式、文本内容、属性、文档处理)操作
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏