jQuery中的DOM操作

Posted 2020-09-10 风雨飘飘飘啊飘

 DOM：是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中的所有标准组件。DOM解决了Netscape的javascript和Microsoft的JScript之间的冲突。

DOM操作:DOM-Core、html-DOM、CSS-DOM

获取

节点操作

查找节点

①查找元素节点：

var $li=$("ul li:eq(1)");//获取<ul>里第2个<li>节点
var li_txt=$li.text();//获取第2个<li>元素节点的文本内容
alert(li_txt)；//打印文本内容

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

var $para=$("p");//获取<p>节点
var p_txt=$para.attr("title");//获取<p>元素节点属性title
alert(p_txt);//打印title属性值

创建节点

用jQuery选择器能够快捷轻松地查找到文档中的某个特定的元素节点，然后可以用attr()方法来获取元素的各种属性的值。

①创建元素节点。

var $li_1=$("<li></li>");
var $li_2=$("<li></li>");

②创建文本节点。

var $li_1=$("<li>香蕉</li>");

③创建属性节点。

var $li_1=$("<li title=\'雪梨\'>雪梨</li>");

插入节点

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

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

appendTo() 将所有匹配的元素追加到指定的元素中。$(A).appendTo(B) //将A追加到B中

prepend() 向每个匹配的元素内部前置内容。

prependTo()将所有匹配的元素前置到制定的元素中。$(A).prependTo(B) //将A前置到B中

after() 在每个匹配的元素之后插入内容。

inserAfter() 将所有匹配的元素插入到指定元素的后面 $(A).insertAfter(B) //将A插入到B后面

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

insertAfter() 在所有匹配的元素之前插入内容。

insertBefore()将所有匹配的元素插入到指定的元素的前面。$(A).insertBefore(B) //将A插入到B前面

 

删除节点

jQuery提供了三种删除节点的方法：remove()、detach()和empty()

 

①remove()方法：作用是从DOM中删除所有匹配的元素，传入的参数用于数据jQuery表达式来筛选元素。

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

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

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

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

②detach()方法：从DOM中去掉所有匹配的元素，所有绑定的事件、附加的数据等都会保留下来。

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

 

复制节点

clone()方法：复制节点后，被复制的新元素并不具有任何行为。

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

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

 

替换节点

replaceWith()和replaceAll()

replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。

$("p").replaceWith("<strong>你不喜欢的水果是？</strong>");   //将前者替换成后者

replaceAll()方法与replaceWith()方法作用相同，只是颠倒了replaceWith()的操作

$("<strong>你不喜欢的水果是？</strong>").replaceAll("p");  //将后者替换前者

 

 

包裹节点

如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()。该方法对于需要在文档中插入额外的结构化标记非常有用。   

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

$("strong").wrap("<b></b>");→→

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

$("strong).wrapAll("<b></b>");→→

如果被包裹的多个元素间有其它元素，其它元素会被放到包裹元素之后。

 

wrapInner()方法：该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

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

 

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

1.获取属性和设置属性。

获取属性

设置属性

2.删除属性。

jQuery1.6中新增了prop()和removeProp()，分别用来获取在匹配的元素集合中的第一个元素的属性值和为匹配的元素删除设置的属性。

 

样式操作

1.获取样式和设置样式

2.追加样式：jQuery提供了专门的addClass()方法来追加样式。

CSS中的规定：①如果给一个元素添加了多个class的值，那么就相当于合并了它们的样式

　　　　　　　②如果有不同的class设定了同一样式属性，则后者覆盖前者。

③移除样式：removeClass()方法，作用是从匹配的元素中删除全部或者指定的class

删除多个class：

 

也可以空格的方式删除多个class名

不带参数的时候会把class的值全部删除：

④切换样式：toogle()方法

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

jQuery还提供了一个toggleClsss()方法控制样式上的重复切换，如果类名存在则删除它，如果类名不存在则添加它。

⑤判断是否含有某个样式

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

 

 

设置和获取HTML、文本和值

①html()方法：获取HTML结构文档

获取<p>元素的HTML代码

设置<p>元素的HTML代码

②text()方法：可以用来读取或者设置某个元素中的文本内容。

获取：

设置：

③val()方法：用来设置和获取元素的值

focus()方法相当于js中的onfocus()方法，作用是处理获得焦点时的事件。

blur()方法相当于js中的onblur()方法，作用是处理失去焦点时的事件。

val()不仅能设置元素的值，同时能获取元素的值

 

 

遍历节点：

①children()方法

该方法用于取得匹配元素的子元素的集合。只考虑子元素而不考虑其他后代元素。

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

②next()方法

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

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

③prev()方法

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

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

④siblings()方法

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

var $p2=$("p").siblings();//取得p元素的同辈元素

⑤closest()方法

该方法用于取得最近的匹配元素。

 

 

CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。

可以直接利用css()方法获取元素的样式属性

也可以直接利用css()方法设置某个元素的单个样式

css()方法也可以同时设置多个样式属性：

对透明度的设置，可直接使用opacity属性：

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

②position()方法：它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对pianist，返回的对象也包含top和left属性。

 

③scrollTop()方法和scrollLeft()方法

这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。

可以为以上两个方法指定一个参数，控制元素的滚动条滚动到指定位置。