Jquery基础之DOM操做

　Dom是Document Object Model的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口，使用该接口能够轻松访问页面中全部的标准组件。DOM操做能够分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。

　　每个网页均可以用DOM表示出来，每一个DOM均可以看做是一棵DOM树。下面的html页面结构能够构建出一棵DOM树，代码：

　　

View Code

  　构建出的DOM树以下：

　　

　　JQuery中的DOM操做主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操做】。下面的DOM操做将围绕上面的DOM树进行学习JQueryDOM操做。

　　1、查--查找DOM节点

　　　　查找节点很是容易，使用选择器就能轻松完成各类查找工做。例：查找元素节点p返回p内的文本内容$("p").text();例：查找元素节点p的属性返回属性名称对应的属性值$("p").attr("title"),返回p的属性title的值。

　　2、建--新建DOM节点

　　　　一、建立元素节点

　　　　　　建立元素节点而且把节点做为<ul>元素的子节点添加到DOM节点树上。先建立元素点，建立元素节点使用Jquery的工厂函数$()来完成，格式以下：$(html),该方法会根据传入的html字符串返回一个DOM对象，并将DOM对象包装成一个JQuery对象后返回。建立一个元素节点JQuery代码以下：

　　　　　　$li1=$("<li></li>")

　　　　　　代码返回$li1就是一个由DOM对象包装成的JQuery对象。把新建节点添加到DOM树中JQuery代码以下：

　　　　　　$("ul").append($li1); 

　　　　　　添加后页面中只能看到<li>元素默认的"·",因为没有为节点添加文本因此只显示默认符号，下面建立文本节点。

　　　　　　PS:append()方法是添加DOM节点方法详见增--添加DOM节点。 

　　　　二、建立文本节点

　　　　　　使用JQuery的工厂函数$()一样可以建立文本节点，建立文本节点的JQuery代码以下：

　　　　　　$li2=$("<li>苹果</li>");

　　　　　　代码返回$li2就是一个由DOM对象包装成JQuery对象，把新建的文本节点添加到DOM树中JQuery代码以下：

　　　　　　$("ul").append($li2);

　　　　　　添加后页面中能看到"·苹果"，右键查看页面源码发现新加的文本节点没有title属性。下面方法建立带属性的节点。

　　　　三、建立属性节点

　　　　　　建立属性节点同元素节点、文本节点同样使用JQuery的工厂函数完成。建立属性节点的JQuery代码以下：

　　　　　　$li3=$("<li title='榴莲'>榴莲</li>");　　　　　　　

　　　　  　代码返回$li3也是一个由DOM对象包装成JQuery对象，把新建的属性节点添加到DOM树中JQuery代码以下：

　　　　　　$("ul").append($li3);

　　　　　　添加后页面中能看到"·榴莲"，右键查看页面源码发现新加的属性节点有title='榴莲'属性。

　　　3、增--添加DOM节点

　　　　　　动态新建元素不添加到文档中没有实际意义，将新建的节点插入到文档中有多个方法，以下：append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。

　　　　一、append()方法

　　　　　　append()方法向匹配的元素内部追加内容，　方法以下：$("target").append(element);例：

　　　　　　$("ul").append("<li title='香蕉'>香蕉</li>");

　　　　　　该方法查找ul元素，而后向ul中添加新建的li元素。

　　　　二、appendTo()方法

　　　　　　appendTo()方法将全部匹配的元素追加到指定的元素中，该方法是append()方法的颠倒[操做主题的颠倒并不是操做结果]操做。方法以下：$(element).appendTo(target);例：

　　　　　　 $("<li title='荔枝'>荔枝<li>").appendTo("ul");

　　　　　　该方法新建元素li，而后把li添加到查找到的ul元素中。

　　　　三、prepend()方法

　　　　　　prepend()方法将每匹配的元素内部前置要添加的元素，方法以下：$(target).prepend(element);例：

　　　　　　$("ul").prepend("<li title='芒果'>芒果</li>")

　　　　　　该方法将查找元素ul而后将新建的li元素做为ul子节点，且做为ul的第一个子节点插入到ul中。

　　　　四、prependTo()方法

