你的位置:首页 > Java教程

[Java教程]【锋利的jQuery】学习笔记03

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