JQuery学习笔记(3)JQuery中的DOM操作

JQuery中的DOM操作

引子

       DOM: Document Object Model，文档对象模型，一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。

1．DOM操作的分类

1.1 DOM Core（核心）

    适用任何适用标记语言编写出来的文档，如HTML、XML。

     JavaScript中的getElementId(), getElementsByTabName(),getAttribute()和setAttribute()等都是DOM Core的组成部分

1.2 HTML-DOM

    提供简明的记号来描述各种HTML元素的属性。    如：

     document.forms//

     element.src;//获取元素的src属性

1.3 CSS-DOM

    CSS-DOM是针对CSS的操作。在JavaScript中，CSS-DOM技术的主要作用是用来获取和设置style对象的各种属性。

2. JQuery中的DOM操作

         2.1 查找节点

                   -1. 查找元素节点

                            $(“ul li:eq(1)”);//获取ul下第2个li节点

                   -2.  查找属性节点

                            $(“p”).attr(“title”);//获取p节点的title属性

         2.2 创建节点

                   -1. 创建元素节点

                            //$(html)创建一个DOM对象，并包装成一个JQuery对象返回

                            var $liTag=$(“<li></li>”);                        

                            $(“ul”).append($liTag);//用append方法将新元素插入文档中

                   -2. 创建文本节点

                            var $liText=$(“<li>apple</li>”);

                            $(“ul”).append($liText);

                   -3. 创建属性节点—同文本节点一样，随元素节点一起创建

                            $(“<li title=’fruit’>apple</li>”)//

 

 

         2.3 插入节点

