jQuery中的DOM操作

2019年5月22日 252次阅读 来源: whatcanhumando

对DOM的操作包插：增、删、改、查。

使用jQuery查找节点非常容易，通过jQuery选择器完成。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jQuery/jquery-3.1.0.js"></script>
</head>
<body>
  <p title="选择你最喜欢的水果.">你最喜欢的水果是？</p>
  <ul>
    <li title='苹果'>苹果</li>
    <li title='桔子'>桔子</li>
    <li title='菠萝'>菠萝</li>
  </ul>
</body>
</html>


var $li = $("ul li:eq(1)");
var li_txt = $li.text();

使用以上2条语句就能查找ul里第2个li元素，然后获取这个li元素的文本内容。

var $para = $("p");
var p_txt = $para.attr("title");

使用以上2条语句就能查找p元素，然后获取这个元素里的title属性内容。

创建节点也很简单：$(html），使用这条语句就能创建节点。比如

$("<li></li>")，

这样就创建了li元素节点。只是在DOM操作中创建节点还不够，如果想要在网页中显示了来，还需要将创建的节点插入到网页DOM中。

  • append()，向每个匹配的元素内部追加内容
  • appendTo()，将所有匹配的元不追加到指定的元素中
  • prepend()，向每个匹配的元素内部前置内容
  • prependTp()，将所有匹配的元素前置到指定的元素中
  • after(), 在每个构配的元素之后插入内容
  • insertAfter(), 将所有匹配的元素插入到指定元素的后面
  • before()，在每个匹配的元素之前插入内容
  • insertBefore()，将所有匹配的元素插入到指定的元素之前

jQuery提供了3种删除元素的方法，分别是remove,detach,empty。

  • remove()， 作用是从DOM中删除所匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。
$("ul li:eq(1)").remove()//获取第2个li元素后，将它从网页中删除

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

remove方法还可以接收参数来选择性地删除元素

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

  • detach（）,用法和remove一样，但是区别就是所有邦定的事件、附加的数据等都保留下来，而remove方法之前绑定的事件会失效。

  • empty()， 这个方法只是清空节点，能清空节点元素的所有后代节点。

    $(“ul li:eq(1)”).empty();//获取第2个li元素节点后，清空此元素的内容。

用上面的语句清空节点之后，元素里的内容清除了，但是li元素还是在文档中的。

jQuery中还可以使用chone方法复制节点。

$("ul li").click(function(){
  $(this).clone(true).appendTo("ul");
});

clone方法接收一个bool类型参数，如果为false或为空表示不复制所绑定的事件，如果为true则表示复印事件。

jQuery提供了2个替换节点的方法：replaceWith()和replaceAll()。

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

replaceAll和replaceWith作用相同，只是颠倒了操作后者的操作。替换后，原节点的事件会消失。

jQuery提供3个包裹节点的方未能。所谓的包裹节点意思是原来的html是这样：<p>测试</p>，现在想在p元素之外加上div变成这样:<div><p>测试</p></div>，这就是把p节点用div元素包裹了。

这3个方法分别为:wrap(), wrapAll(),wrapInner()。

像上面这个例子就可以这么写：

$("p").wrap("<div></div>");

wrapAll会把所有匹配的节点用一个标签包裹起来，而wrap会把所在匹配的节点单独包裹一个标签。

wrapInner会把匹配的节点里的的子元素用包裹起来

$("p").wrapInner("<div></div>")

产生的结果就是

<p><div>测试</div></p>

对DOM节点的增删改查差不多就以上这些。接下来讲讲对具体的节点的操作。

  • 获取属性和设置属性
var $para = $("p);
var p_txt = $para.attr("title");

以上代码获取属性,如果要设置性性也用这个方法只是需要传入多个参数。

$("p").attr("title", "your title");

如果要一次性设置多个属性，则传入一个对象。

$("p").attr({"title" : "your title", "name" : "your name" });

删除属性使用removeAttr方法

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

如果我们另外定义了一个class样式，那么也可以用attr方法来设置节点的class，间接设置了样式。但是attr方法只能替换样式，如果要追加样式那就需要用jQuery另外给我们提供的方法：addClass()

$("p").addClass("another")

如果p元素原来有一个样式，那么就会再添加一个，而不会替换。

同样也可以移除样式

$("p").removeClass("another")

如果要移除多个样式，那么每个class名移增加空格就可以

$("p").removeClass("one another")

同时移除了one 和 another两个样式。

jQuery还提供了切换样式的方法：toggleClass();如果这个方法里传递的class已经存在则删除它，如果不存在则添加它.

$("p").toggleClass("another")

如果another样式不存在，则和addClass效果一样；如果已经存在，则和removeClass效果一样。

如果要判断一个样式是不是存在就要调用hasClass()方法，返回值为true或false

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

接下来介绍jQuery中的如果获取html，文本的方法，比如网页上有如下的节点：

<p title="选择你最喜欢的水果"><strong>选择你最喜欢的水果是？</strong></p>

然后用html()方法进行操作

var p_html =  $("p").html();
alert(p_html);

那么会显示<strong>选择你最喜欢的水果是？</strong>这一段话。

如果把html方法替换成text方法，则会显示选择你最喜欢的水果是？这一段话。

html和text方法如果传递进参数，则表示把元素设置成参数里的字符串。

如查要获取各种表单元素的值，可以使用jQuery的val()方法。

$("this").val();//其中this表示一个文本框或者密码框
$("this").val("设置元素");

跟html(),text()方法一样也可以设置或者获取文本框或密码框的值。

val方法还可以获取下拉列表，单选框的值，如果元素为多选，则返回一个包含所有选择的值的数组。

要设置下拉列表的选项：

$("#single").val("选择值");

设置多选框的值：

$("#multiple").val(["choise1","choise2"]);//以数组的形式赋值

同样，设置多选框和单选框：

$(":checkbox").val(["check1","check2"]);
$(":radio").val(["radio2"]);

选择一个节点，如果要获取这个节点的子元素的集合，可以使用jQuery的children()方法。

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

这个方法只考滤子元素而不考虑子元素下面的元素，返回的是一个jQuery对象的数组。

获取某个节点相邻的下一个节点使用next()方法。

获取某个节点相邻的前一个节点使用prev()方法。

获取前后所有的同辈节点使用siblings()方法

closest()方法用于获取最近的匹配元素。首先查找自身是否匹配，如果匹配直接返回自身，如果不匹配则向上查找父元素，逐级向上查找直到匹配为止，如果都不匹配则返回空。

parent()方法返回每个匹配元素的父级元素
parents()方法返回匹配元素的所有祖先元素

css()方法可以直接读取和设置节点中的样式。

$("p").css("color");//获取p元素的颜色。
$("p").css("color", "red");//设置p元素的颜色为红色。

如果设置css样式时的值为数字，则会直接转化为像素值。css中的一些属性带有-符号，比如background-color，设置时可以写成background-color或者backgroundColor。

获取元素的高度或者宽度可以使用以下两种方法：

$("element").css("height");
$("element").height();

两者的区别是第1种方法设置的高度与样式设置有关，可能会得到auto或者15px之类的字符串，而height()方未能获取的高度是元素在页面中的实际高度。

与height()方法相对应的是width()方法。这2个方法获取到的是数字且不带单位，单位都是像素也就是px。

jQuery还提供获取元素所在位置的功能：offset()和position()方法

var offset = $("p").offset();//当前元素在当前窗口的偏移量
var left = offset.left;//获取左偏移量
var top = offset.top;//获取上偏移量


var position = $("p").position();//当前元素在最近一个position样式属性设置为relative或者absolute父节点的相对偏移
var left = position.left;
var top = position,top;

scrollTop()和scrollLeft()方法获取元素的滚动条距顶端和距左端的距离，如果指定一个参数，可以控制元素的滚动条滚动到指定位置。

    原文作者：whatcanhumando
    原文地址: https://www.jianshu.com/p/f0720a8fae6b
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