jQuery笔记（四）-- 操作DOM

DOM操作可分为3个方面：DOM Core(核心)、HTML DOM和CSS DOM
（1）DOM Core不属于JavaScript语言范畴，任何一种支持DOM的程序设计语言都可以操作它，它的用于不限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，如XML。JavaScript中的createElement()、getElementById()和removeAttribute()等方法都是DOM Core的组成部分。
（2）HTML DOM的出现比DOM Core要早，它提供了一些更简明的记号来描述各种HTML元素的属性，如访问表单document.forms等。
（3）CSS DOM主要操作CSS。在JavaScript中，CSS DOM主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出不同的效果。
jQuery作为一种JavaScript库，继承并优化了JavaScript访问DOM对象的特性，是开发人员更加方便的操作DOM对象。

1、创建节点

在Web开发中，要创建动态网页内容，主要操作的节点包括元素、属性和文本。

  • 创建元素：DOM中的createElement()方法能够根据参数指定的标签名称创建一个新的元素，并返回新建元素的引用。在jQuery中，简化了DOM操作，直接使用构造函数$()创建元素对象。用法：$(html)，该函数能够根据参数html所传递的HTML字符串，创建一个DOM对象，并将该对象包装为jQuery对象返回。执行效率上还是原生的JavaScript创建效率高
  • 创建文本：DOM中的createTextNode()方法可以创建文本节点，jQuery中直接将文本字符串添加到元素标记字符串中即可，然后使用append()等方法将它们添加到DOM文档树中。执行效率上还是原生的JavaScript创建效率高
  • 创建属性：DOM中使用setAttribute(name,value)方法可以创建属性节点，并设置属性节点包含的值。如果元素中存在指定的属性，它的值将被刷新；如果不存在，则setAttribute()方法将为元素创建该属性并赋值，jQuery中直接使用即可
  • jQuery以一种简单的方法代替繁琐的操作，简化了Web开发的难度和门槛，但是由于jQuery是对JavaScript的封装，所以执行速度并没有得到优化，相反却影响了代码的执行效率。因此，在可能的情况下，建议混合使用JavaScript和jQuery方法，以提高代码执行效率
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        // 创建元素
        var $div1 = $("<div></div>");
        // 创建文本
        var $div2 = $("<div>我是新创建的节点</div>");
        // 创建属性
        var $div3 = $("<div title='节点'>我是新创建的节点</div>");
        $("body").append($div1);
        $("body").append($div2);
        $("body").append($div3);
    })
    </script>
    <title>创建节点</title>
</head>
<body>

</body>
</html>

2、插入节点

  • 内部插入
方法 说明
append() 向每个匹配的元素内部追加内容
appendTo() 把所有匹配的元素追加到另一个指定的元素集合中。实际上，该方法颠倒了append()的用法。例如$(A).append(B)与$(B).appendTo(A)是等价的
prepend() 向每个匹配的元素内部前置内容
prependTo() 把所有匹配的元素前置到另一个指定的元素集合中。实际上，该方法颠倒了prepend()的用法。例如$(A).prepend(B)与$(B).prependTo(A)是等价的
  • 外部插入
方法 说明
after() 在每个匹配的元素之后插入内容
before() 在每个匹配的元素之前插入内容
insertAfter() 把所有匹配的元素插入到另一个指定的元素集合后面
insertBefore() 把所有匹配的元素插入到另一个指定的元素集合前面

3、删除节点

方法 说明
remove() 从DOM中删除所有匹配的元素
empty() 清空元素包含的内容，不删除当前匹配元素
detach() 将匹配的元素从DOM中分离出来 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
//        $("button").click(function () {
//            $("p").empty();
//        })
        $("p").click(function () {
            $(this).toggleClass("off");
        });
        var p;
        $("button").click(function () {
            if (p) {
                p.appendTo("body");
                p = null;
            } else {
                p = $("p").detach();
            }
        });
    })
    </script>
    <title>删除节点</title>
    <style type="text/css">
        p {
            background: yellow;
            margin: 6px 0;
            cursor: pointer;
        }
        p.off {background: white;}
    </style>
</head>
<body>
<p>段落文本1</p>
<div>布局文本</div>
<p>段落文本2</p>
<button>清除段落文本</button>
</body>
</html>

