jQuery系列2---DOM操作和事件

野性酷女 2022-09-27 14:27 165阅读 0赞

# 一、DOM操作的分类 #

一般情况下，DOM操作分三个方面：DOM Core、HTML-DOM和CSS-DOM

### 1.1 DOM Core ###

并不是JavaScript所专有，也不仅仅只操作HTML文档。只要文档是DOM结构，都可以使用核心DOM中的方法，如html文档和xml文档都可以使用getElementByxx(s)相关的方法获得元素

### 1.2 HTML-DOM ###

专门针对HTML的一种DOM操作。提供了一些专属的方法。例如，直接通过document对象获取标签对象或操作标签的属性。这两种DOM操作都是HTML-DOM。

例如：document.froms element.src

### 1.3 CSS-DOM ###

CSS-DOM是针对CSS的操作。主要作用就是获取和数组style对象的各种属性。让网页呈现出不同的效果。

例如：element.style.color = “red”;

# 二、JQuery基础DOM操作 #

## 2.1 获取和设置元素的内容 ##

> 三个方法：text()、html()和 val()

<!DOCTYPE html>
    <html> <head> <meta charset="UTF-8"> <title></title> <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { //获取得到的标签的内的文本，不包括内部的标签。但是内部标签与标签中的空格会获取到 var text = $(".box").text(); // ele.innerText console.log(text); var html = $(".box").html(); //标签内的所有内容，包括子标签本身 ele.innerHTML console.log(html); //上面的方法不传入参数表示只是获取，如果传入字符串表示设置 // $(".box").text("哈哈哈"); //设置html，如果有标签，则会解析出来 $(".box").html("<button>点我啊</button>") }) $(function () { $("div button").click(function () { //获取一个标签的value值(如果有) var inputText = $("div input").val(); alert(inputText); }) }) </script> </head> <body> <div class="box"> <a href="http://www.yztcedu.com">点我去育知同创</a> </div> <div> <input type="text" name="user" id="user" value="" /> <br /> <button>获取输入框中的值</button> </div> </body> </html>

## 2.2 获取和修改元素的属性 ##

> attr(属性名)方法操作

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript"> $(function() { //获取属性href的值 var $href = $("div a").attr("href"); console.log($href); //点击按钮的时候更换属性的值 $("div button").click(function () { $("div a") .attr("href", "http://www.sina.com.cn") //参数1：属性名 参数2：属性值 .attr("title", "浪浪") .text("浪一下"); }) }) </script>
    
        </head>
    
        <body>
            <div class="box">
                <a href="http://www.yztcedu.com">点我去育知同创</a>
            </div>
            <div><button>更换友情链接</button></div>
        </body>
    
    
    </html>

> 如果需要同时设置多个属性也可以把多个属性封装在一个对象中

$("div a")
      .attr({
            href:"http://www.sina.com.cn",
            title:"浪浪"
         })
      .text("浪一下");

## 2.3 元素的样式操作 ##

这里的样式操作主要是针对一个元素的class属性进行操作。一般有一些潜规则：id是给js用的，class是给css用的。所以，大家希望用class去设置样式。

对样式的操作包括：获取class，设置class，追加class，删除class，切换class，判断是否有class属性

### 2.3.1 获取和设置样式 ###

> class也是属性，所以获取和设置的方法与获取和设置属性的方法一致。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css"> div.nomal{ width: 200px; height: 200px; background: pink; border: 1px dashed blue; } div ul{ list-style: none; } .big{ width: 400px; height: 400px; border: 1px dashed green; } .color{ background: gray; } </style>
            <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
    
            <script type="text/javascript"> $(function () { $("li:nth-child(1)").click(function () { $("div#box").attr("class", "big"); }) $("li:nth-child(2)").click(function () { $("div#box").attr("class", "color"); }) }) </script>
        </head>
        <body>
            <div class="nomal" id="box">我是div中的元素</div>
    
            <div>
                <ul>
                    <li><button>点我变大</button></li>
                    <li><button>点我变色</button></li>
                </ul>
            </div>
        </body>
    </html>

### 2.3.2 追加样式 ###

替换样式会把原来的全部更新，有的时候，我们只想向更新某个样式，则使用追加。

> CSS规定，一个元素的class属性可以多个值，多个值之间用空格隔开。表示合并这些样式的值。如果有重复的，则以后面的为准
> 
> JQuery使用addClass方法来追加样式.
> 
> addClass方法可以完成追加的效果

$(function () { 
        $("ul li:first").click(function () { 
            //追加样式
            $("#box").
            ("big");
        })
    
        $("li:eq(1)").click(function () { 
            $("#box").addClass("color");
    
        })
    })

### 2.3.3 移除样式 ###

removeClass(样式名)

### 2.3.4 切换样式 ###

> toggleClass(样式)
> 
> 切换样式，如果类名存在则删除，不存在则添加

$(function () { 
        $("li:last").click(function () { 
            //该方法会自动判断这个class是否存在，如果存在就删除，不存在就添加
            $("#box").toggleClass("color");
        })
    
    })

### 2.4.5 判断是否有指定的class ###

> hasClass(样式)

## 2.4 each方法的使用 ##

# 三、CSS-DOM操作 #

CSS-DOM操作就是操作读取和设置sytle对象的各种操作。使用style属性只能获取行内style属性，内部样式和外部样式则无法获取。用JQuery一切都变得简单很多。

## 3.1 使用css方法获取和设置css属性 ##

css方法既可以获取行间样式属性，也可以获取内部和外部样式的属性

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css"> .box{ width: 300px; height: 300px; border: 1px dashed red; background: pink; } </style>
            <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript"> $(function() { $("div button").click(function () { var bg = $(".box").css("backgroundColor"); //获取背景色。返回的是rgb颜色 // alert(bg); //设置背景色。 // $(".box").css("background-color", "#808080"); //也可是使用对象同时设置多个css属性 $(".box").css({ "background-color":"#808080", "border":"10px solid green"}); //单独设置透明度。第二个参数是number可以不加引号。(加上也可以的) $(".box").css("opacity",0.5); //设置宽高属性既可以用css方法，也可以使用width方法和height方法 // $(".box").css("width", "800px"); //使用css设置宽 //使用width方法。只传递数字表示为1200px。 也可以写"1200px" $(".box").width(1200); }) }) </script>
        </head>
        <body>
            <div id="box" class="box">
    
            </div>
            <div>
                <button>更换颜色</button>
            </div>
        </body>
    </html>

> css方法使用总结：
> 
> 1.  如果只传入一个字符串，则是获取匹配的第一元素的这个字符串表示的属性的值。css(“backgroundColor”)获取背景色。
> 2.  如果传入的是一个数组，则可以获取匹配的第一个元素的多个属性值。
> 3.  如果传入两个参数：第一个参数是一个字符串，第二个参数是字符串或者数字。则表示设置所有匹配元素的属性的值。
> 4.  如果传入的是一个js对象，则表示同时设置多个css属性和值

## 3.2 offset方法 ##

> 获取这个元素在当前文档的相对偏移。其中返回的对象包含两个属性，left和top。(这个值类似pageX和pageY)

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 300px; height: 300px; border: 1px dashed red; background: pink; } </style>
            <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript"> $(function() { $("button").click(function () { //获取相对文档偏移量 获取到的对象有两个属性，一个left一个top var $off = $(".box").offset(); console.log($off.left + " " + $off.top); //设置相对文档偏移量 $(".box").offset({top:300, left:300}) }) }) </script>
        </head>
        <body>
            <div id="" style="position:absolute;left: 20px;">
                <div id="box" class="box"></div>        
            </div>
            <div>
                <button>获取偏移量</button>
            </div>
        </body>
    </html>

