jQuery学习笔记2 - jQuery操作元素、DOM

发表于   |   分类于   |     |   阅读次数

jQuery操作元素

属性操作

  • 获取元素属性：
    $().attr("属性名")
    $().prop("属性名")
  • 设置元素属性：
    $().attr("属性","属性值")
  • 删除元素属性：
    $().removeAttr("属性名")
    $().removeProp("属性名") 案例：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    //使用attr()方法获取img元素的src属性
    $("#btn_src").click(function () {
                    alert($("img").attr("src"));
                });
    //使用attr()方法为a标签添加了一个title属性。
    $("a").attr("title", "欢迎来到西风博客网站");

    //使用removeAttr()方法删除a标签的title属性。
    $("a").removeAttr("title");

attr()方法和prop()方法操作元素属性的区别：

  1. 操作对象不同
    attr和prop分别是单词attribute和property的缩写，并且它们均表示”属性”的意思。

不过，在jQuery中，attribute和property却是两个不同的概念。attribute表示HTML文档节点的属性，property表示JS对象的属性。
在jQuery中，prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象，Element类型)上的属性(property)；attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。

1
2
3
4
5
6
7
8
<!-- attr()函数针对的是该文档节点的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// prop()函数针对的是该DOM元素(msg)自身的property
var msg = document.getElementById("message");
var $msg = $(msg);
</script>

在jQuery的底层实现中，函数attr()和prop()的功能都是通过JS原生的Element对象(如上述代码中的msg)实现的。attr()函数主要依赖的是Element对象的getAttribute()和setAttribute()两个方法。prop()函数主要依赖的则是JS中原生的对象属性获取和设置方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);

/* *** attr()依赖的是Element对象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value ) *** */

// 相当于 msg.setAttribute("data_id", 145);
$msg.attr("data_id", 145);

// 相当于 msg.getAttribute("data_id");
var dataId = $msg.attr("data_id"); // 145

/* *** prop()依赖的是JS原生的 element[property] 和 element[property] = value; *** */

// 相当于 msg["pid"] = "pid值";
$msg.prop("pid", "pid值");

// 相当于 msg["pid"];
var testProp = $msg.prop("pid"); // pid值
</script>

虽然prop()针对的是DOM元素的property，而不是元素节点的attribute。不过DOM元素某些属性的更改也会影响到元素节点上对应的属性。例如，property的id对应attribute的id，property的className对应attribute的class。

1
2
3
4
5
6
7
8
9
10
<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);

document.writeln( $msg.attr("class") ); // test
$msg.prop("className", "newTest");
// 修改className(property)导致class(attitude)也随之更改
document.writeln( $msg.attr("class") ); // newTest
</script>

  1. 应用版本不同
    attr()是jQuery 1.0版本就有的函数，prop()是jQuery 1.6版本新增的函数。毫无疑问，在1.6之前，你只能使用attr()函数；1.6及以后版本，你可以根据实际需要选择对应的函数。

  2. 用于设置的属性值类型不同
    由于attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。

prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。

  1. 其他细节问题
    对于表单元素的checked、selected、disabled等属性，在jQuery 1.6之前，attr()获取这些属性的返回值为Boolean类型：如果被选中(或禁用)就返回true，否则返回false。

但是从1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。

因为jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。

因此，在jQuery 1.6及以后版本中，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作，也尽量使用prop()函数。

参考：attr()和prop()的区别 ☆☆☆☆☆

内容操作

  • html()
    html()方法不仅可以用于获取元素的HTML内容，也可以用于设置元素的HTML内容。

    1
    2
    $().html()              //获取HTML内容
    $().html("HTML内容");   //设置HTML内容

  • text()
    text()方法来获取和设置某个元素的“text内容”。
    所谓text内容，就是在该元素的html内容(即innerHTML属性值)的基础上过滤掉所有HTML标记后的文本内容(即IE浏览器的DOM元素特有的innerText属性值)。
    如果jQuery对象匹配的元素不止一个，则text()返回合并了每个匹配元素(包含其后代元素)中的文本内容后的字符串。

    1
    2
    $().text()             //获取文本内容
    $().text("文本内容")   //设置文本内容

  • val()
    表单元素不像普通元素，它们的值都是通过表单元素的value属性来传递的。因此我们不能使用html()和text()这两种方法来获取元素的内容（值）。
    在jQuery中，我们可以使用val()来获取或设置“表单元素”的值。

    1
    2
    $().val()                  //获取表单元素
    $().val("表单元素的值")    //设置表单元素