4、复制节点

jQuery使用clone()方法复制节点，用法：clone([withDataAndEvents])、clone([withDataAndEvents], [deepWithDataAndEvents])。参数withDataAndEvents表示一个布尔值，可以是true也可以是false，用来设置是否复制事件处理函数等数据，默认是false。参数deepWithDataAndEvents也是一个布尔值，用来设置对事件处理函数和复制元素的所有子元素的数据是否应该被复制。默认情况下它的值为相匹配的第一个参数的值（默认值是false）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        $("b").click(function () {
            $(this).toggleClass("off");
        });
        $("b").clone(true).insertAfter("p");
    })
    </script>
    <title>复制节点</title>
    <style type="text/css">
        .off{background: yellow;}
    </style>
</head>
<body>
<b>加粗文本</b>
<p>段落文本</p>
</body>
</html>

5、替换节点

  • replaceWith()方法能够将所有匹配的元素替换成指定的HTML或DOM元素。用法：replaceWith(newContent)、replaceWith(function)
  • replaceAll()方法能够用匹配的元素替换掉所有指定参数匹配到的元素。用法：replaceAll(selector)
  • 上述两种方法实际上是一对相反的操作，$(A).replaceAll($B)等价于$B.replaceWith($A) 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function () {
       $("button").click(function () {
//            $(this).replaceWith("<div>" + $(this).text() + "</div>");
           $("<div>" + $(this).text() + "</div>").replaceAll(this);
       });
   })
   </script>
   <title>替换节点</title>
   <style type="text/css">
       button {display: block;margin: 3px; color: red; width: 200px;}
       div {color: red; border: solid 2px blue;
           width: 200px; margin: 3px; text-align: center;}
   </style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</body>
</html>

6、包裹元素

DOM没有提供包裹元素的方法，jQuery定义了3种包裹元素的方法：wrap()、wrapAll()和wrapInner()

  • 外包：wrap()方法能够在每个匹配的元素外层包上一个html元素。用法：wrap(wrappingElement)和wrap(wrappingFunction)
  • 内包：wrapInner()方法能够在匹配元素的内容外包裹一层结构。用法：wrapInner(wrappingElement)和wrapInner(wrappingFunction)
  • 总包：wrapAll()方法能够在所有匹配元素外包一层结构
  • 卸包：unwrap()方法与wrap()方法的功能相反，能够将匹配元素的父级元素删除，保留自身在原来的位置。用法：unwrap() 
   <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function () {
//        $("a").wrap("<ul><li></li></ul>");
//        $("a").wrap("<li></li>");
//        $("body").wrapInner("<ul></ul>");
//        $("li").wrapAll("<ul></ul>"); // 效果和上边的等效
       var i = 0, $a = $("a");
       $("button").click(function () {
           if ( i== 0) {
               $a.wrap("<li></li>");
               i = 1;
           } else  {
               $a.unwrap();
               i = 0;
           }
       })
   })
   </script>
   <title>包裹元素</title>
   <style type="text/css">
       li {border: solid 1px red; padding: 2px;}
       a {background: #FCF;}
       /*ul {border: solid 2px blue;}*/
   </style>
</head>
<body>
<a href="#">首页</a>
<a href="#">社区</a>
<a href="#">新闻</a>
<button>包装/卸包</button>
</body>
</html>

7、操作属性

jQuery和DOM都提供了属性的基本操作方法。属性操作包括设置属性、访问属性、删除属性和修改属性等。

  • 设置属性
    • prop()能够为匹配的元素设置一个或更多的属性。用法：prop(propertyName, value)、prop(map)、prop(propertyName, function(index, oldPropertyValue))
    • attr()也能够为匹配的元素设置一个或更多的属性。用法：attr(attributeName, value)、attr(map)、attr(attributeName, function(index, attr))
    • attr()和prop()方法都可以用来设置元素属性，但在用法上还是有一些细微差别。一般使用prop()方法获取表单属性值。使用prop()方法的时候，返回值是标准属性，如$('#checked').prop('disabled')，不会返回disabled或者空字符串，只会是true/false。
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function () {
       $("input[checked='checked']").prop({
           disabled: true
       });
//        $("img").attr("src", function () {
//            return "../resource/test_image.jpeg";
//        });
       $("img").attr({"src" : "../resource/test_image.jpeg"});
   })
   </script>
   <title>操作属性</title>
