jquery的 dom操作

Posted 2020-08-01 暗夜独狼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery的 dom操作相关的知识，希望对你有一定的参考价值。

DOM（文档对象模型），DOM操作分3类： DOM－core（核心） html—DOM CSS—DOM

DOM—core ，js中的： document.getElementById() document.getElementsByTagName() document.getElementsByName(); getAttribute() setAttribute();

HTML—core：

CSS—core ：获取和设置style对象的各种属性 element.style.color = "red";

1、查找元素节点：

通过的jquery选择器来查找：var l = $("ul li:eq(2)")。text() 获取ul中的第3个li元素里面的文本内容

2．查找属性节点：

jquery选择器查找到元素后，通过attr()来查找它的属性的值。attr()参数可以是一个，也可以是两个。一个表示是查询，2个表示是赋值。

//<div id=”myDiv” title=”hello”>123</div> $(“#myDiv”).attr(“title”); //hello

3、创建节点：

（1）创建一个<li>新元素。 var l= $("<li></li>")，将这个新元素插入到文档中： $("ul").append(l);

var $li1 = $(“”); //传入元素标记，自动包装并创建第一个li元素对象
　　var $li2 = $(“”); //第二个,创建时需要遵循XHTML规则（闭合、小写）
　　$(“#myDiv”).append($li1); //往id为myDiv的元素中添加一个元素
　　$(“#myDiv”).append($li2); //结果：<div id=”myDiv”></div>

　　$(“#myDIv”).append($li1).append($li2); //客串：传说中的链式写法，省一行代码 ^_^

注意：（1）动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。

（2）当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。例如创建一个元素，可以用$("")或者$("")，但不要使用$("")或者大写的$("")。

4、创建文本节点：

时需要为创建的元素节点添加文本内容：

$("<li>香蕉</li>") $("<li>茄子</li>")

var $li1 = $(“first”);
var $li2 = $(“second”);
$(“#myDIv”).append($li1).append($li2);
// 结果：<div id=”myDiv”>firstsecond</div>

5、创建属性节点：

var $li1 = $(“first”);
var $li2 = $(“second”);
$(“#myDIv”).append($li1).append($li2);
// 结果：<div id=”myDiv”>firstsecond</div>

6、插入节点：

　　　　append():向每个匹配的元素内部追加内容； 你好！ $("p").append("好想你");　　结果： 你好！好想你

　　　　appendTo():将匹配的元素追加到指定的元素中例如： $(‘a‘).appendto(‘b‘)是将a追加到b中　　$("好想你").appendTo("p"); 结果： 你好！好想你

　　　　prepend():向每个匹配的元素内部前置内容；　　你好！ $("p").prepend("好想你");　　结果： 好想你你好！

　　　　prependTo():将所有匹配的元素前置到指定的元素中。

　　　　after():在每个匹配的元素之后插入内容。　　　　 你好！ $("p").after("好想你");　　结果： 你好！好想你

　　　　insertAfter():将所有匹配的元素插入到指定的元素后面。　 $(‘a‘).insertAfter(‘b‘) 将a追加到b后面 $("好想你").insertAfter("p"); 结果： 你好！好想你

　　　　before():在每个匹配的元素之前插入内容

　　　　insertBefore():将所有匹配的元素插入到指定的元素的前面

$(“#myDiv”).append(“”); //往id为myDiv的元素插入span元素
$(“”).appendTo(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素

$(“#myDiv”).prepend(“”); //往id为myDiv的元素内最前面插入span元素
$(“”).prependTo(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素内的最前面

$(“#myDiv”).after(“”); //往id为myDiv的元素后面插入span元素（同级，不是子元素）
$(“”).insertAfter(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素后面（同级，不是子元素）

$(“#myDiv”).before(“”); //往id为myDiv的元素前面插入span元素（同级，不是子元素）
$(“”).insertBefore(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素前面（同级，不是子元素）

这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。

7、删除节点：

jQuery提供了三种删除节点的方法，即remove()，detach()和empty()。

1．remove()方法 从DOM中删除所有匹配的元素，

当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。下面的jQuery代码说明元素用remove()方法删除后，还是可以继续使用的。

$(‘ul li:eq(2)‘).remove(); //获取元素<ul>中第二个<li>后，从网页中将其删除

var re = $(‘ul li:eq(2)‘).remove(); re.appendTo("ul"); 把刚才删除的节点又添加到ul中，

remove()也可以通过传递参数来选择性地删除元素 $("ul li").remove("li[title=菠萝]"); //删除 ul 中title是菠萝的 li

2、detach()方法，也是从DOM中去掉所有匹配的元素，这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

3、empty()方法，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。

8、复制节点：

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

　　　　　　$(this).clone().appendTo("ul"); //复制当前节点，并追加到<ul>中

　　　　})

　　　　clone(true):表示复制元素的同时复制改元素所绑定的事件。

9、替换节点：

将网页中“你最喜欢的水果是？”替换成“你最不喜欢的水果是？”

replaceWith()方法 将所有匹配的元素都替换成HTML或者DOM元素 $(‘p‘).replaceWith("你最不喜欢的水果");

replaceAll()方法改方法颠倒了replaceWith的操作 $("你最不喜欢的水果").replaceAll("p");

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

10、包裹节点：

将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()。$("").wrap(""); //用b标签将strong标签包裹起来。 你最喜欢的水果。

结果： 你最喜欢的水果。

warpAll()方法：将所有的元素用其他标记全部包裹起来。　　$("").wrapAll(""); 将多个strong 元素放到一个 中，

warpInner()方法：将每一个匹配元素的子内容用其他标记包裹起来 $("").wrapInner(""); 结果： 你最喜欢的水果。

11、属性操作：

1、获取属性和设置属性：

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

　　　例如上面的attr()方法，既能设置元素属性的值，也能获取元素属性的值。类似的还有html()、text()、height()、width()、val()和css()等方法

2、删除属性 removeAttr()方法　　　　$(‘p‘).removeAttr("title"); //删除元素的属性title;

12、样式操作：

这是一个小测试

12、1　　获取样式和设置样式：

　$(‘p‘).attr("class"); //获取元素的Class　　;(获得class的名称)--test

　$("p").attr("class","high"); 　　//设置元素的样式为"high"，即替换已有的样式。

12、2　　追加样式

　$("p").addClass("high"); //给元素追加样式"high”；　

12、3　　移除样式

　$("p").removeClass("high"); //移除元素的样式"high";　　　　removeClass（）当它不带参数时，就会将class的值全部删除，

12、4　　切换样式，交替执行代码

　　toggle()方法此处的作用是交替执行代码③和代码④两个函数，如果元素原来是显示的，则隐藏它；如果元素原来是隐藏的，则显示它。此时，toggle()方法主要是控制行为上的重复切换。　

　　$("toggleBtn").toggle(function(){　　//code 显示元素　　},fucntion(){　　//code 隐藏元素　　})

jQuery还提供了一个toggleClass()方法控制样式上的重复切换。

12、5　　判断是否含有样式

　　$("p").hasClass("high"); //判断元素是否含有样式"high";如果有，则返回true，否则返回false。

　　这个方法是为了增强代码可读性而产生的。在jQuery内部实际上是调用了is()方法来完成这个功能的。该方法等价于如下代码：$("p").is(".another");

13、设置和获取HTML、文本和值：

　1. html()方法：读取或设置某个元素的HTML内容　　　　$("p").html(); //获取元素的html代码　　　$("p").html("你最喜欢的水果是？"); //设置元素的html代码。　　　　

　2. text()方法：该方法类似与javascript中的innerText属性，用来设置或读取某个元素中的文本内容。

　　　　$("p").text(); //获取元素的文本内容；　　　$("p).text("你最喜欢的水果是？"); //设置元素的文本内容为“你最喜欢的水果是？”

　3. val()方法：该方法类似与javascript中的value属性，用于获取或设置某个元素的值。无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。

　val()方法不仅能设置元素的值，同时也能获取元素的值。另外，val()方法还有另外一个用处，就是它能使select（下拉列表框）、checkbox（多选框）和radio（单选框）相应的选项被选中，在表单操作中会经常用到。

14、遍历节点：　　

1. children()方法：该方法用于取得匹配元素的子元素集合，只考虑子元素，不考虑其他任何后代元素。　　

2. next()方法：用于取得匹配元素后面紧邻的同辈元素。　

3. prev()方法：用于取得匹配元素前面紧邻的同辈元素。

4. siblings()方法：用于取得匹配元素前后的同辈元素。

5. closet()方法：用于取得最近的匹配元素

还有很多，在js包装集中有详细的说明

15、CSS-DOM操作

　1. css()方法。

　　　　　　$("p").css("color"); //获取p元素的 color 属性

　　　　　　$("p").css({"color":"red","width":"12px"}); //设置多个样式。

　　　　　　$("p").css("color":"red"); //设置单个样式。

（1）如果值是数字，将会被自动转化为像素值。

（2）在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，例如：

$("p").css({ fontSize : "30px"，backgroundColor : "#888888" })

如果带上了引号，既可以写成“font-size”，也可以写成“fontSize”。

总之建议大家加上引号，养成良好的习惯。

$(“#myDiv”).css(“opacity”, “0.5″); //设置id为myDiv的元素的透明度（兼容浏览器）

$(“#myDiv”).css(“height”); //获取id为myDiv的元素的高度（单位：px，兼容浏览器）
$(“#myDiv”).height(); //同上（实际高度）

$(“#myDiv”).css(“width”); //获取id为myDiv的元素的宽度（单位：px，兼容浏览器）
$(“#myDiv”).width(); //同上（实际宽度）

2. offset()方法：获取当前元素在当前视窗的相对偏移，其中返回的对象包括两个属性，即top和left，它只对可见元素有效。

var offset=$("p").offset();　　　　var left=offset.left;　　　　var top=offset.top;

　　var offset = $(“#myDiv”).offset(); //获取id为myDiv的元素在当前窗口的相对偏移量　　　　alert( offset.top + “|” + offset.left );

3. position()方法：获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对偏移量，也返回top和left属性。

　var offset = $(“#myDiv”).position(); //获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量
　　alert( offset.top + “|” + offset.left );　

4. scrollTop()方法和scrollLeft()方法:这两个方法分别是获取元素的滚动条距顶端的距离和距左侧的距离

$(“#txtArea”).scrollTop(); //获取id为txtArea的元素滚动条距离顶端的距离
$(“#txtArea”).scrollLeft(); //获取id为txtArea的元素滚动条距离左侧的距离
$(“#txtArea”).scrollTop(100); //设置id为txtArea的元素滚动条距离顶端的距离
$(“#txtArea”).scrollLeft(100); //设置id为txtArea的元素滚动条距离左侧的距离

　　　　

还有2个小例子，后面会添加的