03-老马jQuery教程-DOM操作(上）

原创

老马

发布于 2017-12-27 10:47:51

1.6K0

发布于 2017-12-27 10:47:51

jQuery DOM操作

在没有jQuery之前，DOM的操作相对来说有点麻烦，尤其是DOM节点的搜索。目前我们已经学习了jQuery的选择器，接下带大家一块学习jQuery的DOM操作，jQuery对DOM操作的封装让我们前端开发工作非常简便、简洁、兼容性好。比如：属性操作统一化：直接attr方法既可以设置属性也可以读取属性。

1.jQuery操作DOM的属性

1.1 读取属性值

在DOM时代，我们可以通过DOM.getAttribute('attNamn')获取DOM的属性节点。可以通过DOM.setAttribute('title','22');设置属性内容。

jQuery的包装对象(jQuery.fn原型对象)提供了attr(name, value)方法可以读取和设置属性内容。

attr(attrName)方法接受一个字符串参数，就是属性的名称，返回值是属性值，如果dom元素没有此属性则返回undefined。

<p k="3">3</p>
<p k="4">4</p>
<input type="checkbox" checked name="ckb" id="ckb1">
<input type="checkbox" name="ckb" id="ckb2">
<script>
  $(function(){
    // 读取第一个p标签的属性k的值
    console.log($('p:first').attr('k'));     // 3
    // 读取第一个p标签的id属性值，不存在此属性返回undefined
    console.log($('p:first').attr('id'));    // undefined
    // 特殊的单独的属性：checked、selected、multiple、readOnly、autofocus 返回属性名字
    console.log($('#ckb1').attr('checked')); // chekced
    console.log($('#ckb2').attr('checked')); // undefined ！！！不是false

    // 应对attr获取checked属性为undefined的问题，jQuery新增的prop方法
    // 仅仅用于checked、selected、multiple、readOnly、autofocus 等属性
    console.log($('#ckb2').prop('checked')); // false
  });
</script>

1.2 设置属性值

设置属性还是用attr()方法,此方法有多个重载，可以穿两个参数属性名和属性值，也可以传键值对对象，甚至可以传一个方法进行处理。

attr(name,value)简单设置属性的方法，接受两个字符串参数，第一个是属性名，第二个是属性值。

// 设置p1标签的类为box
$('#p1').attr('class','box');
// 为所有图像设置src属性。
$("img").attr("src", "test.jpg");// 默认隐式迭代

attr(Object)键值对形式的设置对象参数

// 为所有图像设置src和alt属性。
$("img").attr({ src: "test.jpg", alt: "Test Image" });// 默认隐式迭代

attr(key, func)函数方式处理设置参数

func回调函数：一个参数为当前元素的索引值，第二个参数为原先的属性值。函数的返回值作为新的属性值。

//把src属性的值设置为title属性的值
$("img").attr("title", function(index, oldAttr) {
  return this.src;
});

// 将p标签的k属性值加上  当前标签的索引和-
$('p').attr('k', function(index, attr){
  return index + '-'  + attr;
});

特殊的单个属性的设置（checked、selected、disabled等）

<input type="checkbox" name="ckb" id="ckb2">
<script>
  $(function(){
    $('#ckb2').attr('checked', 'checked');
    console.log($('#ckb2').attr('checked')); // checked
    console.log($('#ckb2').prop('checked')); // true

    $('#ckb2').attr('disabled', 'disabled');
    console.log($('#ckb2').attr('disabled')); // disabled
    console.log($('#ckb2').prop('disabled')); // true

    // prop方法设置 和 读取的属性值都是boolean类型
    $('#ckb2').prop('disabled', false);
    $('#ckb2').prop('checked', true);
  });
</script>

1.3 关于prop方法和attr的区别

jQuery为映射DOM自身的固有属性添加了prop方法，用法跟attr方法用法一致。但是prop方法在处理单个属性的获取和设置时非常方便，比如：disabled、checked、selected、multiple、readOnly、autofocus等。

prop 和 attr区别：

attr可以用于任何的属性读写，包括自定义属性
prop用意就是应用于DOM对象固有的属性，也就是prop用于读取和设置DOM对象中已经定义的标准属性。
prop对于单个属性返回值是boolean类型，具体类型参考DOM对象的属性的类型。
attr返回的值都是string类型

// attr设置样式类
$('p').attr('class', 'box'); // 默认隐式迭代

// DOM中样式类是className不是 class关键字
$('p').prop('className', 'box');// 默认隐式迭代

以下是官方建议attr(),prop()的使用：【√推荐，○不推荐】

Attribute/Property	.attr()	.prop()
accesskey	√	○
align	√	○
async	√	√
autofocus	√	√
checked	√	√
class	√	○
contenteditable	√	○
draggable	√	○
href	√	○
id	√	○
label	√	○
location	√	√
multiple	√	√
readOnly	√	√
rel	√	○
selected	√	√
src	√	○
tabindex	√	○
title	√	○
type	√	○
width	√	○

1.4 移除属性removeAttr(attr)

移除属性非常简单直接用下面代码

$("img").removeAttr("src");

2. 内容操作html()和text()

2.1 设置标签内部的html内容html()

DOM时代设置标签内部的html内容是使用DOM对象的 innerHTML属性。 jQuery包装对象封装了html()方法用于读取和设置，而且实现了默认隐式迭代机制。

语法：html([val|fn])

读取标签html内容：html()

<div class="box">
  <a href="https://chuanke.baidu.com/s5508922.html">老马学校</a>
</div>
<script>
  $(function(){
    $('.box').html(); // 获取box样式类里面的html文本
    //返回： <a href="https://chuanke.baidu.com/s5508922.html">老马学校</a>
  });
</script>

设置标签html的内容: html(str)

$('#box').html('<p>你好</p>');
// 等价于DOM的innerHTML属性设置值
$('#box')[0].innerHTML = '<p>你好</p>';

回调函数设置标签html内容: html(func)

func(index,html)接收两个参数，index为元素在集合中的索引位置，html为原先的HTML值.返回值作为新的innerHTML的内容。

$("p").html(function (n, oldHTML) {
  return oldHTML + n;
});

动态创建表格案例

<table class="list">
    <thead>
      <th>用户名</th>
      <th>邮箱</th>
      <th>年龄</th>
    </thead>
    <tbody>
      <tr>
        <td>老马</td>
        <td>malun666@126.com</td>
        <td>18</td>
      </tr>
    </tbody>
  </table>
  <script>
    var data = [{
      name: 'laoma11',
      mail: 'flydragonml@gmail.com',
      age: 19
    },{
      name: 'laoma12',
      mail: 'flydragonml@gmail.com',
      age: 20
    },{
      name: 'laoma13',
      mail: 'flydragonml@gmail.com',
      age: 12
    },{
      name: 'laoma14',
      mail: 'flydragonml@gmail.com',
      age: 99
    },{
      name: 'laoma15',
      mail: 'flydragonml@gmail.com',
      age: 19
    }];

    // 思路 : 把上面的数组进行遍历，拼接字符串把html字符串放到tbody中去。
    $(function() {
      var tempStrArray = [];
      for(var i = 0; i < data.length; i++) {
        var tempStr = "";
        tempStr += "<tr>";
        tempStr += "<td>" + data[i].name +"</td>";
        tempStr += "<td>" + data[i].mail +"</td>";
        tempStr += "<td>" + data[i].age +"</td>";
        tempStr += "</tr>";

        // 把拼接的字符串放到数组中
        tempStrArray.push(tempStr);
      }

      // 设置元素的内部的标签字符串， 第二种用法
      $('.list tbody').html(tempStrArray.join(''));

      // 读取标签内部的html字符串， 第一种用法
      console.log($('.list tbody').html());

      // 第三种用法
      $('.list tbody').html(function(index, oldHtml) {

      });
    });
  </script>

2.2 设置和读取文本text()

DOM时代获取和读取标签的文本有兼容问题，ie需要用innerText而ff等浏览器需要用textContext属性.jQuery做好了兼容的处理，直接调用text()方法就行了。

读取标签的text文本方法：text()

$('p').text();

设置标签的text文本text(str)

$("p").text("Hello world!");

设置标签的文本 text(func)

func(index, text)此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值.

$("p").text(function(n){
  return "这个 p 元素的 index 是：" + n;
});

2.3 设置和读取表单元素的value属性val()

在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。此方法对象

读取表单元素的value属性: $("input").val();
设置表单元素的值: $("input").val("hello world!");
回调函数设置值

$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});

