【锋利的jQuery】学习笔记03

雨燕双飞 提交于 2020-03-16 10:36:42

第三章 jQuery中的DOM操作

一、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()

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

$("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()获取的是元素的实际高度,而且不带单位。

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!