jquery创建元素节点,jquery遍历子节点

为了避免重复的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中有哪些dom操作

DOM操作的分类

DOM Core 并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它。

它的用途并非仅限与处理网页,也可以用来处理任何一种使用标记语言编写出来的文档。例如XML

javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法,这些都是Dom Core的组成部分。

使用DOM Core来获取表单对象的方法

document.getElementByTagName("from");

使用DOM Core来获取某元素的src属性的方法:

element.getAttribute("src");

构建DOM元素

body

p title="选择你最喜欢的水果"你最喜欢的水果是?/p

ul

li title='苹果'苹果/li

li title='橘子'橘子/li

li title='菠萝'菠萝/li

/ul

/body

使用jQeruy在文档数上查找节点非常容易,可以通过在第2章介绍的jQuery选择器来完成。

1.查找元素节点

获取元素节点并打印出它的文本内容,jQuery代码如下:

var $li = $("ul li:eq(1)"); 获取ul里第2个li 节点

var li_txt=$li.text(); //获取第2个li元素节点的文本内容

alert(li_txt); //打印文本内容,这里会打印出橘子

以上代码获取了ul元素里第2个li节点,并将它的文本内容"橘子"打印出来

2.查找属性节点

利用jQuery 选择器查找到需要的元素后,就可以使用attr()方法来获取它的各种属性的值.attr()方法得参数可以是一个,也可以是两个。当参数是一个时,则是要查询的属性的名字。

获取属性节点并打印出它的文本内容,jQuery代码如下:

var $para = $("p"); //获取p节点

var p_txt=$para.attr("title"); //获取p元素节点属性title

alert(p_txt); //打印title属性值

创建节点

在dom 操作中,常常需要动态创建HTML内容,是文档在浏览器里面的呈现效果发生变法,并且达到各种各样的人机交互的目的。

1. 创建元素节点

例如要创建两个li元素节点,并且要把它们作为ul元素节点的子节点添加到DOM节点树上。

(1)创建两个li新元素。

(2)将这两个新元素插入文档中。

第(1)个步骤可以使用jQuery的工厂函数$()来完成。

$(html);