3. 样式类操作

3.1 样式类型属性操作

前面讲的attr()和prop()方法都可以直接设置样式类属性。

$('p').attr('class', 'box');
$('p').prop('className', 'box');

3.2 添加样式类方法addClass

语法： addClass(class|fn) 为每个匹配的元素添加指定的类名，返回值是jQuery包装对象。

添加样式类，参数为字符串情况

$("p").addClass("selected");
// 添加多个样式类
$("p").addClass("selected1 selected2");

参数是回调函数

<!-- 给li加上不同的class -->
<ul>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
</ul>
<script>
  // jQuery 代码:
  $('ul li').addClass(function() {
    return 'item-' + $(this).index();
  });
</script>
<!-- 结果 -->
<!-- 
<ul>
  <li class="item-0">Hello</li>
  <li class="item-1">Hello</li>
  <li class="item-2">Hello</li>
</ul> 
-->

3.3 移除样式类remvoeClass

语法:removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。返回值是jQuery包装对象。

参数是字符串样式类 removeClass(str)

// 从匹配的元素中删除 'selected' 类
$("p").removeClass("selected");
// 删除匹配元素的所有类
$("p").removeClass();

回调函数的调用removeClass(func)

func(index, oldClass)此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

// 删除最后一个元素上与前面重复的class
$('li:last').removeClass(function(index, oldClass) {
    return $(this).prev().attr('class');
});