　　　　　　prependTo()方法将元素添加到每个匹配的元素内部前置，方法以下：$(element).prependTo();例：

　　　　　　$("<li title='西瓜’>西瓜</li>").prependTo("ul");

　　　　　　该方法将新建的元素li插入到查找到的ul元素中做为ul的第一个子节元素。

　　　　五、after()方法

　　　　　　after()方法向匹配的元素后面添加元素，新添加的元素作为目标元素后的紧邻的兄弟元素。方法以下：$(target).after(element);例:

　　　　　　$("p").after("<span>新加段新加段新加段新加段新加段</span>");

　　　　　　方法将查找节点p，而后把新建的元素添加到span节点后面作为p的兄弟节点。

　　　　六、insertAfter()方法

　　　　　　insertAfter()方法将新建的元素插入到查找到的目标元素后，作为目标元素的兄弟节点。方法以下：$(element).insertAfter(target);例:

　　　　　　$("<p>insertAfter操做</p>").insertAfter("span");

　　　　　　方法将新建的p元素添加到查找到目标元素span后面，作为目标元素后面的第一个兄弟节点。

　　　　七、before()方法

　　　　　　before()方法在每个匹配的元素以前插入，作为匹配元素的前一个兄弟节点。方法以下:$(target).before(element);例：

　　　　　　$("p").before("<span>下面是个段落</span>");

　　　　　　before方法查找每一个元素p，将新建的span元素插入到元素p以前作为p的前一个兄弟节点。

　　　　八、insertBefore()方法

　　　　　　insertBefore()方法将新建元素添加到目标元素前，作为目标元素的前一个兄弟节点，方法以下:$(element).insertBefore(target);例:

　　　　　　$("<a href='#'>锚</a>").insertBefore("ul");

　　　　　　insertBefore()新建a元素，将新建的a元素添加到元素ul前，作为ul的前一个兄弟节点。

　　　　　　增长元素的方法前四个是添加到元素内部，后四个是添加到元素外部的操做，有这些方法能够完成任何形式的元素添加。

　  　4、删--删除DOM节点操做

　　　　　　若是想要删除文档中的某个元素JQuery提供了两种删除节点的方法：remove()和empty();

　　　　一、remove()方法

　　　　　　remove()方法删除全部匹配的元素，传入的参数用于筛选元素，该方法能删除元素中的全部子节点，当匹配的节点及后代被删除后，该方法返回值是指向被删除节点的引用，所以可使用该引用，再使用这些被删除的元素。方法以下：$(element).remove();例:

　　　　　　$span=$("span").remove();

　　　　　　$span.insertAfter("ul");

　　　　　　该示例中先删除全部的span元素，把删除后的元素使用$span接收，把删除后的元素添加到ul后面作为ul的兄弟节点。该操做至关于将全部的span元素以及后代元素移到ul后面。

　　　　二、empty()方法。

　　　　　　empty()方法严格来说并非删除元素，该方法只是清空节点，它能清空元素中的全部子节点。方法以下:$(element).empty();例：

　　　　　　$("ul li:eq(0)").empty();

　　　　　　该示例使用empty方法清空ul中第一个li的文本值。只能下li标签默认符号”·“。

　　5、改--修改DOM节点操做

　　　　　　　修改文档中的元素节点可使用多种方法:复制节点、替换节点、包裹节点。

　　　　一、复制节点$(element).clone()

　　　　　　　复制节点方法可以复制节点元素，而且可以根据参数决定是否复制节点元素的行为。方法以下:$(element).clone(true);例：

　　　　　　　　$("ul li:eq(0)").clone(true);

　　　　　　　该方法复制ul的第一个li元素，true参数决定复制元素时也复制元素行为，当不复制行为时没有参数。

　　　　二、替换节点$(element).repalcewith()、$(element).repalceAll()

　　　　　　　替换节点方法可以替换某个节点，有两种形式形式实现：replaceWith()和replaceAll().使用replaceWith方法使用后面的元素替换前面的元素，replaceAll方法使用前面的元素替换后面的元素，方法以下：$(oldelement).replaceWith(newelement);$(newelement).repalceAll(oldelement);例：　　　　　　　　　　　　　$("p").replaceWith("<strong>我要留下</strong>");该方法使用strong元素替换p元素。