对于普通元素，我们可以使用html()和text()来获取元素的内容或者值。但是对于表单元素来说，想要“获取”或者“设置”元素的值，就必须用val()方法。

样式操作

CSS属性操作

  • 获取CSS属性值
    $().css("属性")

  • 设置CSS属性值
    $().css("属性","属性值") — 设置单个CSS属性
    $().css({"属性1":"属性值1","属性2":"属性值2",……}) —设置多个CSS属性，也可以使用这种形式为选取的元素设置单个CSS属性。
    例如：
    $("ul li:nth-child(odd)").css("color","red");
    上述这句代码等价于：
    $("ul li:nth-child(odd)").css({"color":"red"});

CSS类名操作

“CSS类名操作”类名操作其实就是为元素添加某个类名、删除某个类名等。

  • 添加类名
    $().addClass("类名")
  • 删除类名
    $().removeClass("类名")
  • 切换类名
    $().toggleClass("类名")
    说明
    toggleClass()方法用于检查元素是否具有某个类名。如果类名不存在，则为该元素添加类名；如果类名已存在，则为该元素删除类名。

使用jQuery操作CSS类名的作用：
我们把一大块CSS代码封装到一个类中，这样使得我们每次只需要对类名进行操作即可，而无需在jQuery中使用css()方法编写大量的样式控制代码，使得我们的jQuery代码精简便于维护。

元素的宽度width() 和高度height()

在jQuery中，想要获取或者设置某一个元素的宽度和高度，我们可以使用css()方法来实现。但是jQuery为我们提供了更多方便快速的方法，使得我们更加灵活地操作元素的宽度和高度。

元素的宽度

盒模型

方法 宽度范围
width() width
innerWidth() width + padding
outerWidth() width + padding + border 
1
2
$().width()      //获取元素的宽度
$().width(n)     //设置元素的宽度，n是一个整数，表示npx

说明
width()方法和css(“width”)方法类似，不过width()方法获得的宽度值不带单位（仅仅是数字），而css(“width”)获取的宽度值带“px”作为单位

元素的高度
方法 高度范围
height() height
innerHeight() height + padding
outerHeight() height + padding + border 
1
2
$().height()      //获取元素的高度
$().height(n)     //设置元素的高度，n是一个整数，表示npx

元素的位置offset()和position()

  • offset()
    在jQuery中，我们可以使用offset()方法用于“获取”或“设置”元素相对于“当前文档”（也就是浏览器窗口）的偏移距离。
    1
    2
    $().offset().top;
    $().offset().left

说明

  • $().offset()返回的是一个坐标对象，该对象有2个属性：top和left。
  • $().offset().top表示获取元素相对于当前文档“顶部”的距离。

  • $().offset().left表示获取元素相对于当前文档“左部”的距离。
    这两种方法返回的都是一个数字（不带单位）。

  • position()
    在jQuery中，我们可以使用position()方法来“获取”或“设置”当前元素相对于其被定位的祖辈元素的偏移距离。

    1
    2
    $().position().top
    $().position().left

说明

  • $().position()返回的是一个坐标对象，该对象有2个属性：top和left。
  • $().position().top表示元素相对于被定位的祖辈元素的顶部的垂直距离。
  • $().position().left表示元素相对于被定位的祖辈元素的左部的水平距离。
    这两种方法返回的都是一个数字（不带单位）。

滚动条的距离scrollTop()和scrollLeft()

在jQuery中，我们可以使用scrollTop()来获取或设置元素相对于垂直滚动条顶部的距离，可以使用scrollLeft()来获取或设置元素相对于水平滚动条左部的距离。

1
2
3
4
$().scrollTop()       //获取滚动距离
$().scrollTop(value)  //设置滚动距离
$().scrollLeft()       //获取滚动距离
$().scrollLeft(value)  //设置滚动距离

