jquery之DOM操作(一)
一般来说,DOM操作分为:DOM core(核心)、HTML-DOM和CSS-DOM。
1、DOM Core
DOM Core并不专属于javascript,任何一种支持dom操作的程序都可以使用它。
利用DOM Core来获取表单对象的方法:
document.getElementsByTagName("form");
2、HTML-DOM
它主要是提供一些更简明的符号来描述各种html元素的属性。
document.forms;
3、CSS-DOM
改变style的各种属性。
element.style.color="red";
接下来我们来学习jquery中的DOM操作:
html代码如下:
<body> <p title="你最喜欢的口红">你最喜欢的口红牌子是?</p> <ul> <li title="阿玛尼">阿玛尼</li> <li title="YSL">YSL</li> <li title="Dior">Dior</li> <li title="香奈儿">香奈儿</li> </ul> </body>
1、查找节点
1.1查找元素结点
获取元素节点并打印出它的内容:
var $li = $("ul li:eq(1)"); //获取第二个li var li_txt = $li.text(); alert(li_txt);
在这里需要注意的是jquery代码放的位置,如果我们把jquery代码放到<head>里面会是怎样的结果?
这是因为jquery是在html渲染完成后才进行的,放到head里面就找不到了。
1.2、查找属性结点
利用jquery选择器找到需要的元素之后,就可以使用attr()方法来获取它的各种属性的值。
var $para = $("p"); var p_txt = $para.attr("title"); alert(p_txt);
2、创建节点
2.1:、创建元素节点
使用jquery中的append()函数将创建后的元素加入文档。
var $li_1 = $("<li>创建的节点1</li>"); var $li_2 = $("<li>创建的节点2</li>"); $("ul").append($li_1); $("ul").append($li_2);
注意:当创建单个元素时:要注意闭合标签和使用标准的XHTML格式。
例如,创建一个<p>元素,可以用$("<p/>")或者$("<p></p>"),但不要使用$("<p>")或者大写的$("<P>")。
2.2、创建文本节点
其实在上面的代码示例中,我们已经创建了文本节点,我们将他们修改为和我们主题相关的文本就行。
var $li_1 = $("<li>纪梵希</li>"); var $li_2 = $("<li>MAC</li>"); $("ul").append($li_1); $("ul").append($li_2);
2.3、创建属性节点
var $li_1 = $("<li title='纪梵希'>纪梵希</li>"); var $li_2 = $("<li title='MAC'>MAC</li>"); $("ul").append($li_1); $("ul").append($li_2);
3、插入节点
3.1、append()
向每个匹配元素内部追加内容
3.2、appendTo()
将所有匹配的元素追加到指定元素中。实际上,使用该方法颠倒$(A).append(B)常规操作,他是将A追加到到B中。
3.3、prepend()
向每个匹配的元素内部前置内容
3.4、prependTo()
$(A).prependTo(B)将A前置到B中
3.5、after()
在每个匹配元素之后插入内容
3.6、insertAfter()
$(A).insertAfter(B),将A插入到B后面
3.7、before()
在每个匹配元素之前插入内容
3.8、insertBefore()
$(A).insertBefore(B)将A插入到B前面
4、删除节点
4.1、remove()方法
$("ul li:eq(4)").remove(); //将第五个元素删除
remove()方法还可以通过传递参数来选择性地删除元素:
$("ul li").remove("li[title!=MAC]");
4.2、detach()方法
detach()和remove()一样,也是从DOM中去掉所有匹配元素。但这个方法不会把匹配元素从jquery对象中删除,因而可以在将来在使用这些匹配的元素。所有绑定的事件和附加数据等都会留下来。
$("ul li").click(function () { alert($(this).html()); }) var $li = $("ul li:eq(1)").detach(); $li.appendTo(ul);
但如果是remove()就没有这样的效果了。
4.3、empty()方法
严格意义上将empty不是删除节点而是清空节点,他能清空元素中的所有后代节点。
$("ul li:eq(5)").empty();
再来看下控制台里面的代码有怎样的变化:
可以看到文本元素消失了。
5、复制节点
复制节点用clone()方法来实现。
$("ul li").click(function () { $(this).clone().appendTo("ul"); /*复制当前节点并添加到ul中*/ })
6、替换元素
替换元素时在jquery中使用replaceWith()和replaceAll()。
replaceWith()将所有匹配元素都替换成指定的HTML或者DOM元素。
$("p").replaceWith("<strong>你最不喜欢的口红是?</strong>");
replaceAll()与replaceWith()作用相同,只是位置需要改变下。
$("<strong>你最不喜欢的口红是?</strong>").repalceAll("p");
7、属性操作
7.1、获取和设置属性
刚刚前面有说到attr();
var $para = $("p");
var p_txt = $para.attr("title");
7.2、删除属性
用removeAttr()方法实现。
$("p").removeAttr("title");
8、遍历节点
8.1、children()方法
用于匹配元素的所有子元素集合。
var $body = $("body").children(); var $p =$("p").children(); var $ul = $("ul").children(); alert($body.length); alert($p.length); alert($ul.length); for(var i = 0,len = $ul.length; i <len; i++){ alert($ul[i].innerHTML); }
8.2、next()方法
该方法将取得匹配元素后面紧相邻的同辈元素。
例如 var $p1 = $("p").next();取得的元素便是所有的<ul>中的元素。
8.3、prev()方法
获得该元素紧相邻的前面的元素。
8.4、siblings()方法
该方法用于取得匹配元素前后所有的同辈元素;
例如var $p2 = $("p").sibling()就是获得<p>元素所有的同辈元素。
8.5、closeset()方法
取得最近的匹配元素。