$(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。

首先创建两个li元素,jQuery代码如下:

$("ul").append($li_1); //添加到ul节点中,使之能在网页中显示

$("ul").append($li_2); //可以采取链式写法:$("ul").append($li_1).append($li_2);

注意事项:

(1)动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入文档中。

(2)当创建单个元素时,要注意闭合标签和使用标准的XHTML格式。

例如创建一个p 元素,使用$("p/")或者("p/p"),但是不要使用$("p")或者大写的$("P/");

2.创建文档节点

var $li_1= $("li香蕉/li"); //创建一个li 元素,包括元素节点和文本节点,香蕉就是创建的文本节点

var $li_2 =$("li雪梨/li"); //创建一个li 元素,包括元素节点和文本节点,雪梨就是创建的文本节点。

$("ul").append($li_1); //添加到ul节点中,使之能在网页中显示

$("ul").append($li_2); //添加到ul节点中,使之能在网页中显示

以上代码所示,创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法将他们添加到文档中就可以了。

注意事项:

无论$(html)中的HTML代码多么复杂,都要使用相同的方式来创建。

例如$("liem这是/emb一个/ba href='#'复杂的组合/a/li");

3.创建属性节点

创建属性及节点与创建文本节点类似,也是直接在创建元素节点时一起创建。

jQuery代码如下:

var $li_1=$("li title='香蕉'香蕉/li");//创建一个li元素,包含元素节点,文本节点和属性节点 其中title='香蕉'就是创建的属性节点

var $li_2=$("li title='雪梨'雪梨/li");//创建一个li元素 包括元素节点,文本节点和属性节点,其中title=‘雪梨’就是创建的属性节点

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

$("ul").append($li_2); //添加到ul 节点中,使之能在网页中显示

插入节点

动态创建HTML元素并没有世界用处,还需要将新创建的元素插入文档中,将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个节点的子节点。

使用append(),它会在元素内部追加新创建的内容。

jQuery中还有提供了其他几种插入节点的方法。

方法 描述 示例

append() 向每个匹配的元素内部追加内容 HTML代码

p我想说:/p

jQuery代码: $("p").append("b你好/b"); 结果: p我想说:b你好/b/p

appendTo() 将所有匹配的元素追加到指定的元素中,

实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是将B追加到A中,而是将A追加到B中 HTML 代码 p我想说:p jQuery代码: $("b你好/b").appendTo("p"); 结果: p我想说:b你好/b/p

prepend() 向每个匹配的元素内部前置内容 HTML代码: p我想说:/p jQuery代码: $("p").prepend("b你好/b");结果pb你好/b我想说:/p

prependTo() 将所有匹配的元素前置到指定的元素中,实际上,使用该方法是颠倒了常规的$(A).prepend(B)的操作,即不是将B前置到A中,而是将A前置到B中。HTML 代码 p我想说:/p jQuery代码: $("b你好/b").prependTo("p"); 结果pb你好/b我想说p

after() 在每个匹配的元素之后插入内容 HTML代码 p我想说:p jQuery代码: $("p").after("b你好b"); 结果: p我想说:/pb你好/b

insertAfter() 将所有匹配的元素插入到指定元素的后面,与after()颠倒了 HTML代码p 我想说/p jQuery代码:$("b你好/b").insertAfter("p"); 结果p我想说:/pb你好/b

before() 将每个匹配的元素之前插入内容 HTML代码 p我想说:/p jQuery 代码:$("p").before("b你好/br"); 结果b你好/b我想说:/p

insertBefore() 将所有匹配的元素插入到指定的元素的前面,实际上,使用该方法是颠倒了常规的before的操作 $("b 你好/b").insertBefore("p"); 结果:b你好/bp我想说:/p

删除节点

如果文档中某一个元素多余,那么应将其删除,jQuery提供了两种删除节点的方法,即remove() 和empty()

1.remove()方法

作用是从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式类筛选元素。

例如删除图3-11中ul节点中的第2个li元素节点,jQuery代码如下:

$("ul li:eq(1)").remove();//获取第2个li元素节后,将它从网页中移除

当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除,这个方法得放回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。

下面的jQuery代码说明元素用remove()方法删除后,还是可以继续使用的。

var $li = $("ul li:eq(1)").remove();//获取第2个li元素节点后,将它从网页中删除

$li.appendTo("ul");//把刚删除的节点又重新添加到ul元素里

可以直接使用appendTo()方法得特性来简化以上代码:

$("ul li:eq(1)").appendTo("ul");

//appendTo()方法也可以用来移动元素

//移动元素时首先从文档上删除此元素,然后将该元素插入得到文档中的指定节点。

另外remove()方法也可以通过传递参数来选择性地删除元素

$("ul li").remove("li[title!='菠萝']"); //将li元素属性title不等于"菠萝" 的li元素删除。

2.empty()方法

严格来讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后台节点。

$("ul li:eq(1)").empty(); //获取第2个li元素节点后,清空此元素里的内容,注意是元素里面。

使用firebud查看橘子节点发生变化 li title='橘子'/

3.复制节点

复制节点也是常用的DOM操作之一,例如购入车,用户不仅可以通过单击商品下方的选择按钮购买相应的产品,也可以通过鼠标拖动商品

并将其放到购物车中,这个商品拖动功能就是用的复制节点,将用户选择的商品所处的节点元素复制一次,并将其跟随鼠标移动,从而达到以下购物车的效果

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

$(this).clone().appendTo("ul");//复制当前单击的节点,并将它追加到ul元素中

});

//在页面中点击"菠萝"后,列表最下方出现新节点"菠萝"。

$(this).clone(true).appendTo("body");//注意参数true

在clone()方法传递了一个参数true,它的含义是复制元素的同时复制元素中所绑定的事件,因此该元素的副本也同样具备复制功能。

替换节点

如果要替换某个节点,jQuery提供了相应的方法,即replaceWith和 replaceAll()

replaceWith()方法得做哟偶那个是将所有匹配的元素都替换成指定的HTML或者DOM元素。

例如要将网页中p title="选择你最喜欢的水果"你最喜欢的水果是?/p 替换成strong 你最不喜欢的水果是?/strong 可以使用如下jQuery代码:

$("p").replaceWith("strong你最不喜欢的水果是?");

也可以使用jQuery中另一个方法repalceAll()来实现,该方法与replaceWith()方法得作用相同,只是颠倒了replaceWith的操作。

$("strong你最不喜欢的水果是?/strong").replaceAll("p");

注意:

如果在替换之前,已经为元素绑定了事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新绑定事件。

4. 包裹节点

如果要将某个节点用其他标记包裹起来,jQuery提供了相应的方法,wrap(),该方法对于需要在文档中插入额外的结构化标记非常有用,而且不会破坏原始文档的语义。

jQuery代码如下:

$("strong").wrap("b/b");//用b标签把strong 元素包裹起来

得到的结果如下:

bstrong title="选择你最喜欢的水果" 你最喜欢的水果是?/strong/b

1.wrapAll()方法

该方法将会将所有匹配的元素用一个元素包裹。它不同于wrap()方法,wrap()方法将所有的元素进行单独的包裹。

$("strong").wrap("b/b");

2.wrapinner()方法

该方法将每一个匹配的元素的子内容(包括文本节点) 用其他结构化的标记包裹起来,例如可以使用它来包裹strong 标签的子内容:jQuery代码如下:

$("strong").wrapInner("b/b");