方法	描述	示例
A.append(B)	A的内部追加内容B (追加到内容后部)	HTML：<p>Hello </p> JQuery: $(“p”).append(“<b>World</b>”) Result: <p>Hello <b>World</b></p>
A.appendTo(B)	将A追加到B的内容后面	HTML:<p>Hello </p> JQuery: $(“<b>World</b>”).appendTo(“p”) Result: <p>Hello <b>World</b></p>
A.prepend(B)	在A的内容前面追加B	HTML：<p>World</p> JQuery: $(“p”).prepend(“<b>Hello </b>”) Result: <p></b>Hello </b>World</p>
A.prependTo(B)	将A追加到B内容的前面	HTML：<p>World</p> JQuery: $(“<b>Hello </b>”).prependTo(“p”) Result: <p></b>Hello </b>World</p>
A.after(B)	在A元素后面插入B	HTML：<p>Hello </p> JQuery: $(“p”).after(“<b>World</b>”) Result: <p>Hello</p><b>World></b>
A.insertAfter(B)	将A插入到B元素的后面	HTML：<p>Hello </p> JQuery: $(“<b>World</b>”).insertAfter(“p”) Result: <p>Hello</p><b>World></b>
A.before(B)	在A元素的前面插入B	HTML：<b>World</b> JQuery: $(“b”).before(“<p>Hello </p>”) Result: <p>Hello</p><b>World></b>
A.insertBefore(B)	将A插入到B元素的前面	HTML：<b>World</b> JQuery: $(“<p>Hello </p>”).insertBefore(“b”) Result: <p>Hello</p><b>World></b>

 

         2.4 删除节点

                   -1. remove()方法

                            $(“ul li:eq(1)”).remove();//删除ul下的第2个li元素

                   当某个节点用remove()方法删除后，该节点所包含的所有后代节点都将被删除。这个方法的返回值是被删除节点的一个引用，因此，可以在后面再使用这些元素。

                            $(“ul li”).remove(“li[title=apple]”);//传递参数选择性删除元素

                   -2. empty()方法

                            empty采用的是清空节点，它能清空元素内容及其所有的后代节点。元素本身的标签依据存在，不是严格的删除节点。

         2.5 复制节点

                   -1. clone()方法

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

                                     $(this).clone().appendTo("div ul");

                            })//当点击ul下的li元素时，将其clone到div下的ul下。

                   -2. clone(true)方法

                            参数true表示复制该节点的同时也复制该节点绑定的事件。

         2.6 替换节点

                   -1. replaceWith()

                            将所有匹配的元素替换为指定的HTML元素或者DOM元素

                            $(“ul li:eq(1)”).replaceWith(“<li><b>no fruit</b></li>”);

                   -2. replaceAll()

                            作用同replaceWith()，位置颠倒

                            $("<li><b>no fruit</b></li>").replaceAll("li");

         2.7 包裹节点

                   即将某个节点用其他标记包裹起来

                   -1. wrap()每个节点单独包裹

                            $(“strong”).wrap(“<b></b>”);//用<b>把strong元素包裹起来

                            如果b元素有文本，则strong被包裹在文本后面

                   -2. wrapAll()所有节点一起包裹，如果要包裹的节点没有在一起，会被移动到一起

                            $("li").wrapAll("<b>Bold</b>")

                   -3. wrapInner()

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

                            $("ul li:odd").wrapInner("<b></b>")

         2.8 属性操作

                   -1. attr()方法获取和设置属性

                            $(“ul li:eq(1)”).attr(“title”);//获取属性

                            $(“ul li:eq(1)”).attr(“title”,”Your title”);//设置属性

                            $(“p”).attr({“title”:”your title”,”name”:”yourname”});设置多个属性

                   -2. removeAttr()方法删除属性

                            $(“p”).removeAttr(“title”);

         2.9 样式操作

                   -1. 获取样式和设置样式

                            class也是一种属性，因此获取和设置class都可以通过attr()来完成

                            $(“p”).attr(“class”);//获取p元素的class

                            $(“p”).attr(“class”,”myclass”);//设置p元素的class

                   -2. addClass()追加样式

                            $(“p”).addClass(“myClass”);//相当于上一步的两部操作

                   -3. removeClass()移除样式

                            $(“p”).removeClass(“myClass”);//移除myClass

                            $(“p”).removeClass();//移除所有class

                   -4. toggleClass()切换样式

                            如果类名存在则删除它，如果类名不存在则添加它。

                            $(“p”).toggleClass(“myClass”);

                   -5. hasClass()判断是否含有某个样式

                            if($(“p”).hasClass(“myClass”))//等价于$(“p”).is(“.myClass”)JQuery内部原理

         2.10 设置和获取HTML、文本和值

                   -1. html()方法 类似于JavaScript中的innerHTML属性，用来读取或设置某个元素的HTML内容，可用于XHTML，但不能用于XML

                            $(“p”).html();//

                            $(“p”).html(“<b>html content</b>”);

                   -2. text()方法 ≈JavaScript.innerText，用来读取或设置某个元素的文本内容

                            $(“p”).text();//

                            $(“p”).text(“Hello world!”);

                            Note:1) JavaScript.innerText不支持FireFox；

                                      2) text()对XHTML和XML文档都有效

                   -3. val()方法 ≈JavaScript.value，用来设置和获取元素的值

                            $(“#address”).val();//获取value值

                            $(“#address”).val(“tiangjingchen@gmail.com”);//设置value值

 

         2.11 遍历节点

                   -1. children()方法，取得匹配元素的子元素集合。

                            $(“p”).children();//children只考虑子元素而不考虑后代元素

                   -2. next()方法，取得匹配元素后面紧邻的同辈元素

                            $(“p”).next();//取得的元素包括其后代元素

                   -3. prev()方法，取得匹配元素前面紧邻的同辈元素

                            $(“ul”).prev();

                   -4. siblings()方法，取得匹配元素前后的同辈元素

                            $(“ul”).siblings();

                   -5. closest()方法，取得最近的匹配元素

         2.11 CSS-DOM操作

                   即读取和设置style的各种属性。style属性很有用，但最大不足是无法通过它来提取到通过外部CSS设置的样式信息。通过JQuery却可以轻而易举的获取到。

                  -1. css()方法，获取和设置元素的属性

                            $(“p”).css();//获取p元素的属性

                            $(“p”).css(“color”,”red”);//设置p元素的样式颜色为红色

                            $(“p”).css({“fontSize”:”30px”,”backgroundColor”:”blue”});//设置多个属性值

                            Note:1). 如果值是数字，则自动转为像素值；

                                      2). css()方法中，如果属性中带有”-”符号，如font-size，background-color，如果设置这些属性值的时候不带引号，则要用驼峰式写法，如:

                            $(“p”).css(“fontSize”,”30px”);

如果带上引号，既可以写成”font-size”，也可以写成”fontSize”，建议带引号

                            $(“p”).css(“opacity”,”0.5”);//设置透明度

                   -2. height & width

                            //取得匹配元素的高度值(px)(类似$(“p”).css(“height”)，但css与样式有关)

                            $(“p”).height();     

                            $(“p”).width();

                            $(“p”).height(100);//设置高度为100px

                            $(“p”).width(“10em”);//设置宽度为10em

                   -3. offset()方法

                            获取元素在当前视窗的相对偏移，返回对象包含top和left两个属性。只对可见元素有效

                            var offset = $(“p”).offset();

                            var top = offset.top;

                            var left = offset.left;

                   -4. position()方法

                            获取元素相对于最近一个position样式设置为relative或absolute的祖父节点的偏移，返回对象包含top和left属性。

                   -5. scrollTop()方法和scrollLeft()方法

                            获取元素的滚动条距顶端的距离和距左侧的距离。