jQuery操作DOM

在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。

创建节点

1
2
3
4
5
var e = $(html);
$().append(e);
//示例：ul元素内部的“末尾”添加一个li元素。
var $li = "<li></li>"; // 也可写成：var $li = $("<li></li>");
$("ul").append($li);

在这里，我们使用一个变量$li来存储$("<li></li>")。大家注意一个变量命名规范，对于jQuery创建的节点，我们变量命名都习惯使用“$”开头，以表示这是一个jQuery对象。

插入节点

在jQuery中，常见插入节点的方法共有4组：
（1）append()和appendTo()；
（2）prepend()和prependTo()；
（3）before()和insertBefore()；
（4）after()和insertAfter()；
其中（1）和（2）是“内部插入节点”，（3）和（4）是“外部插入节点”。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- append()表示在元素中插入内容，而appendTo()表示将内容插入“到（to）”元素中。
append()---向所选元素内部的末尾插入内容
appendTo()跟append()类似，作用都是在所选元素内部的“末尾”插入内容。但是两者的“使用方式”却是颠倒操作。  -->
$(A).append(B) //在A内部的“末尾”插入B。
$(A).appendTo(B) //将A插入B内部的“末尾”

<!-- prepend()表示向所选元素内部的“开始”插入节点。
prependTo()跟prepend()类似，作用都是在所选元素内部的“开始”插入内容。但是两者的“使用方式”却是颠倒操作。 -->
$(A).prepend(B) // 在A内部的“开始”插入B。
$(A).prependTo(B) // 将A插入B内部的“开始”。

<!-- before()表示在所选元素外部“之前”插入节点。
insertBefore()跟before()类似，作用也是在某个元素外部“之前”插入内容。但是两者的“使用方式”却是颠倒操作。 -->
$(A).before(B) // 在A外部“之前”插入B。
$(A).insertBefore(B) // 将A插入B外部“之前”。

<!-- after()表示在所选元素外部“之后”插入节点。
insertAfter()跟after()作用类似，作用都是在某个元素外部“之后”插入内容。但是两者的“使用方式”却是颠倒操作。 -->
$(A).after(B) // 在A外部“之后”插入B。
$(A).insertAfter(B) // 将A插入B外部"之后"。

//如果当前jQuery对象匹配的元素是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作。
<p id="n1">
    <span id="n2">span#n2</span>    
</p>
<p id="n3">
    <label id="n4" class="move">label#n4</label>
</p>
// 将n4插入到n2之后
// n4将从原位置上消失
$('#4').insertAfter( document.getElementById("n2") );

删除节点

在jQuery中，对于删除节点，我们有3种方法：
（1）remove()；
（2）detach()；
（3）empty()；
detach()方法和remove()方法作用相似，但是两者却有着本质上的区别。

  • remove()方法是“彻底”地删除元素。也就是说使用remove()方法，不仅元素会被删除，所绑定的事件都会被删除。
  • detach()方法是“半彻底”地删除元素，也就是说使用detach()方法，只有元素被删除，所绑定的事件并不会删除。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(A).remove() // 删除A节点
<!-- 选择ul元素下的第4个li元素并删除。 -->
$("ul li:eq(3)").remove();

<!-- 关于remove()方法，还有一点需要注意，就是这个方法可以返回一个值，返回值类型为删除的jQuery节点对象。也就是说，虽然这个节点被删除了，但是还可以通过返回值来再次使用这个对象。
这里我们将删除后的元素赋值给变量$li，然后再使用appendTo()方法添加到ul元素内部末尾。 -->
var $li = $("ul li:eq(3)").remove();
$($li).appendTo("ul");

$(A).detach() // 删除A节点

$(A).empty() // 清空元素A内部的所有节点。empty()方法仅仅删除后代节点，而会保留自身节点。
$("ul li:eq(3)").empty();

<!-- 在jQuery中，remove()、detach()和empty()这3种方法其实还可以接受一个参数，例如remove()方法语法如下（detach()和empty()也类似）： -->
$(A).remove(expression) //表示删除符合expression条件的A元素。当expression省略时，即$(A).remove()时，表示删除所有的A元素。

复制节点