运行代码后,发现strong标签内的内容被一对b标签包裹了。

strong title="选择你最喜欢的水果"b你最喜欢的水果是?/b/strong

属性操作

在jQuery 中,用attr() 方法来获取和设置元素属性,removeAtt() 方法来删除元素属性。

1.获取属性和设置属性

如果要获取p元素的属性title,那么只需要给attr()方法传递一个参数,即属性名称。

var $para=$("p"); //获取p节点

var p_txt=$para.attr("title"); //获取p元素节点属性title

如果要设置p元素的属性title的值,也可以使用同一个方法,不同的是,需要传递两个参数即属性名称和对应的值。

jQuery代码如下:

$("p").attr("title","your title");//设置单个的属性值

//为同一个元素设置多个属性值

$("p").attr({"title":"your title","name":"test"});//将一个 "名值" 形式的对象设置为匹配元素的属性。

jQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的,例如上面的attr()方法,即能设置元素属性的值,也能获取元素属性的值,类似的还有html(),text(),height(),width(),val(),css()等方法。

2.删除属性

有时候需要删除文档元素的特定属性,可以使用removeAttr()方法

删除p元素的title属性

$("p").removeAttr("title");

操作样式

获取样式和设置样式

HTML代码如下:

p class="myclass" title="选择你最喜欢的水果" 你最喜欢的水果是?/p

class 也是p元素的属性,因此获取class 和设置class都可以使用attr()方法。

var p_class = $("p").attr("class");//获取p元素的class

可以使用attr()方法来设置p元素的class,jquery代码如下:

$("p").attr("class","high");//设置p元素的class为high

他是将原来的class替换为class,而不是在原来的基础上追加新的class

追加样式

jQuery提供了专门的addClass()方法来追加样式,为了使例子更为容易理解,首先在style标签里添加另一组样式

style

.high{

font-weight:bold;

color:red;

}

.another{

font-style:italic;

color:blue;

}

//在网页中追加class类的按钮.

$("input:eq(2)").click(function(){

$("p").addClass("another"); //给p元素追加"another"类

})

attr() 和addClass()的区别

用途 追加样式 设置样式

对同一个网页元素操作 ptest/p

第一次使用方法 $("p").addClass("high"); $("p").attr("class","high");

第1次结果 p class="high"test/p

再次使用方法 $("p").addClass("another"); $("p").attr("class","another");

结果 p class="high another" test/p p class="another" test/p

3移除样式

如果单击某一个按钮时,删除class的某个值,那么可以使用addClass()方法相反的removeClass()方法来完成,它的作用是从匹配的元素中删除全部或者指定的class

如下jQuery代码来删除

$("p").removeClass("high");//移除p元素中为"high"的class

//如果要把p元素的两个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()方法主要是控制行为上的重复切换。

判断是否含有某个样式

hasClass可以用来判断元素中是否有某个class,如果有,则返回true,否则返回false

$("p").hasClass("another");

//jQuery内部实际上是调用了is()方法来完成这个功能的,该方法等价于

$("p").is(".another")

1.设置和获取HTML,文本和值

html()方法

$("P").html();//获取元素的html代码

2.text() 方法

$("p").text(); //获取p元素的文本内容

//text()可以对文本内容设置内容

$("p").text("你最喜欢的水果是?"); //设置p元素的文本内容

3.val()方法

val()方法取值

通过上面的例子可以发现val()方法不仅能设置元素的值,同时也能获取元素的值,另外val() 方法还有另外一个用处,就是它能select(下拉列表框),checkbox(多选框)和radio(单选框) 相应的选项被选中,在表单操作中会经常用到。

//使用val设置选中项

$("#single").val("选择2号");

//如果要使下拉列表的第2项和第3项被选中

$("#multiple").val(["选择2号","选择3号"]); //以数组的形式赋值

使多个文本框被选中

$(":checkbox").val(["check2","check3"]);

$(":radio").val(["radio2"]);

也可以使用attr()方法来实现同样的功能

$("#single option:eq(1)").attr("selected",true); //设置属性selected

$("[value=radio2]:radio").attr("checked",true);

1 children()方法

该方法用于取得匹配元素的子元素集合

var $body = $("body") .children();

var $p=$("p").children();

var $ul = $("ul").children();

alert($body.length);

alert($p.length);

alert($ul.length);

2.next方法

该方法用于取得匹配元素后面紧邻的同辈元素。

从dom树的结构可以知道p元素的下一个同辈节点时ul,因此可以通过next() 方法来获取ul 元素

var $p1 = $("p").next();//取得紧邻p元素后的同辈元素

ul

li title='苹果'苹果/li

li title='橘子'橘子/li

li title='菠萝'菠萝/li

/ul

prev()方法

该方法用于取得匹配元素前面紧邻的同辈元素。