## 3.3 position方法 ##

获取标签相对于参照定位标签(参照物父容器)的偏移量

position（）方法的返回值和offset()一样，有top和left

**注意：这个方法不接受任何参数，所以只能获取不能设置。**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 400px; height: 400px; border: 1px dashed red; background: pink; position: relative; left: 50px; } .box div{ width: 300px; height: 300px; border: 1px solid green; background: #808080; position: absolute; left: 20px; } </style>
            <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript"> $(function() { $("button:first").click(function () { var $position = $(".box div").position(); console.log($position.left + " " + $position.top); }) }) </script>
        </head>
        <body>
            <div class="box">
                <div></div>
            </div>
            <div>
                <button>获取偏移量</button>
                <button>设置偏移量</button>
            </div>
        </body>
    </html>

## 3.4 scrollTop()和scrollLeft()方法 ##

> 获取某个元素的滚动条距离上端和左端的滚动的距离。
> 
> 也可以设置让滚动条去滚动

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css"> p { width: 400px; height: 100px; overflow-x: scroll; overflow-y: } </style>
            <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript"> $(function() { $("button:eq(0)").click(function() { var top = $("p:first").scrollTop();//获取垂直滚动条距离顶端的距离 var left = $("p:first").scrollLeft();//获取水平滚动条距离左端的距离 console.log(top + " " + left); }) var per = 1; var $p = $("p:first"); var timerId; //自动滚屏 $("button:eq(1)").click(function() { timerId = setInterval(function() { var top = $p.scrollTop(); $p.scrollTop(top + per);//更改垂直滚动条距离顶端的距离，则滚动条滚起来 }, 50); }) $("button:eq(2)").click(function() { //取消自动滚屏 clearInterval(timerId); }) }) </script>
        </head>
    
        <body>
            <p>我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1
            </p>
            <p>我要滚动了 2 </p>
            <button>获取滚动距离 </button>
            <button>自动滚屏 </button>
            <button>取消自动滚屏 </button>
        </body>
    
    </html>

# 四、DOM节点操作 #

## 4.1 创建节点 ##

### 4.1.1 创建元素节点 ###

var $li1 =$("<li></li>"); //创建一个li节点

### 4.1.2 创建文本节点 ###

var $li1 =$("<li>JavaScript</li>");   //创建一个li节点和一个文本节点。元素节点和文本节点一起创建的

### 4.1.3 创建属性节点 ###

var $li1 = $("<li id='js'>javaScrpt</li>"); //创建属性节点同元素节点文本节点一起创建

## 4.2 插入节点 ##

> a.append(b) : 向a中追加一个b
> 
> a.appendTo(b) : 把a追加的b中
> 
> a.prepend(b): 在a中的最前面追加b
> 
> a.prependTo(b): 把a追加到b的最前面
> 
> a.after(b) : 在a元素的后面插入一个b
> 
> a.before(b) : 在a元素的前面插入一个b

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript"> $(function () { var $li1 = $("<li id='js'>javaScrpt</li>"); var $ul = $("ul"); // $ul.append($li1); //向ul中追加一个li标签。 插入之后 li是ul的子标签 // $li1.appendTo($ul); // 将$li1追加到$ul中。 其实是颠倒了append的逻辑 // $ul.prepend($li1); //向ul的最前面追加一个li标签 // $ul.after($li1); //在匹配的元素之后插入。 插入之后li是ul的兄弟标签 $ul.before($li1); 在匹配的元素之前插入。 插入之后li是ul的兄弟标签 }) </script>
        </head>
        <body>
            <ul>
                <li>c++</li>
            </ul>
        </body>
    </html>

## 4.3 删除节点 ##

> remove() 删除这个节点，绑定的事件会丢失。 干掉自己
> 
> detach() 删除节点，但是绑定的事件还在 干掉自己
> 
> empty() 清空这个节点的所有内容。但是这个节点还在。 干掉所有的后代
> 
> 三个方法可以完成删除节点的操作

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript"> $(function () { $(".btns button:eq(0)").click(function () { //删除找到的标签。删除的标签会返回。 绑定的事件会丢失。 var $removed = $(".languages li:nth-child(2)").remove(); //追加到末尾 $("ul.languages").append($removed); }) $(".btns button:eq(1)").click(function () { //与remove不同的是，他绑定的事件、附加的数据还在 var $removed = $(".languages li:nth-child(2)").detach(); $("ul.languages").append($removed); }) $(".btns button:eq(2)").click(function () { //清空找到的节点的所有内容，包括所有后代节点。节点还在。 这个其实并没有清除节点 $(".languages li:nth-child(2)").empty() }) }) </script>
        </head>
        <body>
            <ul class="languages">
                <li>c++</li>
                <li>javaScript</li>
                <li>java</li>
                <li>php</li>
            </ul>
            <ul class="btns">
                <li><button>使用remove删除第二个li</button></li>
                <li><button>使用detach删除第二个li</button></li>
                <li><button>清空元素内容</button></li>
            </ul>
        </body>
    </html>

## 4.4 复制节点 ##

## 4.5 替换节点 ##

> a.replaceWith(b): a中的每一个元素都用 b去替换 b干掉a
> 
> a.replaceAll(b) : 用a去把满足b的每一个替换掉。 a干掉b

## 4.6 包裹节点 ##

> b.wrap(a) 每一个b分别用一个a包裹
> 
> b.wrapAll(a) 所有的b用同一个a包裹，如果有其他元素则扔到包裹的后面
> 
> b.wrapInner(a); 用a去包裹b的内容。不包裹b这个标签本身。
> 
> b.unwap()去除b的父元素

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript"> $(function () { $(".btns button:eq(0)").click(function () { //用div把 .languages 包裹起来。 如果多个元素需要包裹，则会有多个div // $(".languages").wrap("<div></div>"); //所有的用一个div包裹起来。 如果中间有其他元素，其他元素则放置包裹之后 // $("ul").wrapAll("<div></div>"); //.languages li 标签中的内容用span包括。 注意：不包裹标签字节，只包括标签的内容 $(".languages li").wrapInner("<sapn></span>"); }) }) </script>
        </head>
        <body>
            <ul class="languages">
                <li>c++</li>
                <li>javaScript</li>
                <li>java</li>
                <li>php</li>
            </ul>
            <p>擦，我竟然被扔出来了</p>
            <ul class="btns">
                <li><button>给ul包裹一个div</button></li>
    
            </ul>
        </body>
    </html>

# 五、JQuery中的事件 #

## 5.1 基础事件 ##

### 5.1.1 事件绑定 ###

> 元素对象.bind(事件，\[可选的额外参数\], 事件处理函数)
> 
> 可选参数2一般省略
> 
> 参数2的事件类型：
> 
> ![65132183.jpg][]

### 5.1.2 解除绑定 ###

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript"> $(function(){ var firstBtn = $("button:first"); firstBtn.bind("click", function () { alert("我被点击了"); }) firstBtn.bind("mouseover", function () { $(this).css("background", "red"); }) firstBtn.bind("mouseout", function () { $(this).css("background", "#FFC0CB"); }) $("button:eq(1)").click(function () { firstBtn.unbind("click"); //解除click事件的绑定 }) $("button:eq(2)").click(function () { firstBtn.unbind(); //不传参数表示解除所有的事件绑定 }) }) </script>
    </head>
    <body>
        <button>我有事件了</button>
        <button>解除点击事件</button>
        <button>解除所有事件</button>
    </body>
    </html>

### 5.1.3 简写事件 ###

经常用到的事件，jquery也提供了一种简写的方式，效率一样，只是代码写法简化了

$("button:eq(1)").click(function () { 
        alert("解除")
        firstBtn.unbind("click");  //解除click事件的绑定 
    })

### 5.1.4 复合事件 ###

JQuery提供了两个合成事件：hover和toggle

1.  hover(f1, f2)用于模拟光标悬停事件，当光标移动到元素上的时候，会触发指定的第一个函数，当光标移除这个元素时，会触发第二个元素
2.  功能1：toggle(f1, f2, … fn) 用于模拟鼠标连续单击事件，当第一次单击时只需第一个函数，当第二次单击执行第二个函数，…，执行完毕之后再循环来。功能2：不传任何参数，可以让元素隐藏或显示。 但是从1.9版本开始，只剩下了功能2

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css"> #box{ width: 200px; height: 200px; border: 1px solid red; text-align: center; line-height: 200px; } </style>
            <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript"> $(function () { $("div").hover(function () { //鼠标进入元素区域 $(this).css("background", "red"); }, function () { //鼠标离开元素区域 $(this).css("background", "pink") }); /*$("div").toggle(function () { $("p").html("第一次点我") }, function () { $("p").html("第二次点我") }, function () { $("p").html("第三次点我") })*/ $("button").click(function () { $("div").toggle(); //如果隐藏就显示，如果显示就隐藏。 }) }) </script>
        </head>
        <body>
            <div id="box">
                我是个盒子
            </div>
            <p>哈哈哈</p>
            <button>点我</button>
        </body>
    </html>

## 5.2 事件对象 ##

### 5.2.1 事件对象的获取 ###

获取事件对象非常简单，只需要在绑定事件的时候的事件处理函数添加一个参数即可。例如：

ele.click(function(event)\{ \}); event就是事件对象。函数触发的时候，事件对象创建，函数执行完毕事件对象销毁，只能在函数内部使用。

### 5.2.2 事件对象的常用属性 ###

经过JQuery封装后的事件对象，有如下常用的属性可供使用。

1.  type属性 获取事件类型
2.  preventDefault()方法 阻止事件的默认行为。兼容各种浏览器。
3.  stopPropation()方法 阻止事件的冒泡
4.  target属性 获取到触发事件的元素
5.  pageX和pageY属性 光标相对于页面的距离。如果有滚动条，还要加上滚动条的距离
6.  offsetX和offsetY
7.  clientX和clientY
8.  which属性。 如果是鼠标事件则获取鼠标的左(1)中(2)右(3)键，如果是键盘则获取键盘的按键。
9.  metaKey属性。获取ctrl按键。

### 5.2.3 事件的冒泡以及默认处理 ###

preventDefault()阻止默认行为，stopPropation()阻止冒泡。 事件函数中返回false，可以同时停止默认行为和冒泡。所以，可以直接返回false，而不用调用上述两个方法。

## 5.3 高级事件 ##

### 5.3.1 事件模拟操作 ###

1.  ele.trigger(事件类型)

1.  trigger也可以触发自定义事件

1.  执行默认操作：trigger触发的事件，不仅仅触发了事件函数，也会触发浏览器的默认操作。比如，给input注册一个focus事件，则不但触发focus事件，还会触发浏览器的默认事件，使input获得焦点。使用trigerHanddler可以避免浏览器的默认操作

### 5.3.2 事件命名空间 ###

JQuery为了方便管理事件，给事件提出了命名空间的概念。 语法：事件.命名空间

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript"> $(function() { //此时绑定的事件就使用了命名空间。 $("button:eq(0)").bind("click.space", function() { alert("你点击了按钮1"); }).bind("mouseover", function () { alert("鼠标来了") }) $("button:eq(1)").bind("click.space", function() { alert("你点击了按钮2"); }) $("button:eq(2)").bind("click", function() { alert("你点击了按钮3"); }) $("button:eq(3)").click(function () { //解除这个命名空间下的所有事件: 按钮3的click事件和按钮1mouseover事件没有命名空间，所以不会解绑 $("button").unbind(".space") }) }) </script>
        </head>
        <body>
            <ul>
                <li>
                    <button>第1个按钮</button>
                </li>
                <li> <button>第2个按钮</button>
                </li>
                <li><button>第3个按钮</button></li>
                <li><button>解绑space命名空间内的所有事件</button></li>
            </ul>
        </body>
    </html>

### 5.3.3 事件委托 ###

delegate委托
    undelegate解除委托

[65132183.jpg]: http://o7cqr8cfk.bkt.clouddn.com/public/16-11-17/65132183.jpg