　　　　　　　　$("<h3>替换strong</h3>").repalceAll("strong");该例使用h3元素替换全部的strong元素。

　　　　三、包裹节点$(element).wrap()、$(element).wrapAll()、$(element).wrapInner()

　　　　　　　包裹节点方法使用其余标记包裹目标元素从而改变元素的显示形式等，而且该操做不会破坏原始文档的词义。包裹节点有三种实现形式：wrap();wrapAll();wrapInner();

　　　　　　　wrap()方法以下：$(dstelement).wrap(tag);例：

　　　　　　　　$("p").wrap("<b></b>");该示例方法使用b标签包裹全部的p元素每一个元素都使用b标签包裹。

　　　　　　　wrapAll()方法以下：$(dstelement).wrapAll(tag);例：

　　　　　　　　$("p").wrapAll("<b></b>");访示例方法使用b标签包裹全部的p元素，全部的p元素标签用一个b标签包裹。

　　　　　　　　wrapInner()方法以下：$(dstelement).wrapInner(tag);例：

　　　　　　　　$("strong").wrapInner("<b></b>");该示例使用b标签包裹每一个一strong元素的子元素。

　　　　Dom元素的其余操做:属性操做、样式操做、设置和获取HTML,文本和值、遍历节点操做、Css-Dom操做。

　　　　一、属性操做attr()和removeAttr()

　　　　　　attr()方法可以获取元素属性，也能可以设置元素属性。方法以下，当attr(para1)方法有个参数时候用于得到当前元素的para1的属性值，当attr(para1,attrValue)有两个参数时候设置当前元素的属性名为para1的属性值为attrValue;例：

　　　　　　 $("p").attr("title");该示例用于得到p元素的title属性值。

　　　　　　 $("p").attr("title","你最喜欢的水果");该示例设置p元素的title属性值为"你最喜欢的水果";

　　　　　　若是一次设置多个属性值可使用“名/值”对形式，例：

　　　　　　 $("p").attr({"title":"你最喜欢的水果","name":"水果"})。该示例一次设置两个属性值。

　　　　　　removeAttr()方法用于删除特定的属性，方法是在参数中指定属性名。例：

　　　　　　$("p").removeAttr("name");该方法就是移除p元素的name属性。

　　　　 二、样式操做addClass()、removeClass()、toggleClass()和hasClass()

　　　　　　添加样式addClass()方法，使用该方法对目标元素添加相应的样式，方法以下：$(element).addClass();例：

　　　　　　 $("p").addClass("ul");该示例设置元素p的样式为ul。

　　　　　　移除样式removeClass()方法，使用该方法移除目标元素的指定样式，方法以下：$(element).removeClass();例：

　　　　　　 $("p").removeClass("ul");该救命去除掉p元素的ul类样式。

　　　　　　切换样式toggleClass()方法，使用该方法切换目标元素的样式，方法以下：$(element).toggleClass();例：

　　　　　　$("p").toggleClass("ul");该方法来回切换【添加删除实现切换】元素p的样式ul.

　　　　　　判断元素是否使用了样式$(element).hasClass(),方法以下：$(element).hasClass(class);例：

　　　　　　alert($("p").hasClass("ul"));打印出p元素是否有ul样式。

　　　　　　PS:addClass()和attr()方法设置样式的不一样，attr方法把元素的属性名对应的属性值设为方法中的参数值，addClass()则把属性值

添加到属性名对应的属性值中。例：已有元素<p class='class1'>元素样式</p>,使用attr()和addClass()分别添加新样式。

　　　　　　$("p").attr("class","another").结果是<p class='another'>元素样式</>

　　　　　　$("p").addClass("class","another")结果是<p class='class1 another'>元素样式</p>

　　　　三、设置和获取HTML【html()】,文本【text()】和值【val()】

　　　　　　html()方法得到或设置某个元素的html元素。方法以下:$(selector).html();例:

　　　　　　 $("p").html();该示例得到元素p的html内容。