从DOM树的结构中可以知道ul元素的上一个同辈节点时p,因此可以通过prev()方法类获取p元素

var $ul = $("ul").prev(); //取得紧邻ul元素前得同辈元素

得到的结果将是:

p title="选择你最喜欢的水果"你最喜欢的水果是?/p

4.siblings()方法

该方法用于取得匹配元素前后所有的同辈元素。

在第1章导航栏的例子中有段代码如下:

$(".has_children").click(function() {

$(this).addClass("highlight"); //为当前元素增加highlight类

.children("a").show().end()

.siblings().removeClass("highlight")

.children("a").hide();

})

如何用jquery创建一个dom元素?

使用jquery创建新元素的方法为:$(html标签),例如 $("p/p")创建了一个段落。注意此时只是创建了对象,尚未添加到文档节点中去;以下四个 jQuery 方法可以添加新内容到文档树中:

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

下面进行实例演示:点击“添加”按钮,新建一个input文本框

1、HTML结构

input type="text" id="test_input"

input type='button' value='添加'/

2、javascript代码

$(function(){

$("input[type='button']").click(function() {

new_obj = $("input type='text'");

$(this).before(new_obj);

});

});

3、显示效果

初始样式

点击两次“添加”按钮之后的效果

怎么用jquery动态生成并创建多个节点?

//创建节点

var createobj=jQuery("div创建的节点,需要加载到页面上才会显示哟/div");

//将创建的节点加到页面的最后面

jQuery("body").append(createobj);

//创建节点

var createobj=jQuery("div创建的节点,span color='red'创建新节点的子节点/span需要加载到页面上才会显示哟/div");

//将创建的节点加到页面的最后面

jQuery("body").append(createobj);

怎么用DOM创建a节点

用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM操作并非这么简单。在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互的目的。

HTML DOM结构如下:

p class="nm_p" title="欢迎访问脚本之家" 欢迎访问脚本之家/p ul class="nm_ul" li title='PHP编程'简单易懂的PHP编程/li li title='JavaScript编程'简单易懂的JavaScript编程/li li title='JQuery编程'简单易懂的JQuery编程/li /ul

创建元素节点

例如要创建两个li元素节点,并且要把它们作为ul元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤。

1. 创建两个li新元素。

2. 将这两个新元素插入文档中。

第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下:

$(html);

$(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。

首先创建两个li元素,jQuery代码如下:

var $li_1 = $("li/li"); // 创建第一个li元素 var $li_2 = $("li/li"); // 创建第二个li元素

然后将这两个新元素插入文档中,可以使用jQuery中的append()等方法。JQuery代码如下:

var $parent = $(".nm_ul"); // 获取ul节点。li的父节点 $parent.append($li_1); // 添加到ul节点中,使之能在网页中显示 $parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);

动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入文档中。当创建单个元素时,要注意闭合标签和使用标准的XHTML格式。例如创建一个p元素,可以用$("p/")或者$("p/p"),但不要使用$("p")或者大写的$("P/")。

创建文本节点

已经创建了两个li元素节点并把它们插入文档中了。此时需要为创建的元素节点添加文本内容。

JQuery代码如下:

var $li_1 = $("li新增节点:数据结构/li"); // 创建第一个li元素 var $li_2 = $("li新增节点:设计模式/li"); // 创建第二个li元素 var $parent = $(".nm_ul"); // 获取ul节点。li的父节点 $parent.append($li_1); // 添加到ul节点中,使之能在网页中显示 $parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);

如以上代码所示,创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法将它们添加到文档中就可以了。

无论$(html)中的HTML代码多么复杂,都要使用相同的方式来创建。例如$("liem这是/emb一个/ba href="#"复杂的组合/a/li");

创建属性节点

创建属性节点与创建文本节点类似,也是直接在创建元素节点时一起创建。JQuery代码如下:

var $li_1 = $("li title='新增节点:数据结构'新增节点:数据结构/li"); // 创建第一个li元素 var $li_2 = $("li title='新增节点:设计模式'新增节点:设计模式/li"); // 创建第二个li元素 var $parent = $(".nm_ul"); // 获取ul节点。li的父节点 $parent.append($li_1); // 添加到ul节点中,使之能在网页中显示 $parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);

通过浏览器查看源代码工具查看代码,可以看到最后两个li元素多了名为“title”的属性节点。由此可以判断,创建的元素的文本节点和属性节点都已经添加到网页中了。由此可见用jQuery来动态创建HTML元素是非常简单、方便和灵活的。

新闻标题:jquery创建元素节点,jquery遍历子节点
文章网址:https://www.cdcxhl.com/article48/hoddhp.html

成都网站建设公司_创新互联,为您提供品牌网站制作自适应网站标签优化用户体验微信公众号定制开发

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网页设计公司