</head>
<body>
<input type="checkbox" checked="checked">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" checked="checked">
<img>
</body>
</html>
属性(Attribute/Property) attr() prop()
accessKey ✔️
align ✔️
class ✔️
contenteditable ✔️
draggable ✔️
href ✔️
id ✔️
label ✔️
rel ✔️
src ✔️
tabindex ✔️
title ✔️
type ✔️
width(if needed over width()) ✔️
async ✔️
autofocus ✔️
checked ✔️
loaction(IE window.loaction) ✔️
multiple ✔️
readOnly ✔️
selected ✔️
  • 访问属性：当为prop()和attr()方法传递两个参数时一般用来为指定的属性设置值，而当为这两个方法传递一个参数时，则表示读取指定属性的值
    • prop()方法只获得jQuery对象中第一个匹配元素的属性值。如果元素的一个属性没有设置或者没有匹配的元素，则该方法将返回undefined值。为了获得每个单独的元素的属性值，可以使用循环结构的jQuery.each()或map()方法来逐一读取
    • 根据W3C表单规范，checked属性是一个布尔属性，这意味着该属性值为布尔值，那么如果属性没有值，或者为空字符串值，这就为脚本中进行逻辑判断带来了麻烦。考虑到不同浏览器对其处理结果的不同，可以采取以下方式进行检测：
      • if(elem.checked)
      • if($(elem).prop("checked"))
      • if($(elem).is(":checked"))
      • 使用attr()进行检测，就容易出现问题
    • attr()方法只获取jQuery第一个匹配元素的属性值。如果要获取每个单独的元素的属性值，需要使用jQuery的each()或者map()方法做一个循环
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        $("#check").change(function () {
            var $input = $(this);
            $("p").html(".attr('checked') = <b>" + $input.attr('checked') + "</b><br>"
                    + ".prop('checked') = <b>" + $input.prop('checked') + "</b><br>"
                    + ".is(':checked') = <b>" + $input.is(':checked'));
        }).change();
        $("button").click(function () {
            $(this).next().removeAttr("disabled").focus().val("可编辑文本框")
        })
    })
    </script>
    <title>访问属性</title>
    <style type="text/css">
        b {color: red;}
    </style>
</head>
<body>
<input type="checkbox" id="check" checked="checked">
<label for="check">复选框</label>
<button>激活文本框</button>
<input type="text" disabled="disabled" value="只读文本框">
<p></p>
</body>
</html>
  • 删除属性
    • removeProp()方法主要用来删除由prop()方法设置的属性集
    • removeAttr()方法使用DOM原生的removeAttribute()方法，该方法的优点是能够直接被jQuery对象访问调用，而且具有良好的浏览器兼容性

8、操作类

jQuery定义了几个与类样式相关的操作方法。

  • 添加类样式：addClass()方法为元素追加样式，用法：addClass(className)、addClass(function(index, class))
  • 删除类样式：removeClass([className])、removeClass(function(index, class))
  • 切换类样式：演示切换在Web开发中比较常用，如折叠、开关、伸缩及Tab切换等动态效果。jQuery使用toggleClass()方法开/关定义类样式。用法：toggleClass(className)、toggleClass(className, switch)、toggleClass(function(incex, class), [switch])
  • 判断类样式：hasClass(className)方法判断元素是否包含指定的类样式
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function () {
       $("p:last").addClass("selected");
       $("p").eq(1).addClass("highlight");
       $("p:last").removeClass("selected");
       $("input").eq(0).click(function () {
           $("p:last").toggleClass("hidden");
           alert($("p:last").hasClass("hidden"));
       });

   })
   </script>
   <title>添加类样式</title>
   <style type="text/css">
       .selected {font-weight: bold;}
       .highlight {background: yellow;}
       .hidden {display: none;}
   </style>
</head>
<body>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
<input type="button" value="切换样式">
</body>
</html>

9、操作内容

