jquery学习笔记---Dom操作

时间：2022-01-08 03:34:14

一、DOM操作的分类

DOM(document object model)是一种与浏览器、平台、语言无关的接口，使用该接口可以访问页面中的·所有组件。DOM的操作可以分为DOM Core、HTML-DOM和CSS-DOM。

  1. DOM Core：任意支持DOM的程序设计语言都可以使用。JS中getElementById(),getelementByTagName(),getAttribute()和setAttribute()都是它的组成部分。
  2. HTML-DOM:提供了一些更加简明的记号描述各种Html元素，只能用来处理web文档。eg:document.forms
  3. CSS-DOM:是针对CSS的操作，用于获取和设置style对象的各种属性。eg:element.style.color

二、jQueryDOM操作——节点操作

  • 查找节点

  1. 查找元素节点

可以直接使用选择器进行查找。

1 var $li=$("ul li:eq(1)");   //获取ul中的第二个li节点

2 var li_text=$li.text();     //获取第二个li元素节点的文本内容

3 alert(li_text);              //打印文本内容

2.查找属性节点

找到元素节点后，使用attr()方法获取设置元素的属性。attr()方法传入参数为一个时为获取该属性的值，传入2个参数是为为该属性设置值。

1 var $para=$("p");                   //获取p节点

2 var pra_ti=$para.attr("class");   //获取p元素节点的class属性值

3 $para.attr("class","para");       //将p元素节点的class属性值设为para

  • 创建节点

  1. 创建元素节点

创建元素节点需要两步：1）创建一个新的元素节点 2）将该节点插入文档。$(html)方法可以根据传入的HTML标记字符串，创建一个DOM对象，并将该DOM对象包装成一个jQuery对象后返回。

PS：动态创建的新元素节点默认保存在内存中，不会被自动添加到文档中，需要使用其他方法将其插入文档。

1 var $li=$("<li>我是新加的li节点</li>");   //创建一个新的元素节点

2 $("ul").append($li);                      //添加到ul使其在网页中显示

2.创建文本节点

创建文本节点也是使用$(html)方法，只需要将要添加的文本内容写入html字符串中即可。（无论html代码多复杂都可以使用$(html)方法）

3.创建属性节点

创建属性节点也是在创建元素节点时一起创建。

var $li=$("<li class='new_li'>我是新加的li节点</li>");   //创建一个新的li元素 包括元素节点、文本节点、属性节点

$("ul").append($li);                      //添加到ul使其在网页中显示

  • 插入节点

方法 描述 实例
append() 向元素内部追加内容

HTML代码：

<p>我想说：</p>

jQuery代码：

$("p").apppend("<b>你好</b>");

结果：

<p>我想说：<b>你好</b></p>
appendTo() 将元素加到指定的元素内部，$(A).sppendTo(B)是将A追加到B中

HTML代码：

<p>我想说：</p>

jQuery代码：

$("<b>你好</b>").apppendTo("p");

结果：

<p>我想说：<b>你好</b></p>
prepend() 向元素内部的前面加入内容

HTML代码：

<p>我想说：</p>

jQuery代码：

$("p").prepend("<b>你好</b>");

结果：

<p><b>你好</b>我想说：</p>
prependTo() 将元素加到指定元素内部的前面，$(A).prependTo(B)是·将A插到B中的前面

HTML代码：

<p>我想说：</p>

jQuery代码：

$("<b>你好</b>").prependTo("p");

结果：

<p><b>你好</b>我想说：</p>
after() 向元素后追加内容

HTML代码：

<p>我想说：</p>

jQuery代码：

$("p").after("<b>你好</b>");

结果：

<p>我想说：</p><b>你好</b>
insertAfter() 将元素追加到指定元素后，$(A).insertAfter(B)是将A追加到B后面

HTML代码：

<p>我想说：</p>

jQuery代码：

$("<b>你好</b>").insertAfter("p");

结果：

<p>我想说：</p><b>你好</b>
before() 向元素前追加内容

HTML代码：

<p>我想说：</p>

jQuery代码：

$("p").before("<b>你好</b>");

结果：

<b>你好</b><p>我想说：</p>
insertBefore() 将元素加到指定元素内部的前面，$(A).insertBefore(B)是·将A插到B前

HTML代码：

<p>我想说：</p>

jQuery代码：

$("<b>你好</b>").insertBefore("p");

结果：

<b>你好</b><p>我想说：</p>

  • 删除节点

  1. remove()方法

从DOM中删除所有匹配元素。使用remove()方法删除后，该节点所包含的所有后代元素将同时被删除。该方法返回值为一个指向已被删除节点的引用，可以在以后使用这些元素。

1 var $li=$("ul li:eq(1)").remove();   //获取第二个li节点后把它从网页删除

2 $li.appendTo("ul");                   //把删除的元素重新加入ul

这段代码其实等效于：

$("ul li:eq(1)").appendTo("ul");   //appendTo()方法也可以用来移动元素，移动元素时首先从文档上删除此元素，然后将该元素插入文档的指定节点

remove()方法也可以传递参数进行选择删除。eg:  $("ul li").remove("li[title!=菠萝]")

2.detach()方法

detach()与 remove()一样，也是从DOM中删除匹配的元素。但是这个方法不会把匹配的元素从jQuery对象中删除，所有绑定的事件、附加的数据都会被保留。

1 $("ul li").click(function(){

2     alert($(this).html());

3 });

