jQuery DOM操作

最新推荐文章于 2024-07-05 14:21:58 发布

christyleylh

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量321

点赞数 1

分类专栏：前端文章标签： jquery

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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');// 默认隐式迭代

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;
});

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

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;
      }
    });
  });

5. jQuery创建DOM标签

5.1 DOM动态创建标签的方法

DOM时代我们通过document的createElement方法动态创建标签。创建标签后，动态的给他添加属性。例如代码：

// 动态创建标签
var domDiv = document.createElment('div');
// 动态创建属性
domDiv.setAttribute('id', 'box');
// 动态设置内部html标签
domDiv.innerHTML = '<span>动态span</span>';
// 动态追加到body标签中
document.body.appendChild(domDiv);

5.2 jQuery动态创建标签的方式

jQuery的构造函数本身可以接收html标签的字符串来动态创建HTML标签。

语法结构： jQuery(html, [props])

参数:

html:用于动态创建DOM元素的HTML标记字符串，注意标签尽量闭合。
props:用于附加到新创建元素上的属性、事件和方法

返回值：返回新创建标签的jQuery包装对象

// jq的 appendTo，类似DOM的appendTo方法
$("<div><p>Hello</p></div>").appendTo("body");

// 两次参数的情况
$("<div></div>", {
  "class": "test", // 设置样式类
  text: "Click me!",  // 设置内容
  click: function(){  // 设置点击事件处理程序
    $(this).toggleClass("test");
  }
}).appendTo("body"); // 追加到body标签

6. DOM节点操作

6.1 添加子节点append(content|fn)方法

参数:
- content：类型String, Element, jQuery，添加的子节点。
- fn(index,html):返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。
返回值：当前父包装对象，jQuery
实例：

<div id="msg">hi</div>
<script>
  $(function(){
    // 添加字符串
    $("#msg").append('<span>你好</span>');
    // 添加dom对象
    var domDiv = document.createElement('div');
    domDiv.innerHTML = "hi laoma q:515154084";
    $("#msg").append(domDiv);
    // 添加jQuery对象
    var $span = $('<span>我是 jQuery对象</span>');
    $("#msg").append($span);

    $("#msg").append(function(index, oldHtml) {
      return "<span>==" + index + "==</span>";
    });
  });
</script>

prepend(content|fn)方法跟append(content|fn)的使用方法一致，只不过一个是在最后追加子节点，一个是在最前面追加子节点（prev vs after)

6.2 追加到appendTo(content)方法

参数：content：用于被追加的内容选择器，String类型。
返回值：返回当前的jQuery包装对象。
实例：

$("<div>****</div>").appendTo('body');

prependTo(content)方法，跟appendTo(content)的使用方法一致，一个是追加到最后，一个是追加到最前。

6.3 元素之后插入节点after(content|fn)方法

参数
- content：插入到每个目标后的内容，类型可以：String，DOM，jQuery
- fn(index,html)：函数必须返回一个html字符串。
返回值： jQuery包装对象
实例

// 字符串
$('div').after('<p>1234</p>');
// jQuery对象
$("p").after($("#msg"));
// dom对象
$("p").after($("#msg")[0]);

// 传入回调函数
$("div").after(function(index, html) {
  return '<p>' + index  + '</p>'
})

before(content|fn) 方法正好是after(content|fn)相反的方法，用法一致。

6.4 插入某个元素之后insertAfter(content)方法

参数： content：插入到每个目标后的内容，类型可以：String，DOM，jQuery。

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插到A后面，而是把A插到B后面。

$("p").insertAfter("#foo");

insertBefore(content)跟此方法相反。

6.5 包裹节点wrap(html|element|fn)方法

概述：

把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加。

参数:
- html， String类型，HTML标记代码字符串，用于动态生成元素并包裹目标元素
- element， Element类型，用于包装目标元素的DOM元素。
- fn: 生成包裹结构的一个函数,返回包裹结构html
返回值:jQuery包装对象
实例

<script>
// 把所有的段落用一个新创建的div包裹起来
$("p").wrap("<div class='wrap'></div>");
// 用ID是"content"的div将每一个段落包裹起来
$("p").wrap(document.getElementById('content'));
// 用原先div的内容作为新div的class，并将每一个元素包裹起来
</script>

 <!-- HTML 代码: -->
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<script>
// jQuery 代码:
$('.inner').wrap(function() {
  return '<div class=" + $(this).text() + " />';
});
</script>

<!-- // 结果: -->
<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

6.6 去掉父节点包裹unwrap()方法

这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。

<!-- HTML 代码: -->
<div>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</div>
<script>
  // jQuery 代码:
  $("p").unwrap()
</script>
<!-- 结果: -->
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

6.7 集合包装wrapAll(html|ele)方法

概述

将所有匹配的元素用单个元素包裹起来。这于 .wrap()是不同的，.wrap()为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。

参数
- html， String类型，HTML标记代码字符串，用于动态生成元素并包装目标元素
- elem， Element类型，用于包装目标元素的DOM元素
示例

$("p").wrapAll("<div></div>");
// 用一个生成的div将所有段落包裹起来
$("p").wrapAll(document.createElement("div"));

6.8 包裹内部子元素wrapInner(htm|element|fnl)方法

概述

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。