jQuery提供多个方法操作文档内容，它们把HTML结构视为字符串，并以字符串的形式进行操作

  • 读写HTML字符串：html()方法以字符串的形式读写HTML文档结构。用法：html()、html(htmlString)、html(function(index, html))。当html()方法不包含参数时，表示以字符串形式读取指定节点下的多有HTML结构，当该方法包含参数的时候，表示向指定节点下写入HTML结构字符串，同时会覆盖该节点原来包含的所有内容。注意：html()方法实际上是对DOM的innerHTML属性包装，因此不支持XML文档
  • 读写文本：text()方法读写指定元素下包含的文本内容，这些文本内容主要是指文本节点包含的数据。用法：text(textString)、text(function(index, text))。当text()方法不包含参数时，表示以字符串形式读取指定节点下的所有文本内容。当text()方法包含参数时，表示向指定节点下写入文本字符串，同时会覆盖该节点原来包含的所有文本内容
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function () {
//        var s = $("div").html();
//        $("p").html(s);
       var s = $("div").text();
       $("p").text(s);
       $("input").focus(function () {
           if ($(this).val() == "请输入文本") $(this).val("");
       });
       $("input").blur(function () {
           if ($(this).val() == "") $(this).val("请输入文本");
       });
   })
   </script>
   <title>操作内容</title>
   <style type="text/css">
       div {border: solid 2px red;}
       p {border: solid 1px blue;}
   </style>
</head>
<body>
<div>
   <h1>标题</h1>
   <p>段落文本</p>
</div>
<form action="" method="get">
   <input type="text" value="请输入文本">
</form>
</body>
</html>
  • 读写值：val()方法用来读写指定表单对象包含的值。当val()不包含参数并调用时，表示将读取表单元素的值，当val()方法包含参数时，表示向指定表单元素写入值。用法：val()、val(value)、val(function(index, value))。val()方法在读写单选按钮、复选框、下拉菜单和列表框的值时，比较实用且操作速度快。对于val()方法来说，可以传递一个参数设置表单的显示值。由于下拉菜单和列表框，显示为每个选项的文本，而不是value属性值，故通过设置选项的显示值，可以决定应显示的项目。对于其他表单元素来说，必须制定value值方才有效。如果为元素指定多个值，则可以以数组的形式进行参数传递。
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function () {
       $("button").eq(0).click(function () {
           alert($("#s1").val() + $("#s2").val() + $("input").val() + $(":radio").val());
       });
       $("button").eq(1).click(function () {
           $("#s1").val("单选2");
           $("#s2").val(["多选2", "多选3"]);
           $("input").val(["6", "8"]);
       })
   })
   </script>
   <title>读写表单值</title>
</head>
<body>
<form action="" method="get">
   <select name="" id="s1">
       <option value="1" selected="selected">单选1</option>
       <option value="2">单选2</option>
   </select>
   <select name="" id="s2" size="3" multiple="multiple">
       <option value="3" selected="selected">多选1</option>
       <option value="4">多选2</option>
       <option value="5" selected="selected">多选3</option>
   </select>
   <input type="checkbox" value="6">复选框1
   <input type="checkbox" value="7" checked="checked">复选框2<br/>
   <input type="radio" value="8">单选按钮1
   <input type="radio" value="9" checked="checked">单选按钮2<br/><br/>
   <button>显示各个表单对象的值</button>
   <button>设置各个表单对象的值</button>
</form>
</body>
</html>

10、操作样式表