$(A).clone()
说明：
其中clone()方法有一个布尔参数，默认值为false。
$(A).clone()表示仅仅将A节点复制，但不复制A节点所绑定的事件。
$(A).clone(true)表示将A节点复制，并且复制A节点所绑定的事件。

1
2
3
<!-- 复制所选的li元素，并且复制该li元素所绑定的事件。 -->
var $li = $("ul li:eq(3)").clone(true);
$($li).appendTo("ul");

替换节点

在jQuery中，如果我们想要替换节点，有2种方法：
（1）replaceWith()；
（2）replaceAll()；

1
2
3
4
5
6
7
8
9
10
11
12
<!-- replaceWith()方法可以将所选元素被替换成其他元素。 -->
$(A).replaceWith(B) //用B来替换A。
$(A).replaceAll(B) //用A来替换B。
<!-- 用a标签来替换strong标签 -->
$("strong").replaceWith('<a href="http://www.xifengxx.com" target="_blank">西风博客</a>');

<!-- replaceAll()和replaceWith()这两种方法是等价的，replaceAll()是颠倒了replaceWith()的使用方式罢了。 -->
两个代码是等价的。
$("strong").replaceWith('<a href="http://www.xifengxx.com" target="_blank">西风博客</a>');
$('<a href="http://www.xifengxx.com" target="_blank">西风博客</a>').replaceAll("strong");

//如果当前jQuery对象匹配的某个元素是页面上的元素，则该元素将从原来位置上消失，这相当于一个移动操作，而不是一个复制操作。

包裹节点

在jQuery中，如果我们想要将某个节点用其他标签包裹起来，共有3种方法：
（1）wrap()；
（2）wrapAll()；
（3）wrapInner()；
（4）unwrap();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//wrap()方法表示将所选元素使用某个标签包裹起来。
$(A).wrap(B)  //将A元素使用B元素包裹起来。
//如果B是多层嵌套的元素(例如<p><i></i></p>)，wrap()将从外往内检查每层嵌套的第一个节点。如果该节点没有子节点或者第一个子节点不是Element节点(比如文本节点、注释节点等)，就停止向内查找，直接在当前节点内部的末尾位置追加(append())当前匹配元素。

<span id="n6">多层嵌套2</span>
// 在n6元素外包裹嵌套的div元素：<div><p> <em><b></b></em>${#n5}</p></div>
// wrap()会从外层div依次往内部查找，以确定n5元素的所在位置
// wrap()将从外往内检查每层嵌套的第一个元素，如果该元素没有子元素或者第一个子元素不是Element节点，就停止向内查找
// 由于参数的'<p>'后面有空格(文本节点)，也就是说p元素的第一个子元素不是Element类型，因此直接将n6插入到p元素内部的末尾位置
$("#n6").wrap( '<div><p> <em><b></b></em></p></div>' );

//wrapAll()会将所有匹配的元素用一个元素来包裹
$(A).wrapAll(B)  //将A元素使用一个B元素包裹起来。
//案例：
<p id="n1">
    <span id="n2">[span#n2]</span>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
</p>
<span id="n5">[span#n5]</span>
// 在所有span元素外包裹单个em元素：<em class="all-span">{#n2}{#n5}{#n6}</em>
// 所有span元素会先移动到第一个span元素的位置，然后全部被em元素包裹起来
$("span").wrapAll('<em class="all-span"></em>');

//wrapInner()方法表示将所选元素“所有内部元素”使用某个标签包裹起来。
$(A).wrapInner(B) //将A元素“所有内部子元素”使用B元素包裹起来（不包括A本身）。

//unwrap()方法将移除当前匹配元素的父元素，但会保留其所有的后辈元素。
$(A).unwrap()

遍历节点

在jQuery中，我们可以使用each()方法来轻松实现元素的遍历操作。
$().each(callback)
参数callback是一个function函数。该函数可以接受一个形参index，此形参为遍历元素的序号（从0开始）。如果需要访问元素中的属性，可以借助形参index，然后配合this关键字来实现元素属性的获取和设置。
each()方法完整语法如下：

1
2
3
$().each(function(index){
    ……
})

坚持原创技术分享，您的支持将鼓励我继续创作！