参数
- html， String类型，HTML标记代码字符串，用于动态生成元素并包装目标元素
- element，Element类型，用于包装目标元素的DOM元素
- fn，Function类型，生成包裹结构的一个函数
示例

// 把所有段落内的每个子内容加粗
$("p").wrapInner("<b></b>");
// 把所有段落内的每个子内容加粗
$("p").wrapInner(document.createElement("b"));

<!-- 用原先div的内容作为新div的class，并将每一个元素包裹起来 -->
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<script>
$('.inner').wrapInner(function() {
  return '<div class=" + $(this).text() + " />';
});
</script>

<!-- 结果: -->
<div class="container">
  <div class="inner">
    <div class="Hello">Hello</div>
  </div>
  <div class="inner">
    <div class="Goodbye">Goodbye</div>
  </div>
</div>

6.9 替换阶段

方法：replaceAll(selector),用匹配的元素替换掉所有 selector匹配到的元素。
方法：replaceWith(content),用于将匹配元素替换掉的内容。可以是String\DOM\jQuery

// 替换掉所有的p,以下两种方法都可以
$("p").replaceWith("<b>Paragraph. </b>");
$("<b>Paragraph. </b>").replaceAll("p");

6.10 清空子元素

empty()方法，删除匹配的元素集合中所有的子节点

$("p").empty();

6.11 删除节点

remove()方法从DOM中删除所有匹配的元素。

// 删除所有的p标签
$("p").remove();

6.12 复制节点

clone([Even[,deepEven]])方法可以对节点进行克隆。

Even:一个布尔值（true 或者 false）指示事件处理函数是否会被复制。
deepEven:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。


$("b").clone().prependTo("p");

7. DOM的CSS属性读写

7.1 简单获取元素的内部宽高（不包括边框和外边距）

innerHeight()

获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。没有参数，返回值是Integer类型

示例

获取第一段落内部区域高度。
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
</script>
<!-- 结果: -->
<p>Hello</p><p>innerHeight: 16</p>

innerWidth()

获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。没有参数，返回值是Integer类型

示例

<!-- 获取第一段落内部区域宽度。 -->
<p>Hello</p><p>2nd Paragraph</p>
<script>
  var p = $("p:first");
  $("p:last").text( "innerWidth:" + p.innerWidth() );
</script>
<!-- 结果: -->
<p>Hello</p><p>innerWidth: 40</p>

7.2 获取元素的外部宽高（包括边框或外边距）

7.2.1 outerHeight([options])

概述

获取第一个匹配元素外部高度（默认包括补白和边框）。
此方法对可见和隐藏元素均有效。

参数： optionsBoolean默认值:'false'，设置为 true 时，计算边距在内。
示例

<!-- 获取第一段落外部高度。 -->
<p>Hello</p><p>2nd Paragraph</p>
<script>
  var p = $("p:first");
  $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
</script>
<!-- 结果: -->
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>

7.2.2 outerWidth([options])

概述

获取第一个匹配元素外部宽度（默认包括补白和边框）。
此方法对可见和隐藏元素均有效。

参数:optionsBoolean默认值:'false',设置为 true 时，计算边距在内。
示例

获取第一段落外部宽度。
<p>Hello</p><p>2nd Paragraph</p>
<script>
  var p = $("p:first");
  $("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
</script>
<!-- 结果: -->
<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>

7.3 jQuery获取元素内容区域的宽高

7.3.1 height([val|fn])

概述

取得匹配元素当前计算的高度值（px）。在 jQuery 1.2 以后可以用来获取 window 和 document 的高

参数

valString 可以是： Number, Function两种类似。

Number: 设定CSS中 'height' 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的高度。
function(index, height) index:String, height:Number 返回用于设置高度的一个函数。接收元素的索引位置和元素旧的高度值作为参数。
示例

//第一种：无参数描述:
// 获取第一段的高
$("p").height();
// 第二种：一个参数参数val 
// 把所有段落的高设为 20:
$("p").height(20);

// 参数function(index, height) 
// 以 10 像素的幅度增加 p 元素的高度
  $("button").click(function(){
    $("p").height(function(n,c){
    return c+10;
    });
  });

7.3.2 width([val|fn])

width的用法跟height一致，不再赘述。

7.4 获取和设置滚动条的宽高

7.4.1 scrollTop([val])

概述

获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。

参数: val 可以是：String, Number类型
实例：

var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
$("div.demo").scrollTop(300);

7.4.2 scrollLeft([val])

用法同scrollTop，不再赘述。

7.5 获取位置和偏移量

7.5.1 position()

概述

获取匹配元素相对父元素的偏移。此方法只对可见元素有效。从边框开始计算。

返回值：Object{top,left} 返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。

var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
// 结果：<p>Hello</p><p>left: 15, top: 15</p>

7.5.2 offset([coordinates])

概述

获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

参数可以省略（获取），或者 coordinates 是Object类型，属性：{top,left} 必需。规定以像素计的 top 和 left 坐标。比如 {top:100,left:0} ，或者：带有 top 和 left 属性的对象

// 获取第二段的偏移
// <p>Hello</p><p>2nd Paragraph</p>
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
// 结果:
// <p>Hello</p><p>left: 0, top: 35</p>

// 设置最后一个段落的top和left值
$("p:last").offset({ top: 10, left: 30 });

原文链接（转载有些微修改）