jQuery把所有与CSS样式相关的操作都封装到css()方法中。

  • 读写CSS样式：CSS样式存在三种形式：行内样式、文档内部样式和文档外部样式。行内样式以元素属性的形式存在，使用style属性即可读写，而文档内部样式和文档外部样式统一被视为外部样式，这些外部样式只能通过DOM的StyleSheets、CSS和CSS2模块提供的对象、方法和属性才能访问和操作。jQuery使用css()方法读取指定的样式，也能够为元素设置CSS样式。用法：css(propertyName)、css(propertyName, value)、css(propertyName, function(index, value))、css(map)。参数map表示属性名值对构成的对象，如：{name:value;}
    • css()方法能够读取指定元素的所有CSS样式，不管它是行内样式、文档内部样式还是文档外部样式
    • css()方法可以传入一个字符串形式的属性名。对于多单词构成的属性名，jQuery既可以解释连字符的CSS表示法，如background-color，也可以解释驼峰大小写形式的DOM表示法，如backgroundColor
    • 在设置样式属性时，css()方法能够接受的参数有两种：一种是为它传递一个单独的样式属性和值；应以重视为它传递一个由属性名值对构成的映射map，用户可以将这些jQuery映射看成是JavaScript对象直接量。
    • 如果属性值是数字值不需要加引号，而字符串值需要加引号。但是，当使用映射表示法时，如果属性名使用驼峰大小写形式的DOM表示法，则可以省略引号。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        $("p").html("color=" + $("p").css("color") + "<br/>font-weight=" + $("p").css("font-weight"));
        $("p").css("font-style","italic");
        $("p").css({color: "blue", fontWeight: "bold"});
        $("p").css({textDecoration:"line-through"});
        $("p").click(function () {
           $(this).css({
               "fontSize": function (index, value) {
                   return parseFloat(value) * 1.2;
               }
           });
        })
    })
    </script>
    <title>读写CSS样式</title>
    <style type="text/css">
        .red {color: red;}
    </style>
</head>
<body>
<p class="red" style="font-weight: bold">段落文本</p>
</body>
</html>
  • 绝对定位：在DOM中使用offsetLeft和offsetTop属性可以获取元素的最近偏移位置。但是不同的浏览器定义元素的偏移参照对象不同。例如：IE总是以父元素为参照对象进行偏移，而非IE浏览器会以最近非静态定位元素为参照对象进行偏移。所有浏览器都支持offsetParent属性，该属性能够自动识别当前元素偏移的参照对象。jQuery简化了定位操作，使用offset()方法可以获取匹配元素在当前视口的相对偏移。用法：offset()、offset(coordinates)、offset(function(index, coods))。参数coordinates表示一个对象，包含top和left属性，用整数指明元素的新顶部和左边坐标。
    • 如果调用offset()方法没有传递参数，则将返回一个对象，包含两个属性top和left，分别存储匹配元素的顶部偏移和左侧偏移。注意，该方法仅对可见元素有效
    • offset()方法允许用户重新设置元素的位置，这个元素的位置是相对于document对象的。如果对象原先的position样式属性是static(静态定位)的话，会被改成relative(相对定位)来实现重定位。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        var o1 = $("div").eq(0).offset(); // 获取第一个div元素的偏移信息
        $("div").eq(0).html("left: " + o1.left + "<br />top: " + o1.top);
        var o2 = $("div").eq(1).offset(); // 获取第二个div元素的偏移信息
        $("div").eq(1).html("left: " + o2.left + "<br />top: " + o2.top);
        var o3 = $("div").eq(2).offset(); // 获取第三个div元素的偏移信息
        $("div").eq(2).html("left: " + o3.left + "<br />top: " + o3.top);
    })
    </script>
    <title>绝对定位</title>
    <style type="text/css">
        body { padding: 0; margin: 0;} /*清除页边距*/
        div {height: 60px; width: 200px; border: 10px solid red;}
    </style>
</head>
<body>
<div>盒子1</div>
<div style="float: left">盒子2</div>
<div style="float: left">盒子3</div>
</body>
</html>
  • 相对定位：使用JavaScript获取指定元素的相对便宜位置设计思路：利用offsetParent属性获取最近的父级定位元素，然后判断该元素的位置，如果它是父元素，则可以直接读取当前元素的offsetLeft和offsetTop属性值，如果不是父元素，则可以获取当前元素的绝对偏移位置减去定位元素的绝对偏移位置，即可获得当前元素距离定位元素的偏移距离。jQuery使用position()方法可以获取匹配元素的相对偏移位置。用法：position()
    • position()方法的用法与offset()方法相同，都返回一个包含两个属性(top和left)的对象。注意：为精确计算结果，在补白、边框和填充属性上使用像素单位，该方法只对可见元素有效
    • 获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。offset parent指离钙元素最近的而且被定位过的祖先元素。position()方法获得该元素相对于offset parent的当前坐标。与offset()不同，offset()是获得钙元素相对于document的当前坐标，当把一个新元素放在同一个容器里边另一个元素附近时，用position()最好
    • jQuery还定义了scrollTop()和scrollLeft()两个方法分别获取匹配元素相对滚动条顶部和左侧的偏移值
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
  <script type="text/javascript">
      $(function () {
          var o1 = $("div").eq(0).position(); // 获取元素的相对偏移位置
          $("div").eq(0).html("left: " + o1.left + "<br />top: " + o1.top); // 显示相对偏移位置
          var o2 = $("div").eq(2).position(); // 获取第二个div元素的偏移信息
          $("div").eq(2).html("left: " + o2.left + "<br />top: " + o2.top);
      })
  </script>
  <title>相对定位</title>
  <style type="text/css">
      body { padding: 0; margin: 0;} /*清除页边距*/
      div {height: 60px; width: 200px; border: 10px solid red;}
  </style>
