jquery DOM

2024年2月22日 180次阅读 来源: xuehen

jquery封装了一些dom操作，粗略看起来是在写法上精简了不少，最明显的就是jquery中的dom操作以$（）符号作为最显著的标准。但本质上，两种方式获取的结果对象是不一样的。现在先来总结一下，jquery中的一些dom操作接口。

节点的操作

  • 查找节点：

var $var_1=$("htmltype");   //获取所有htmltype节点

例如：

var $ul_1=$("ul");

  • 创建并追加节点：

var $var_1=$("<htmltype>");//这句话是创建一个节点
$("htmltype2").append($var_1) ; //这句话是把节点插入所有htmltype2节点中

例如：

var $li_1=$("<li  title="title1">香蕉</li>");
$("ul").append($li_1);

其中插入方法有以下几种：

append() 把B追加到A内部（所有的A元素，以下类似）
appendTo() 把A追加到B内部
prepend() 把B追加到A内部的内容前
prependTo() 把A追加到B的内容前
after() 在A后追加B
insertAfter() 在A前追加B
before() 在A前追加B
insertBefore()在A后追加B

例如：

$("ul").append("<li>你好</li>");//在ul内部追加li
$("<li>你好</li>").appendTo("ul");//在ul内部追加li

  • 删除节点

remove() 删除该元素
empty() 清空节点，包括后代节点

例如：

   $("ul  li").remove(“li
”);//删除ul中li元素属性title="菠萝"的元素

  • 复制节点

clone();//复制本节点

例如：

$("ul  li:eq[1]").clone().appenTo("ul");//复制并追加到ul中，只复制是不会显示出来的

  • 替换节点

replaceWith();//将B替换所有A
replaceAll();//将A替换所有B

  • 包裹节点

warpAll();//用B包裹A
warpInner();//用B包裹A的内容

例如：

 <div id="div1">
     <p id="p1">我是p1里的内容</p>
     <p id="p2">我是p2里的内容</p>
</div>

//执行代码： 
 $("#p1").wrap($("#p2"));
//执行之后的结果为：

<div id="div1">
    <p id="p2">
         我是p2里的内容<p id="p1">我是p1里的内容</p>
    </p>
    <p id="p2">我是p2里的内容</p>
</div>

注意到：当选择DOM元素用wrap包裹元素的时候，是另外复制一份包裹元素的。并不是将被包裹元素移动到包裹元素里。

属性操作

  • 获取和设置属性

var $var_1=$("p");//这句话是获取节点P
var $p_1=$var_1.attr("title");//获取节点P的title属性
var $p_2=$var_1.attr("title","你好");//设置节点P的title属性为"你好"

  • 删除属性

$("p").removeAttr("title");//删除节点P的Title属性

样式操作

  • 获取和设置样式

var $var_class=$("p").attr("class");//获取节点P的class属性
$("p").attr("class","class1");设置节点P的class属性为样式表类class1

  • 追加样式

addClass() 添加样式到A
$("p").addClass("another");//例如，添加样式表类another类到P

  • 移除样式

removeClass() 移除类

  • 切换样式

toggleClass() 切换clss属性类为新的类

  • 判断某个样式是否存在

hasClass()

  • css(“属性”，”值”)
    css(“属性”，”值”) 设置元素css某个属性的值，如：

$("p").css("color","red");//设置P的css属性{color:red;}

内容的操作

html() 该方法获取html元素的内容，如：var var1=$("p").html();//获取P元素内的内容
text() 获取或设置某个html元素的内容
val() 获取元素的Value值
children() 获取html元素的所有子节点
next()  获取html元素后紧邻的同辈节点
prev() 获取html元素前紧邻的同辈节点
siblings() 获取html元素前后紧邻的同辈节点 

jquery dom vs. dom

DOM对象是我们用传统的方法（javascript）获得的对象，jQuery对象就是用jQuery的类库选择器获得的对象。JQuery对象就是通过jQuery包装DOM对象后产生的对象。JQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；
例如：

$("#color").html();//获取id为color的元素内的html代码，html()是jQuery特有的方法;

它等同于:

document.getElementById("color").innerHTML;

DOM对象就是javascript固有的一些对象。DOM对象能使用javascript固有的方法，但是不能使用jQuery里面的方法。
例如

$("#id").innerHTML 和$("#id").checked

之类的写法都是错误的，可以用

$("#id").html()和$("#id").attr("checked")

之类的 jQuery方法来代替。

var domObj =document.getElementById("id"); //DOM对象
var $obj =$("#id"); //jQuery对象;

dom 对象jquery dom 对象的相互转化

  • jQuery对象转换成DOM对象
    jquery提供了两种方法将一个jquery对象转换成一个dom对象，即

[index]和get(index)

jquery对象就是一个数组对象
如下是将一个jquery对象转换成dom对象，再使用dom对象的方法
代码如下:

var $cr=$("#cr"); //jquery对象
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);
alert(cr.checked); //检测这个checkbox是否给选中

  • dom对象转换成jquery对象
    对于一个dom对象，只需要用$()把dom对象包装起来，就可以获得一个jquery对象了，方法为

$(dom对象);

代码如下:

var cr=document.getElementById("cr"); //dom对象
var $cr = $(cr); //转换成jquery对象

转换后可以任意使用jquery中的方法了.

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