3.4 切换样式类 toggleClass

语法 toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类。

参数:

一个参数：class:CSS类名 String类型

// 如果p标签有selected样式就移除掉，如果没有就添加上。
$("p").toggleClass("selected");

两个参数class,switch

1:要切换的CSS类名. 2:用于决定元素是否包含class的布尔值。

var i = 9;
$(this).toggleClass("highlight", i > 3);

回调函数

参数：function(index, class) 用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。

// 根据父元素来设置class属性
$('div.foo').toggleClass(function(index, class) {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

3.5 判断样式类是否存在hasClass

语法格式：hasClass(str)，返回值Boolean类型，返回是否拥有某个样式类。

$('#md').hasClass('box'); // true or false

开关灯案例

  <style>
    .cls {
      background-color: #000;
    }
  </style>
<input type="button" value="关灯" id="btnLight">
  <script>
    $(function() {
      $('#btnLight').on('click', function(e) {
        // 按钮点击关灯后：文字改成开灯，然后背景色变成黑色
        // 再点击开灯，那么文字改为关灯，背景变白色
        if($(this).val() == '关灯') {
          $(this).val('开灯');
          // $(document.body).addClass('cls');
        } else {
          // 开灯的效果
          $(this).val('关灯');
          // $(document.body).removeClass('cls');
        }
        // 切换样式类：如果有则去掉，如果没有则加上。
        $(document.body).toggleClass('cls');
      });
    });

    // attr() prop()  html() text() val() addClass() removeClass() toggleClass() 
    // hasClass('cls')=> boolean
  </script>

4. 样式属性操作css

4.1 读取CSS的属性值css(str)

在DOM中我们可以使用DOM对象的style属性来设置或者读取样式的值。jQuery中封装了css()方法来帮助我们读取或者设置样式值。

<p id="md">hi jQuery</p>
<script>
  $('#md').css('color'); // 获取md标签的 color样式值。
</script>

4.2 设置CSS的样式属性值

接受两个字符串参数css(key,val)

将所有段落字体设为红色
$("p").css("color","red");

接受键值对的对象作为参数css(obj)

$("p").css({ "color": "#ff0011", "background": "blue" });

接受两个参数，第一个属性名，第二个回调函数。css(prop, func)
- prop:属性名.
- func(index,oldValue) 此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，oldValue是原先的属性值。

  // div 点击后逐渐增加div的大小
  $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      },
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });

下一节预告：

DOM的节点操作：节点创建、移除、添加、复制、替换等
DOM的位置属性和大小属性

对应视频地址：https://qtxh.ke.qq.com/#tuin=1eb4a0a4 老马qq： 515154084 老马微信：请扫码

微信：Flydragon_malun

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

jquery

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

jquery

登录后参与评论

0 条评论

热度