　　　　　　$("p").html("<strong>添加html内容</strong>");该示例设置p的html内容为”<strong>添加html内容</strong>“;

　　　　　　PS：该方法能够用于XHTML文档，不能用于XML文档。

　　　　　　text()方法得到或设置某个元素的文本值。方法以下:$(selecotr).text();例：

　　　　　　$("p").text();该示例得到元素p的text文本内容。

　　　　　　$("p").text("从新设置的文本内容");该示例设置元素p的text文本为"从新设置的文本内容";

　　　　　　PS:该方法对html和XML文档都适用。

　　　　　　val()方法得到或设置某个元素的值，若是元素值是多选则以数组形式返回，方法以下：$(selector).val();例:文本元素 

<input type="text" id="userName" value="请输入用户名" />

　　　　　　$("#userName").val();得到input元素的值。

　　　　　　$("#userName").val('响马');设置input元素的值为'响马'。

　　　　　　val()方法的不只能操做input，最重要的一个用途用于select【下拉列表框】、checkbox【多选框】、radio【单选框】。例：在下拉框下的多选赋值应用<select id="fruits" multiple="multiple"><option>苹果</option><option>香蕉</option><option>西瓜</option></select>

　　　　　　$("#fruits").val(['苹果','香蕉']);该示例使select中苹果和香蕉两项被选中。

　　　   四、遍历节点操做children()、next()、prev()、siblings()和closest()

　　　　　　children()方法用于取得匹配元素的子元素集合，只匹配子元素不考虑任何后代元素。方法以下：$(selector).children();例：

　　　　　　　$("$("body").children().length;该示例得到body元素的子元素个数；

　　　　　　next()方法用于匹配元素的下一个兄弟节点，方法以下:$(selector).next();例：

　　　　　　　$("p").next().html();该示例得到p元素的下一个兄弟节点的html内容。

　　　　　　prev()方法用于匹配元素的上一个兄弟节点，方法以下：$(selector).prev();例：

　　　　　　　$("ul").prev().text();该示例得到ul元素的上一个兄弟节点的文本内容。

　　　　　　siblings方法()用于匹配目标元素的全部兄弟元素，方法以下：$(selector).siblings();例：

　　　　　　 $("p").slibings();示例得到p元素的全部兄弟节点元素。

　　　　　　closest()方法()用来取得最近的匹配元素，首先检查当前元素是否匹配若是匹配则直接返回，不然继续向上查找父元素中符合条件的元素返回，若是没有匹配的元素则返回空JQuery对象。

　　　　五、CSS-Dom操做css()、offset()、position()、scrollTop()和scrollLeft()

　　　　　　css()方法用于获取、设置元素的一个或多个属性。方法以下：$(selector).css();例：

　　　　　　　$("p").css("color","red");该示例用于设置元素的颜色属性为红色;

　　　　　　   $("p").css("color")该示例用于得到元素的color样式值;

　　　　　　　$("p").css({"font-size":"30px","backgroundColor","#888888"});该示例用于设置元素的多个样式。

　　　　　　offset()方法用于获取元素相对当前窗体的偏移量，其返回对象包括两个属性：top和left。方法以下：$(selector).offset()

　　　　　　　var offset= $("p").offset(); var left=offset.left;var top=offset.top;该示例用于得到元素p的偏移量。

　　　　　　PS:offset()只对可见元素有效。

　　　　　　position()方法用于获取元素于最近的个position样式属性设置为relative或者absolute的祖交节点的相对偏移量。方法以下：$(selector).position();例：

　　　　　　　var postion = $("p").positon();var left=positon.left;var top=positon.top;该示例用于得到元素p的位置。

　　　　　　scrollTop()和scrollLeft()方法用于获取元素的滚动条距顶端的距离和距左侧的距离。方法以下:$(selector).scrollTop();$(selector).scrollLeft();例：

　　　　　　　var scrollTop=$("p").scrollTop();var scrollLeft=$("p").scrollLeft();该示例用于得到元素的滚动条的位置。

　　　　　　也能够添加参数将元素滚动到指定的位置。例：

　　　　　　　$("textarea").scrollTop(300);$("textarea").scrollLeft(300);