4 var $li=$("ul li:eq( 1)").detach();  //删除元素

5 $li.appendTo("ul");                   //重新追加此元素，发现之前绑定的事件还在，如果使用remove()删除元素，之前绑定的事件将失效

3.empty()方法

严格来讲，他并不是删除节点的方法，而是清空节点，它能元素中的所有后代节点。

$("ul li:eq(1)").empty();   //获取第二个li节点后，清空此元素里的内容

  • 复制节点

$("ul li").click(function(){

    $(this).clone().appendTo("ul");  //复制当前点击的节点并追加到ul中

});

clone()方法复制节点后，也是被保存在内存中，需要追加到文档。被复制的元素不具有任何行为，想要它也具有点击事件，可以：

$(this).clone(true).appendTo("body");  //传入参数true

在clone()方法中传入参数true，可以复制元素的同时复制元素中的绑定事件。

  • 替换节点

将所有匹配的元素都替换成指定的html或者DOM元素。

$("p").replaceWith("<strong>你不喜欢的水果是？</strong>");

2.replaceAll();

与replayWith()方法作用相同，只是操作颠倒。

$("<strong>你喜欢的水果是？</strong>").replayceAll("p");

  • 包裹节点

  1. wrap()

将某个节点用其它标记包裹，不会破坏原始文档的语义，将所有的元素进行单独的包裹。

$(“strong”).wrap("<b></b>");   //用b标签把strong元素包裹

得到的HTML结果：

<b><strong>你最喜欢的水贵是/</strong></b>

<b><strong>你最喜欢的水贵是/</strong></b>

<b><strong>你最喜欢的水贵是/</strong></b>

2. wrapAll()

将匹配的元素用一个元素包裹。

$("strong").wrapAll("<b></b>");

得到的HTML结果：

<b>

      <strong>你最喜欢的水贵是/</strong>

      <strong>你最喜欢的水贵是/</strong>

      <strong>你最喜欢的水贵是/</strong>

</b>

3. wrapInner()

将每一个匹配的元素的子内容（包括文本节点）用其它结构化标记包裹起来。

1
$("strong").wrapInner("<b></b>");

得到的HTML结果：

<strong><b>你最喜欢的水贵是?</b></strong>

三、jQueryDOM操作——属性操作

  • 获取属性和设置属性

获取属性只需要给attr()传入一个参数，即属性名称。如果要设置属性值传入两个参数即属性名称和对应值。

var p_txt=$("p").attr("class");   //获取p的节点属性class

$("p").attr("class","para");       //设置p的节点属性class为para

$("p").attr({"class":"para","title":"test"});  //一次设置多个属性

  • 删除属性

使用removeAttr()方法删除。

四、jQueryDOM操作——样式操作

  • 获取和设置样式

可以使用attr()方法获取和设置样式。

  • 追加样式

使用addClass()方法追加样式。如果一个元素被添加了多个class值，相当于合并样式。如果有不同的class设定了同一样式属性，后者覆盖前者。

  • 移除样式

使用removeClass()从匹配元素中删除全部或指定class。可以以空格的方式删除多个class名。removeClass()不带参数时为删除所有class。

  • 切换样式

使用toggle()方法实现类似元素如果是隐藏则显示元素，如果元素是显示则隐藏元素的重复切换。toggleClass()实现添加、删除类名的重复切换。

  • 判断是否含有某个样式

hasClass()判断是否含有某个class，如果有返回true，没有返回false。

五、jQueryDOM操作——设置获取HTML、文本和值

  1. html()  读取或设置某个元素的HTML内容。

  2. text()  读取或设置某个元素的文本内容。
  3. val()    设置和获取元素的值，如果元素为多选则返回包含有选择的值的数组。

也可以使用val()方法使select、checkbox、radio相应选项被选中。eg：  $(":checkbox").val(["check2","check3"]);

五、jQueryDOM操作——遍历节点

  1. children()    获取匹配元素的子元素集合，只考虑子元素不考虑其他后代元素。
  2. next()        获取匹配元素后面紧邻的同辈元素。
  3. prev()        获取匹配元素前面紧邻的同辈元素。
  4. siblings()    获取匹配元素前后所有的同辈元素。
  5. closest()     取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配的元素。如果什么都没有则返回一个空的jQuery对象。
  6. parent()、parents()、closest()
方法 描述 示例
parent() 获取每个匹配元素的父级元素

$(".item-1").parent().css("color","red");

从指定类型的直接父节点开始查找。返回一个元素节点。
parents() 获取每个匹配元素的祖先元素

$(".item-1").parents().css("color","red");

从指定类型的直接父节点开始查找，找到第一个父节点继续查找。返回一个多个父节点。
closest() 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素

$(".item-1").closest().css("color","red");

从包含自身的节点开始查找。返回匹配的第一个元素节点。

六、CSS DOM操作

CSSDOM操作就是读取和设置style对象的各种属性。可以通过css()方法获取元素的样式属性，无论该属性是外部css还是内联css都可以获取到。该方法中如果传入的值是数字将会被自动转化成像素值。

当你想获取元素高度时可以使用$("p").css("height")获取，同时jQuery也分装了专门的方法来获取元素的宽高。$("p").height()也可以去的元素的高度。

PS:  css()获取到的高度值与设置的值有关，可能会得到auto。而height()获取的是元素的实际高度，而且不带单位。

相关文章