</head>
<body>
<div>盒子1</div>
<div style="position: relative; float: right; width: 300px; height: 100px; border-color: blue;">
  <div>盒子2</div>
</div>
</body>
</html>
  • 控制大小：jQuery使用width()和height()方法读写元素的大小。用法：width()、width(value)、width(function(index, value))、height()、height(value)、height(function(index, value))
    • width()和height()方法在没有传递参数的时候，表示读取元素的宽度和高度，返回值的单位是像素。也可以传递参数设置元素的宽和高，如果直接传递一个数值，则默认单位是像素px，也可以以字符串形式传递值和单位
    • 除了width()和height()方法，jQuery还定义了innerHeight()、innerWidth()、outerHeight()、outerWidth()方法，这些方法实际上是在width()和height()方法基础上，计算了元素的边框或补白。其中outerHeight()、outerWidth()方法能够返回元素总宽和总高(包括宽高、补白和边框宽度)，innerHeight()、innerWidth()方法能够返回元素的内容宽度和高度(包括宽高和补白）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        $("div").html("innerHeight=" + $("div").innerHeight() + "<br/>innerWidth=" + $("div").innerWidth() + "<br/>outerHeight=" + $("div").outerHeight() + "<br/>outerWidth=" + $("div").outerWidth());
    })
    </script>
    <title>控制大小</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 50px;
            margin: 50px;
            padding: 50px;
            border: solid 50px red;}
    </style>
</head>
<body>
<div style="border: solid 10px red;">盒子</div>
</body>
</html>

11、遍历文档

jQuery使用children()、next()、prev()、parent()方法遍历文档中任何元素。其中children()方法获取当前元素包含的所有子元素，next()方法获取当前元素相邻的而下一个同级元素，prev()方法获取当前元素相邻的上一个同级元素，parent()犯法获取当前元素的父元素，这些方法返回值都是jQuery对象，而不是DOM集合或对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        var $body = $("body"); // 获取body元素
        var li = $body.children().eq(2).children()[0]; //利用children()方法，遍历到第一个li元素
        $(li).text("第一句").next().text("第二句").next().text("第三句"); // 利用next()方法，遍历li元素，并修改每个li元素的文本内容
    })
    </script>
    <title>遍历文档</title>
</head>
<body>
<h1>《望岳》</h1>
<p>杜甫</p>
<ul>
    <li>岱宗夫如何，齐鲁青未了。</li>
    <li>造化钟神秀，阴阳割昏晓。</li>
    <li>荡胸生层云，决眦入归鸟。</li>
    <li>会当凌绝顶，一览众山小。</li>
</ul>

</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,425评论 4赞 361
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,058评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,186评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,848评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,249评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,554评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,830评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,536评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,239评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,346评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,999评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2赞 271
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2赞 267

推荐阅读更多精彩内容

  • jQuery基础(1)
    一、样式篇 第1章 初识jQuery （1）环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,277评论 0赞 44
  • jQuery笔记总结篇
    原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,581评论 18赞 503
  • jQuery基础——样式篇
    第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,540评论 0赞 11
  • jQuery基础入门
    jQuery基础（一）——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 1,046评论 0赞 8
  • 病去如抽丝
    如果说喜欢一个人是一种病， 病去如抽丝， 喝完这瓶牛栏山小二， 我也该病愈了。
    云晓拉阅读 219评论 1赞 0