web前端之锋利的jQuery三：jQuery中的DOM操作

来源：互联网发布：手机淘宝链接怎么复制编辑：程序博客网时间：2024/06/05 10:07

web前端之锋利的jQuery三：jQuery中的DOM操作

一般来说，DOM分为三个方面：DOM Core(核心) 、HTML-DOM和CSS-DOM

DOM Core：
JavaScript中的getElementById()、getElementsByTagName()、getAttribute()、setAttribute()都是DOM Core的组成部分。详情查看

HTML-DOM：
在使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。HTML-DOM提供了一些更为简明的记号来描述各种HTML元素的属性。
例如：
document.forms //HTML-DOM提供了一个form对象
element.src //使用HTML-DOM老获取某元素的src属性的方法

CSS-DOM：
作用于获取和设置style对象的各种属性。
element.style.color=”red”

jQuery中的DOM操作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>jQuery选择器</title>    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>    <script type="text/javascript">    $(document).ready(function(){        //查找元素节点        var $li=$("ul li:eq(1)");//获取ul第二个li节点        var li_txt=$li.text();//获取第二个li元素节点的文本内容        //alert(li_txt);        //查找属性节点        var $para=$("p");//获取p节点        var p_txt=$para.attr("title");//获取p节点属性title        //alert(p_txt);        // 创建节点        // 创建元素节点：        /*        var $li_1=$("<li></li>");    //创建第一个li元素        var $li_2=$("<li></li>");    //创建第二个li元素        $("ul").append($li_1);        $("ul").append($li_2);        */        //创建文本节点        /*        var $li_1=$("<li>香蕉</li>");        var $li_2=$("<li>雪梨</li>");        $("ul").append($li_1);        $("ul").append($li_2);        */        //创建属性节点        var $li_1=$("<li title="香蕉">香蕉</li>");        var $li_2=$("<li title="雪梨">雪梨</li>");        $("ul").append($li_1);        $("ul").append($li_2);    });    </script></head><body>    <p title="选择你喜欢的水果">你最喜欢的水果是？</p>    <ul>        <li title="苹果">苹果</li>        <li title="橘子">橘子</li>        <li title="菠萝">菠萝</li>    </ul></body></html>

插入节点：

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

html代码：<p>I am </p>jQuery代码：$("p").append("<b>fzw</b>");结果：<p>I am <b>fzw</b></p>

appendTo() 将所有匹配的元素加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).appendTo(B)的操作，既不是将B追加到A中，而是将A追加到B中。

html代码：<p>I am </p>jQuery代码：$("<b>fzw</b>").appendTo("p");结果：<p>I am <b>fzw</b></p>

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

html代码：<p>I am </p>jQuery代码：$("p").prepend("<b>fzw</b>")结果：<p><b>fzw</b>I am </p>

prependTo() 将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的，$(A).prependTo(B)的操作，既不是将B前置到A中，而是将A前置到B中

html代码：<p>I am </p>jQuery代码：$("<b>fzw</b>").prependTo("p")结果：<p><b>fzw</b>I am </p>

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

html代码：<p>I am </p>jQuery代码：$("p").after("<b>fzw</b>");结果：<p>I am </p><b>fzw</b>

insertAfter() 将所有匹配的元素插入到指定元素的后面，实力上，使用该方法是颠倒了常规的$(A).after(B)的操作，既不是将B插入到A后面，而是将A插入到B后面

html代码：<p>I am </p>jQuery代码：$("<b>fzw</b>").insertAfter("p"); 结果：<p>I am </p><b>fzw</b>

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

html代码：<p>I am </p>jQuery代码：$("p").before("<b>fzw</b>"); 结果：<b>fzw</b><p>I am </p>

insertBefore() 将所有匹配的元素插入到指定元素的前面，实力上，使用该方法是颠倒了常规的$(A).before(B)的操作，既不是将B插入到A前面，而是将A插入到B前面

html代码：<p>I am </p>jQuery代码：$("<b>fzw</b>").insertBefore("p"); 结果：<b>fzw</b><p>I am </p>

删除节点：
1、remove()方法：
$(“ul li:eq(1)”).remove(); //获取第二个li元素节点，将它从网页中删除
当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。
var $li=$(“ul li:eq(1)”).remove();
$li.appendTo(“ul”);

2.detach()方法：
detach()方法和remove()方法一样，将它从网页中删除后，该节点所包含的所有后代节点并没有同时被删除。

3.empty()方法：
empty()方法不是删除节点，而是清空节点，他能清空元素中的所有的后代节点

复制节点：
clone()来复制节点
$(ul li).click(function(){
$(this).clone.appendTo(“ul”);
});

替换节点：
replaceWith()替换节点
$(‘p’).replaceWith(“你最不喜欢的水果是？“);

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

包裹节点：

$("strong").wrap("<b></b>");//用b标签吧strong元素包裹起来$("strong").wrapAll("<b></b>");//用b标签把所有的strong元素包裹起来$("strong").wrapInner("<b></b>");//所有的strong元素里面用b标签包裹起来

属性操作：
使用attr()获取和设置属性，removeAttr()方法来删除属性
$(“p”).attr(“title”,”you title”);
$(“p”).attr({“title”:”you title”,”name”:”test”});
$(“p”).removeAttr(“title”);

样式操作：
1.获取和设置样式
var p_class=$(“p”).attr(“class”);//获取样式
$(“p”).attr(“class”,”high”);//设置样式

2.追加样式：
$(“p”).addClass(“another”);

3.移除样式：
$(“p”).removeClass(“another”);

4.切换样式：
$(“p”).toggleClass(“another”);

5.判断是否有某个样式：
$(“p”).hasClass(“another”);

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

1.html()方法

var p_html=$("p").html();//获取p元素内的HTML代码$("p").html("<strong>你最喜欢的水果是？</strong>");//设置p元素内的html代码

2.text()方法

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

3.val()方法
类似于JavaScript中的value属性

var p_val=$("p").val();//获取p元素内的值$("p").val("");//设置p元素内的值

遍历节点：

1.children()方法
该方法用于取得匹配元素的子元素集合
2.next()方法
该方法用于获取匹配元素后面邻近的同辈元素
3.prev()方法
该方法用于获取匹配元素前面邻近的同辈元素
4.siblings()方法
该方法用于获取匹配元素前后所有的同辈元素
5.closest()
该方法用于取得最近的匹配元素，不匹配时，按层级往上查
6.parent(),parents(),closest()的区别
parent()获得一个父节点
parents()获得一堆祖先节点
closest()和parents()类似，但是只返回第一个匹配到的父节点

CSS-DOM操作：

$(“p”).css(“color”);//获取颜色
$(“p”).css(“color”,”red”);//设置颜色
$(“p”).width();//获取宽度
$(“p”).width(“400px”);//设置宽度
offset()方法：
获取元素在当前视窗的相对偏移，返回的对象包含两个属性，即top和left
var offset=$(“p”).offset();
var left=offset.left;
var right=offset.right;

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

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

部分实用的方法（后续动画也会有说到）：
focus()方法处理获得焦点时的事件。
blur()方法处理失去焦点时的事件。
表单元素中的defaultValue属性包含该表单的初始值
this.defaultValue表示当前文本框的默认值
mouseover,鼠标移入发生的动作
mouseout,鼠标移出发生的动作

1 0