jquery 元素插入详解.docx

1、jquery 元素插入详解jquery 元素插入详解 jQuery 学习笔记之六 (jQuery DOM的操作)DOM操作的分类DOM Core 并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限与处理网页，也可以用来处理任何一种使用标记语言编写出来的文档。例如XMLjavascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法，这些都是Dom Core的组成部分。使用DOM Core来获取表单对象的方法document.getElementByT

2、agName(from);使用DOM Core来获取某元素的src属性的方法：element.getAttribute(src);构建DOM元素你最喜欢的水果是?苹果橘子菠萝使用jQeruy在文档数上查找节点非常容易，可以通过在第2章介绍的jQuery选择器来完成。1.查找元素节点获取元素节点并打印出它的文本内容，jQuery代码如下:var $li = $(ul li:eq(1); 获取里第2个 节点var li_txt=$li.text();/获取第2个元素节点的文本内容alert(li_txt);/打印文本内容，这里会打印出橘子以上代码获取了元素里第2个节点，并将它的文本内容橘子打印出来

3、2.查找属性节点利用jQuery 选择器查找到需要的元素后，就可以使用attr()方法来获取它的各种属性的值.attr()方法得参数可以是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字。获取属性节点并打印出它的文本内容，jQuery代码如下：var $para = $(p);/获取节点var p_txt=$para.attr(title);/获取元素节点属性titlealert(p_txt);/打印title属性值创建节点在dom 操作中，常常需要动态创建HTML内容，是文档在浏览器里面的呈现效果发生变法，并且达到各种各样的人机交互的目的。1. 创建元素节点例如要创建两个元素节点，

4、并且要把它们作为元素节点的子节点添加到DOM节点树上。(1)创建两个新元素。(2)将这两个新元素插入文档中。第(1)个步骤可以使用jQuery的工厂函数$()来完成。$(html);$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。首先创建两个元素,jQuery代码如下:$(ul).append($li_1);/添加到节点中，使之能在网页中显示$(ul).append($li_2);/可以采取链式写法:$(ul).append($li_1).append($li_2);注意事项：(1)动态创建的新元素节点不会被自动添加到文

5、档中，而是需要使用其他方法将其插入文档中。(2)当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。例如创建一个 元素，使用$()或者(),但是不要使用$()或者大写的$();2.创建文档节点var $li_1= $(香蕉);/创建一个 元素，包括元素节点和文本节点，香蕉就是创建的文本节点var $li_2 =$(雪梨);/创建一个 元素，包括元素节点和文本节点，雪梨就是创建的文本节点。$(ul).append($li_1);/添加到节点中，使之能在网页中显示$(ul).append($li_2);/添加到节点中，使之能在网页中显示以上代码所示，创建文本节点就是在创建元素节点时直接把文

6、本内容写出来，然后使用append()等方法将他们添加到文档中就可以了。注意事项：无论$(html)中的HTML代码多么复杂，都要使用相同的方式来创建。例如$(这是一个复杂的组合);3.创建属性节点创建属性及节点与创建文本节点类似，也是直接在创建元素节点时一起创建。jQuery代码如下:var $li_1=$(香蕉);/创建一个元素，包含元素节点，文本节点和属性节点 其中title=香蕉就是创建的属性节点var $li_2=$(雪梨);/创建一个元素 包括元素节点，文本节点和属性节点，其中title=雪梨就是创建的属性节点$(ul).append($li_1);$(ul).append($li

7、_2);/添加到 节点中，使之能在网页中显示插入节点动态创建HTML元素并没有世界用处，还需要将新创建的元素插入文档中，将新创建的节点插入文档最简单的办法是，让它成为这个文档的某个节点的子节点。使用append(),它会在元素内部追加新创建的内容。jQuery中还有提供了其他几种插入节点的方法。方法 描述 示例append() 向每个匹配的元素内部追加内容 HTML代码我想说:jQuery代码: $(p).append(你好); 结果: 我想说:你好appendTo() 将所有匹配的元素追加到指定的元素中，实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中

8、，而是将A追加到B中 HTML 代码 我想说: jQuery代码： $(你好).appendTo(p); 结果: 我想说：你好prepend() 向每个匹配的元素内部前置内容 HTML代码: 我想说: jQuery代码: $(p).prepend(你好);结果你好我想说:prependTo() 将所有匹配的元素前置到指定的元素中，实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中。HTML 代码 我想说: jQuery代码: $(你好).prependTo(p); 结果你好我想说after() 在每个匹配的元素之后插入内容 HTML代

9、码 我想说: jQuery代码: $(p).after(你好); 结果: 我想说:你好insertAfter() 将所有匹配的元素插入到指定元素的后面，与after()颠倒了 HTML代码 我想说 jQuery代码：$(你好).insertAfter(p); 结果我想说：你好before() 将每个匹配的元素之前插入内容 HTML代码 我想说: jQuery 代码：$(p).before(你好); 结果你好我想说:insertBefore() 将所有匹配的元素插入到指定的元素的前面，实际上，使用该方法是颠倒了常规的before的操作 $( 你好).insertBefore(p); 结果:你好我

10、想说:删除节点如果文档中某一个元素多余，那么应将其删除，jQuery提供了两种删除节点的方法，即remove() 和empty()1.remove()方法作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式类筛选元素。例如删除图3-11中节点中的第2个元素节点，jQuery代码如下:$(ul li:eq(1).remove();/获取第2个元素节后，将它从网页中移除当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除，这个方法得放回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。下面的jQuery代码说明元素用remove()方法删

11、除后，还是可以继续使用的。var $li = $(ul li:eq(1).remove();/获取第2个元素节点后，将它从网页中删除$li.appendTo(ul);/把刚删除的节点又重新添加到元素里可以直接使用appendTo()方法得特性来简化以上代码：$(ul li:eq(1).appendTo(ul);/appendTo()方法也可以用来移动元素/移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点。另外remove()方法也可以通过传递参数来选择性地删除元素$(ul li).remove(lititle!=菠萝);/将元素属性title不等于菠萝 的元素删除。2.e

12、mpty()方法严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后台节点。$(ul li:eq(1).empty();/获取第2个元素节点后，清空此元素里的内容，注意是元素里面。使用firebud查看橘子节点发生变化 3.复制节点复制节点也是常用的DOM操作之一，例如购入车，用户不仅可以通过单击商品下方的选择按钮购买相应的产品，也可以通过鼠标拖动商品并将其放到购物车中，这个商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并将其跟随鼠标移动，从而达到以下购物车的效果$(ul li).click(function()$(this).clone()

13、.appendTo(ul);/复制当前单击的节点，并将它追加到元素中);/在页面中点击菠萝后，列表最下方出现新节点菠萝。$(this).clone(true).appendTo(body);/注意参数true在clone()方法传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件，因此该元素的副本也同样具备复制功能。替换节点如果要替换某个节点，jQuery提供了相应的方法，即replaceWith和 replaceAll()replaceWith()方法得做哟偶那个是将所有匹配的元素都替换成指定的HTML或者DOM元素。例如要将网页中你最喜欢的水果是? 替换成 你最不喜欢的水

14、果是? 可以使用如下jQuery代码：$(p).replaceWith(你最不喜欢的水果是?);也可以使用jQuery中另一个方法repalceAll()来实现，该方法与replaceWith()方法得作用相同，只是颠倒了replaceWith的操作。$(你最不喜欢的水果是?).replaceAll(p);注意：如果在替换之前，已经为元素绑定了事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。4. 包裹节点如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，wrap()，该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义

15、。jQuery代码如下：$(strong).wrap();/用标签把 元素包裹起来得到的结果如下： 你最喜欢的水果是?1.wrapAll()方法该方法将会将所有匹配的元素用一个元素包裹。它不同于wrap()方法，wrap()方法将所有的元素进行单独的包裹。$(strong).wrap();2.wrapinner()方法该方法将每一个匹配的元素的子内容(包括文本节点) 用其他结构化的标记包裹起来，例如可以使用它来包裹 标签的子内容:jQuery代码如下：$(strong).wrapInner();运行代码后，发现标签内的内容被一对标签包裹了。你最喜欢的水果是?属性操作在jQuery 中，用att

16、r() 方法来获取和设置元素属性，removeAtt() 方法来删除元素属性。1.获取属性和设置属性如果要获取元素的属性title,那么只需要给attr()方法传递一个参数，即属性名称。var $para=$(p);/获取节点var p_txt=$para.attr(title);/获取元素节点属性title如果要设置元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数即属性名称和对应的值。jQuery代码如下：$(p).attr(title,your title);/设置单个的属性值/为同一个元素设置多个属性值$(p).attr(title:your title,nam

17、e:test);/将一个 名值 形式的对象设置为匹配元素的属性。jQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的，例如上面的attr()方法，即能设置元素属性的值，也能获取元素属性的值，类似的还有html(),text(),height(),width(),val(),css()等方法。2.删除属性有时候需要删除文档元素的特定属性，可以使用removeAttr()方法删除元素的title属性$(p).removeAttr(title);操作样式获取样式和设置样式HTML代码如下： 你最喜欢的水果是?class也是元素的属性，因此获取class和设置clas

18、s都可以使用attr()方法。var p_class = $(p).attr(class);/获取元素的class可以使用attr()方法来设置元素的class，jquery代码如下：$(p).attr(class,high);/设置元素的class为high他是将原来的class替换为class，而不是在原来的基础上追加新的class追加样式jQuery提供了专门的addClass()方法来追加样式，为了使例子更为容易理解，首先在标签里添加另一组样式.highfont-weight:bold;color:red;.anotherfont-style:italic;color:blue;/在网

19、页中追加class类的按钮.$(input:eq(2).click(function()$(p).addClass(another);/给元素追加another类)attr() 和addClass()的区别用途 追加样式 设置样式对同一个网页元素操作 test第一次使用方法 $(p).addClass(high); $(p).attr(class,high);第1次结果 test再次使用方法 $(p).addClass(another); $(p).attr(class,another);结果 test test3移除样式如果单击某一个按钮时，删除class的某个值，那么可以使用addClas

20、s()方法相反的removeClass()方法来完成，它的作用是从匹配的元素中删除全部或者指定的class如下jQuery代码来删除$(p).removeClass(high);/移除元素中为high的class/如果要把元素的两个class都删除，就要使用removeClass()$(p).removeClass(high).removeClass(another);/jquery提供了更简单的方法$(p).removeClass(high another);另外，还可以使用removeClass()方法得一个特性来完成同样的效果，它不带参数的时候会将class的值全部删除.$(p).removeClass();切换样式$toggleBtn.toggle(function()/3,function()/4);toggle()方法此处的作用是交替执行代码3和4两个函数，如果元素原来是显示的，则隐藏它，如果隐藏的，则显示它，此时，toggle()方法主要是控制行为上的重复切换。判断是否含有某个样式