前端技术(三)—— javasctipt 介绍:jQuery方法和点击事件介绍（补充）

6. 常用方法

● addClass() 为jQuery对象添加一个或多个class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .d1{
      width: 200px;
      height: 200px;
      background-color: gray
    }
    .d2{
      background-color: yellow;
    }
    .d3{
      border: 1px solid red;
    }
    .d4{
      border-radius: 50px;
    }
  </style>
</head>
<body>
    <button id="btn">按钮</button>
    <div class="d1" id="d"></div>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        //为box1添加class，addClass()可以添加一个或多个class
        $("#d").addClass(["d2","d3"]);
        $("#d").addClass("d4");
      });
    </script>
</html>

在这里插入图片描述

● hasClass() 检查jQuery对象是否含有某个class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .d1{
      width: 200px;
      height: 200px;
      background-color: gray
    }
    .d2{
      background-color: yellow;
    }
    .d3{
      border: 1px solid red;
    }
    .d4{
      border-radius: 50px;
    }
  </style>
</head>
<body>
    <button id="btn">按钮</button>
    <div class="d1 d2 d3 d4" id="d"></div>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        //hasClass() 检查jQuery对象是否含有某个class
        var flag = $("#d").hasClass("d1");
        alert(flag);
      });
    </script>
</html>

在这里插入图片描述

● removeClass()删除jQuery对象的指定class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .d1{
      width: 200px;
      height: 200px;
      background-color: gray
    }
    .d2{
      background-color: yellow;
    }
    .d3{
      border: 1px solid red;
    }
    .d4{
      border-radius: 50px;
    }
  </style>
</head>
<body>
    <button id="btn">按钮</button>
    <div class="d1 d2 d3 d4" id="d"></div>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        //removeClass()删除jQuery对象的指定class
        var flag = $("#d").removeClass("d4");
      });
    </script>
</html>

在这里插入图片描述

● toggleClass() 切换jQuery对象的指定class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .d1{
      width: 200px;
      height: 200px;
      background-color: gray
    }
    .d2{
      background-color: yellow;
    }
    .d3{
      background-color: rebeccapurple;
    }
    .d4{
      border-radius: 50px;
    }
  </style>
</head>
<body>
    <button id="btn">按钮</button>
    <div class="d1 d2 d3 d4" id="d"></div>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        //toggleClass() 切换jQuery对象的指定class
        var flag = $("#d").toggleClass(["d3","d4"]);
      });
    </script>
</html>

在这里插入图片描述

● clone() 复制jQuery元素,当参数为true，元素上的事件也会被复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">添加</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        var $l1 = $("#l1").clone();
        $("#list1").append($l1);
      });
    </script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">添加</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      //为按钮绑定响应函数
      $("#btn").click(function(){
      	//复制jQuery元素,当参数为true，元素上的事件也会被复制
        var $l1 = $("#l1").clone(true);
        $("#list1").append($l1);
      });
    </script>
</html>

在这里插入图片描述

● unwrap() 去除父元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    div{
      width: 300px;
      height: 300px;
      background-color: greenyellow;
    }
  </style>
</head>
<body>
    <button id="btn">去除</button>
    <div>
      <ul id="list">
        <li>牛魔王</li>
        <li id="l1">铁扇公主</li>
        <li>红孩儿</li>
      </ul>
    </div>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        var $l1 = $("#list").unwrap("div");
      });
    </script>
</html>

在这里插入图片描述

● wrap() 添加父元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    #d1{
      width: 300px;
      height: 300px;
      background-color: greenyellow;
    }
    #d2{
      width: 300px;
      height: 300px;
      background-color: red;
    }
  </style>
</head>
<body>
    <button id="btn">去除</button>
    <button id="addbtn">添加</button>
    <div id="d1">
      <ul id="list">
        <li>牛魔王</li>
        <li id="l1">铁扇公主</li>
        <li>红孩儿</li>
      </ul>
    </div>
    <hr/>
    <div id="d2"></div>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        var $l1 = $("#list").unwrap("#d1");
      });
      //为按钮绑定响应函数
      $("#addbtn").click(function(){
        var $l1 = $("#list").wrap("#d2");
      });
    </script>
</html>

在这里插入图片描述

● wrapAll() 添加父元素 （当前所有的元素看成一个整体添加元素）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    #d2{
      width: 300px;
      height: 300px;
      background-color: red;
    }
  </style>
</head>
<body>
    <button id="addbtn">添加</button>
      <ul id="list">
        <li>牛魔王</li>
        <li>铁扇公主</li>
        <li>红孩儿</li>
      </ul>
    <hr/>
    <div id="d2"></div>
    <script>
      //为按钮绑定响应函数
      $("#addbtn").click(function(){
        var $l1 = $("#list li").wrapAll("#d2");
      });
    </script>
</html>

在这里插入图片描述

● wrapInner() 在元素内部增加一层

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    #d2{
      width: 300px;
      height: 300px;
      background-color: red;
    }
  </style>
</head>
<body>
    <button id="addbtn">添加</button>
      <ul id="list">
        <li id="d">牛魔王</li>
        <li>铁扇公主</li>
        <li>红孩儿</li>
      </ul>
    <hr/>
    <div id="d2"></div>
    <script>
      //为按钮绑定响应函数
      $("#addbtn").click(function(){
        var $l1 = $("#list #d").wrapInner("#d2");
      });
    </script>
</html>

在这里插入图片描述

● append() 添加子元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">添加</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      //为按钮绑定响应函数
      $("#btn").click(function(){
      	//复制jQuery元素,当参数为true，元素上的事件也会被复制
        var $l1 = $("#l1").clone(true);
        $("#list1").append($l1);
      });
    </script>
</html>

在这里插入图片描述

● appendTo() 添加到父元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">添加</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      //为按钮绑定响应函数
      $("#btn").click(function(){
      	//复制jQuery元素,当参数为true，元素上的事件也会被复制
        var $l1 = $("#l1").clone(true);
        $l1.appendTo($("#list1"));
      });
    </script>
</html>

在这里插入图片描述

● prepend() 向前添加子元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">添加</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      //为按钮绑定响应函数
      $("#btn").click(function(){
      	//复制jQuery元素,当参数为true，元素上的事件也会被复制
        var $l1 = $("#l1").clone(true);
        $("#list1").prepend($l1);
      });
    </script>
</html>

在这里插入图片描述

● prependTo() 添加到父元素前

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">添加</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      //为按钮绑定响应函数
      $("#btn").click(function(){
      	//复制jQuery元素,当参数为true，元素上的事件也会被复制
        var $l1 = $("#l1").clone(true);
        $l1.prependTo($("#list1"));
      });
    </script>
</html>

在这里插入图片描述

● html() 读取或设置html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">添加</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      //为按钮绑定响应函数
      $("#btn").click(function(){
      	alert($("#list2").html());
      });
    </script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">添加</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      //为按钮绑定响应函数
      $("#btn").click(function(){
      	$("#list2").html("<li>蜘蛛精</li><li>玉兔精</li><li>大象精</li></li>");
      });
    </script>
</html>

在这里插入图片描述

● text() 读取或设置文本内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">点我一下</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      //为按钮绑定响应函数
      $("#btn").click(function(){
      	alert($("#l1").text());
      });
    </script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">点我一下</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      //为按钮绑定响应函数
      $("#btn").click(function(){
      	$("#l1").text("玉面狐狸");
      });
    </script>
</html>

在这里插入图片描述

● after() 向后边添加元素（添加的师兄弟元素）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">点我一下</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      //为按钮绑定响应函数
      $("#btn").click(function(){
        //after() 向后边添加元素（添加的师兄弟元素）
      	$("#l1").after($("<li>张三</li>"));
      });
    </script>
</html>

在这里插入图片描述

● insertAfter() 将元素添加到某元素的后边（添加的师兄弟元素）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">点我一下</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      //为按钮绑定响应函数
      $("#btn").click(function(){
        //insertAfter() 将元素添加到某元素的后边（添加的师兄弟元素）
        $("<li>张三</li>").insertAfter($("#l1"));
      });
    </script>
</html>

在这里插入图片描述

● before() 向前边添加元素（添加的师兄弟元素）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">点我一下</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      //为按钮绑定响应函数
      $("#btn").click(function(){
        //after() 向后边添加元素（添加的师兄弟元素）
      	$("#l1").before($("<li>张三</li>"));
      });
    </script>
</html>

在这里插入图片描述

● insertBefore() 将元素添加到某元素的前边（添加的师兄弟元素）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">点我一下</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      //为按钮绑定响应函数
      $("#btn").click(function(){
        //insertAfter() 将元素添加到某元素的后边（添加的师兄弟元素）
        $("<li>张三</li>").insertBefore($("#l1"));
      });
    </script>
</html>

在这里插入图片描述

● detach() 删除元素（保留元素上的事件）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">删除</button>
    <button id="btn2">添加</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      var $l1 = $("#l1");
      //为按钮绑定响应函数
      $("#btn").click(function(){
        //删除铁扇公主
        $l1.detach();
      });
      $("#btn2").click(function(){
        //删除铁扇公主
        $("#list2").append($l1);
      });
    </script>
</html>

在这里插入图片描述

● empty() 删除所有子元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">删除</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      var $list2 = $("#list2");
      //为按钮绑定响应函数
      $("#btn").click(function(){
        //清空列表
        $list2.empty();
      });
    </script>
</html>

在这里插入图片描述

● remove() 删除元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">删除</button>
    <button id="btn2">添加</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      var $l1 = $("#l1");
      //为按钮绑定响应函数
      $("#btn").click(function(){
        //删除铁扇公主
        $l1.remove();
      });
      $("#btn2").click(function(){
        //删除铁扇公主
        $("#list2").append($l1);
      });
    </script>
</html>

在这里插入图片描述

● replaceAll() 替换某个元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">替换</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      //为按钮绑定响应函数
      $("#btn").click(function(){
        //替换铁扇公主
        $("<li>玉面狐狸</li></li>").replaceAll($("#l1"));
      });
    </script>
</html>

在这里插入图片描述
● replaceWith() 被某个元素替换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">替换</button>
    <ul id="list1">
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>
    <ul id="list2">
      <li>牛魔王</li>
      <li id="l1">铁扇公主</li>
      <li>红孩儿</li>
    </ul>
    <script>
      //为铁扇公主的li绑定点击事件
      $("#l1").click(function(){
        alert("我是铁扇公主~");
      });
      //为按钮绑定响应函数
      $("#btn").click(function(){
        //替换铁扇公主
        $("#l1").replaceWith($("<li>玉面狐狸</li></li>"));
      });
    </script>
</html>

在这里插入图片描述

● attr() 设置/获取元素的指定属性,布尔值属性会返回实际值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">获取属性值</button>
    <hr/>
    <input type="text" readonly></input>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        alert($("input").attr("type"));
        alert($("input").attr("readonly"));
        $("input").attr("value","姓名")
      });
    </script>
</html>

在这里插入图片描述

● prop() 设置/获取元素的指定属性，布尔值属性会返回布尔值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">获取属性值</button>
    <hr/>
    <input type="text" readonly></input>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        alert($("input").prop("type"));
        alert($("input").prop("readonly"));
        $("input").prop("value","姓名")
      });
    </script>
</html>

在这里插入图片描述

● removeAttr() 移除属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">获取属性值</button>
    <hr/>
    <input type="text" readonly value="请填入姓名"></input>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        $("input").removeAttr("readonly");
        $("input").removeAttr("value");
      });
    </script>
</html>

在这里插入图片描述

● val() 设置/获取元素的value属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">设置value</button>
    <button id="btn2">获取value</button>
    <hr/>
    <input type="text" readonly></input>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        $("input").val("姓名")
      });
      $("#btn2").click(function(){
        alert($("input").val());
      });
    </script>
</html>

在这里插入图片描述

● css() 读取/设置元素的css样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">设置css</button>
    <button id="btn2">获取css</button>
    <hr/>
    <div></div>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        $("div").css("background-color","yellow")
        $("div").css("width","200px")
        $("div").css("height","200px")
      });
      $("#btn2").click(function(){
        alert($("div").css("background-color"));
        alert($("div").css("width"));
        alert($("div").css("height"));
      });
    </script>
</html>

在这里插入图片描述

● height() 读取/设置元素的高度

● width() 读取/设置元素的宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">设置css</button>
    <button id="btn2">获取css</button>
    <hr/>
    <div></div>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        $("div").css("background-color","yellow")
        $("div").height("200px")
        $("div").width("200px")
      });
      $("#btn2").click(function(){
        alert($("div").css("background-color"));
        alert($("div").css("width"));
        alert($("div").css("height"));
      });
    </script>
</html>

在这里插入图片描述

● innerHeight() 读取/设置元素的内部高度

● innerWidth() 读取/设置元素的内部宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">设置css</button>
    <button id="btn2">获取css</button>
    <hr/>
    <div></div>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        $("div").css("background-color","yellow");
        $("div").css("padding","10px");
        $("div").height("200px")
        $("div").width("200px")
      });
      $("#btn2").click(function(){
        alert($("div").css("background-color"));
        alert($("div").css("width"));
        alert($("div").css("height"));
        alert($("div").innerHeight());
        $("div").innerWidth("100px");
        alert($("div").innerWidth());
      });
    </script>
</html>

在这里插入图片描述

● outerHeight() 读取/设置元素可见框的高度

● outerWidth() 读取/设置元素可见框的宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">设置css</button>
    <button id="btn2">获取css</button>
    <hr/>
    <div></div>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        $("div").css("background-color","yellow");
        $("div").outerHeight("100px");
        $("div").outerWidth("100px");
      });
      $("#btn2").click(function(){
        alert($("div").css("background-color"));
        alert($("div").outerHeight());
        alert($("div").outerWidth());
      });
    </script>
</html>

在这里插入图片描述

● offset() 读取/设置元素的偏移量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    div{
      height: 300px;
      width: 300px;
      background-color: yellow;
    }
  </style>
</head>
<body>
    <button id="btn">设置坐标</button></button>
    <button id="btn2">获取坐标</button>
    <hr/>
    <div></div>
    <script>
      //为按钮绑定响应函数
      $("#btn").click(function(){
        $("div").offset({top:"200",left:"300"});
      });
      $("#btn2").click(function(){
        alert($("div").offset().top);
        alert($("div").offset().left);
      });
    </script>
</html>

在这里插入图片描述

● position() 读取元素相当于包含块的偏移量
● scrollLeft() 读取/设置元素水平滚动条的位置
● scrollTop() 读取/设置元素垂直滚动条的位置

● eq() 获取指定索引的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .box1{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 10px;
    }
  </style>
</head>
<body>
    <button id="btn">点我</button></button>
    <hr/>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <script>
      //为按钮绑定响应函数
      $(function(){
        $("#btn").click(function(){
          $(".box1").eq(1).css("background-color","#bfa");
        });
      });
    </script>
</html>

在这里插入图片描述

● even() 获取索引为偶数的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .box1{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 10px;
    }
  </style>
</head>
<body>
    <button id="btn">点我</button></button>
    <hr/>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <script>
      //为按钮绑定响应函数
      $(function(){
        $("#btn").click(function(){
          $(".box1").even().css("background-color","#bfa");
        });
      });
    </script>
</html>

在这里插入图片描述

● odd() 获取索引为奇数的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .box1{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 10px;
    }
  </style>
</head>
<body>
    <button id="btn">点我</button></button>
    <hr/>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <script>
      //为按钮绑定响应函数
      $(function(){
        $("#btn").click(function(){
          $(".box1").odd().css("background-color","#bfa");
        });
      });
    </script>
</html>

在这里插入图片描述

● filter() 筛选元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .box1{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 10px;
    }
  </style>
</head>
<body>
    <button id="btn">点我</button></button>
    <hr/>
    <div class="box1"></div>
    <div class="box1 a"></div>
    <div class="box1"></div>
    <div class="box1 a"></div>
    <div class="box1 a"></div>
    <div class="box1 a"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <script>
      //为按钮绑定响应函数
      $(function(){
        $("#btn").click(function(){
          $(".box1").filter(".a").css("background-color","#bfa");
        });
      });
    </script>
</html>

在这里插入图片描述

● first() 获取第一个元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .box1{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 10px;
    }
  </style>
</head>
<body>
    <button id="btn">点我</button></button>
    <hr/>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <script>
      //为按钮绑定响应函数
      $(function(){
        $("#btn").click(function(){
          $(".box1").first().css("background-color","#bfa");
        });
      });
    </script>
</html>

在这里插入图片描述

● last() 获取最后一个元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .box1{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 10px;
    }
  </style>
</head>
<body>
    <button id="btn">点我</button></button>
    <hr/>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <script>
      //为按钮绑定响应函数
      $(function(){
        $("#btn").click(function(){
          $(".box1").last().css("background-color","#bfa");
        });
      });
    </script>
</html>

在这里插入图片描述

● has() 获取含有指定后代的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .box1{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 10px;
    }
  </style>
</head>
<body>
    <button id="btn">点我</button></button>
    <hr/>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"><span>啦啦啦</span></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <script>
      //为按钮绑定响应函数
      $(function(){
        $("#btn").click(function(){
          $(".box1").has("span").css("background-color","#bfa");
        });
      });
    </script>
</html>

在这里插入图片描述

● is() 检查是否含有某元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .box1{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 10px;
    }
  </style>
</head>
<body>
    <button id="btn">点我</button></button>
    <hr/>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <script>
      //为按钮绑定响应函数
      $(function(){
        $("#btn").click(function(){
          alert($(".box1").is("div"));
        });
      });
    </script>
</html>

在这里插入图片描述

● map() 获取对象中的指定数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <script>
    //为按钮绑定响应函数
    $(function(){
      $("#btn").click(function(){
        $("p").append($("input").map(function(){
          return $(this).val();
        }).get().join(", "));
      });
    });
  </script>
</head>
<body>
<div>
  <button id="btn">点我</button></button>
    <hr/>
  <p>值:</p>
  <form>
    <input type="text" name="name" value="脚本无忧"/>
    <input type="text" name="password" value="123456"/>
    <input type="text" name="url" value="https://www.jb51.net"/>
  </form>
</div>
</body>
</html>

在这里插入图片描述

● slice() 截取元素（切片）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .box1{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 10px;
    }
  </style>
</head>
<body>
    <button id="btn">点我</button></button>
    <hr/>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <script>
      //为按钮绑定响应函数
      $(function(){
        $("#btn").click(function(){
          $(".box1").slice(2,5).css("background-color","#bfa");
        });
      });
    </script>
</html>

在这里插入图片描述

● add() 创建包含当前元素的新的jQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .box1{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 10px;
    }
    .box2{
      float: left;
      width: 200px;
      height: 200px;
      border: 1px orange solid;
    }
  </style>
</head>
<body>
    <button id="btn">点我</button></button>
    <hr/>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <script>
      //为按钮绑定响应函数
      $(function(){
        $("#btn").click(function(){
          $(".box1").add(".box2").css("background-color","#bfa");
        });
      });
    </script>
</html>

在这里插入图片描述

● addBack() 将之前操作的集合中的元素添加到当前集合中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .box1{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 10px;
    }
    .box2{
      float: left;
      width: 200px;
      height: 200px;
      border: 1px orange solid;
    }
  </style>
</head>
<body>
    <button id="btn">点我</button></button>
    <hr/>
    <div class="box1"><span>我是span</span></span></div>
    <div class="box1"><span>我是span</span></div>
    <div class="box1"><span>我是span</span></div>
    <div class="box1"><span>我是span</span></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <script>
      //为按钮绑定响应函数
      $(function(){
        $("#btn").click(function(){
          $(".box1").contents().addBack().css("background-color","#bfa");
        });
      });
    </script>
</html>

在这里插入图片描述

● contents() 获取当前jQuery对象的所有子节点（包括文本节点）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .box1{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 10px;
    }
    .box2{
      float: left;
      width: 200px;
      height: 200px;
      border: 1px orange solid;
    }
  </style>
</head>
<body>
    <button id="btn">点我</button></button>
    <hr/>
    <div class="box1"><span>我是span</span></span></div>
    <div class="box1"><span>我是span</span></div>
    <div class="box1"><span>我是span</span></div>
    <div class="box1"><span>我是span</span></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <script>
      //为按钮绑定响应函数
      $(function(){
        $("#btn").click(function(){
          $(".box1").contents().css("background-color","#bfa");
        });
      });
    </script>
</html>

在这里插入图片描述

● end() 将筛选过的列表恢复到之前的状态

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .box1{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 10px;
    }
  </style>
</head>
<body>
    <button id="btn">点我</button></button>
    <hr/>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <script>
      //为按钮绑定响应函数
      $(function(){
        $("#btn").click(function(){
          $(".box1").slice(2,5).css("background-color","#bfa")
          .end()
          .css("border-color","blue");
        });
      });
    </script>
</html>

在这里插入图片描述

● not() 从列表中去除符合条件的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .box1{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 10px;
    }
  </style>
</head>
<body>
    <button id="btn">点我</button></button>
    <hr/>
    <div class="box1"></div>
    <div class="box1" id="a"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"><span>啦啦啦</span></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <script>
      //为按钮绑定响应函数
      $(function(){
        $("#btn").click(function(){
          $(".box1").not("#a").css("background-color","#bfa");
        });
      });
    </script>
</html>

在这里插入图片描述

● children() 获取子元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <style>
    .box1{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 10px;
    }
    .box2{
      float: left;
      width: 200px;
      height: 200px;
      border: 1px orange solid;
    }
  </style>
</head>
<body>
    <button id="btn">点我</button></button>
    <hr/>
    <div class="box1"><span>我是span</span></span></div>
    <div class="box1"><span>我是span</span></div>
    <div class="box1"><span>我是span</span></div>
    <div class="box1"><span>我是span</span></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <script>
      //为按钮绑定响应函数
      $(function(){
        $("#btn").click(function(){
          $(".box1").children().css("background-color","#bfa");
        });
      });
    </script>
</html>

在这里插入图片描述

● closest() 获取离当前元素最近的指定元素
● find() 查询指定的后代元素
● next() 获取后一个兄弟元素
● nextAll() 获取后边所有的兄弟元素
● nextUntil() 获取后边指定位置的兄弟元素
● offsetParent() 获取定位父元素
● parent() 获取父元素
● parents() 获取所有的祖先元素
● parensUntil() 获取指定的祖先元素
● prev() 获取前边的兄弟元素
● prevAll() 获取前边所有的兄弟元素
● prevUntil() 获取指定的兄弟元素
● siblings() 获取所有的兄弟元素

7. 点击事件

⑴ jQuery普通的事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
  <button id="btn">点击</button></button>
  <script>
    $("#btn").click(function(){
      alert("123");
    });
  </script>
</html>

在这里插入图片描述

⑵ jQuery取消默认的事件

默认效果演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
  <a id="linkA" href="https://wwww.baidu.com">点击</a>
  <script>
    $("#linkA").click(function(){
      alert("123");
    });
  </script>
</html>

在这里插入图片描述
通过return的方式解决

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
  <a id="linkA" href="https://wwww.baidu.com">点击</a>
  <script>
    $("#linkA").click(function(){
      alert("123");
      return false;
    });
  </script>
</html>

在这里插入图片描述

⑶ jQuery on绑定事件和off取消绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
  <button id="btn">点击事件</button>
  <button id="btn2">取消事件2</button>
  <script>
      $("#btn").on("click.a",function(){
        alert("事件1");
      });
      $("#btn").on("click.b",function(){
        alert("事件2");
      });
      $("#btn").on("click.c",function(){
        alert("事件3");
      });
      $("#btn2").on("click",function(){
        //off用来取消事件
        $("#btn").off("click.b");
      });
  </script>
</html>

在这里插入图片描述

⑷ jQuery解决事件冒泡问题

冒泡问题演示：当button点击了，其父元素body上的事件也被出触发了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
  <button id="btn">点击</button></button>
  <script>
    $("#btn").click(function(){
      alert("123");
    });
    $(document.body).click(function(){
      alert("455");
    });
  </script>
</html>

在这里插入图片描述
通过even事件中的属性取消冒泡问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
  <button id="btn">点击</button></button>
  <script>
    $("#btn").click(function(even){
      even.stopPropagation();
      alert("123");
    });
    $(document.body).click(function(){
      alert("455");
    });
  </script>
</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/781354.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Efficient Contrastive Learning for Fast and Accurate Inference on Graphs

Efficient Contrastive Learning for Fast and Accurate Inference on Graphs

发表于:ICML24 推荐指数: #paper/⭐⭐⭐ 创新点一颗星,证明三颗星(证明的不错,值得借鉴,但是思路只能说还行吧) 如图, 本文采取的创新点就是MLP用原始节点,GCN用邻居节点的对比学习.这样,可以加快运算速度 L E C L − 1 ∣ V ∣ ∑ v ∈ V 1 ∣ N ( v ) ∣ ∑ u ∈ N ( v )…
阅读更多...
汇聚荣拼多多电商的技巧有哪些？

汇聚荣拼多多电商的技巧有哪些？

在电商平台上&#xff0c;汇聚荣拼多多以其独特的商业模式和创新的营销策略吸引了大量消费者。那么&#xff0c;如何在这样一个竞争激烈的平台上脱颖而出&#xff0c;成为销售佼佼者呢?本文将深入探讨汇聚荣拼多多电商的成功技巧。 一、精准定位目标客户群体 首先&#xff0c;…
阅读更多...
Android增量更新----java版

Android增量更新----java版

一、背景 开发过程中&#xff0c;随着apk包越来越大&#xff0c;全量更新会使得耗时&#xff0c;同时浪费流量&#xff0c;为了节省时间&#xff0c;使用增量更新解决。网上很多文章都不是很清楚&#xff0c;没有手把手教学&#xff0c;使得很多初学者&#xff0c;摸不着头脑&a…
阅读更多...
【Threejs进阶教程-优化篇】4.Vue/React与threejs如何解决冲突和卡顿(续)

【Threejs进阶教程-优化篇】4.Vue/React与threejs如何解决冲突和卡顿(续)

Vue/React与threejs如何解决冲突和卡顿-续 使用说明核心思路环境搭建(vuethree)vue运行机制分析业务分离使用threejs做背景 3D模块封装使用ES6的Class来让逻辑性更强Threejs尽量按需引入创建一个类扩展写法本次代码执行顺序 扩展内容添加orbitControls和辅助线解决事件覆盖 与V…
阅读更多...
MUX VLAN实现二层流量的弹性管控

MUX VLAN实现二层流量的弹性管控

一、模拟场景&#xff0c;企业有一台服务器&#xff0c;部门A&#xff0c;部门B&#xff0c;访客 二、要求&#xff1a;三者都可以访问服务器&#xff0c;部门A和B可以进行部门内部通信&#xff0c;A和B不可以通信&#xff0c;访客只能访问服务器 三、拓扑如下图 四、配置流程…
阅读更多...
UE5 05-利用 timeline 插值运动

UE5 05-利用 timeline 插值运动

理解成 unity Dotween DoMove 插值运动即可 AddTimeLine 节点 物体插值运动 物体插值缩放 一个timeline 可以K多个动画帧
阅读更多...
【js基础巩固】深入理解作用域与作用域链

【js基础巩固】深入理解作用域与作用域链

作用域链 先看一段代码&#xff0c;下面代码输出的结果是什么&#xff1f; function bar() {console.log(myName) } function foo() {var myName "极客邦"bar() } var myName "极客时间" foo()当执行到 console.log(myName) 这句代码的时候&#xff0c…
阅读更多...
25_嵌入式系统总线接口

25_嵌入式系统总线接口

目录 串行接口基本原理 串行通信 串行数据传送模式 串行通信方式 RS-232串行接口 RS-422串行接口 RS-485串行接口 RS串行总线总结 RapidIO高速串行总线 ARINC429总线 并行接口基本原理 并行通信 IEEE488总线 SCSI总线 MXI总线 PCI接口基本原理 PCI总线原理 PC…
阅读更多...
Qt | QPen 类(画笔)

Qt | QPen 类(画笔)

01、画笔基础 1、需要使用到的 QPainter 类中的函数原型如下： void setPen(const QPen &pen); //设置画笔，void setPen(const QColor &color); //设置画笔，该笔样式为 Qt::SolidLine、宽度为 1，颜色由 color 指定void setPen(Qt::PenStyle style); //设置画笔，该…
阅读更多...
【问题解决】 pyocd 报错 No USB backend found 的解决方法

【问题解决】 pyocd 报错 No USB backend found 的解决方法

pyocd 报错 No USB backend found 的解决方法 本文记录了我在Windows 10系统上遇到的pyocd命令执行报错——No USB backend found 的分析过程和解决方法。遇到类似问题的朋友可以直接参考最后的解决方法&#xff0c;向了解问题发送原因的可以查看原因分析部分。 文章目录 pyoc…
阅读更多...
90元搭建渗透/攻防利器盒子！【硬件篇】

90元搭建渗透/攻防利器盒子！【硬件篇】

前言 以下内容请自行思考后进行实践。 使用场景 在某些情况下开软件进行IP代理很麻烦&#xff0c;并不能实现真正全局&#xff0c;而且还老容易忘记&#xff0c;那么为了在实景工作中&#xff0c;防止蓝队猴子封IP&#xff0c;此文正现。 正文 先说一下实验效果&#xff1…
阅读更多...
Java 应用启动时出现编译错误进程会退出吗？

Java 应用启动时出现编译错误进程会退出吗？

背景 开发的尽头是啥呢&#xff1f;超超级熟练工&#xff01; 总结最近遇到的一些简单问题&#xff1a; Java 应用的某个线程&#xff0c;如果运行时依赖的 jar 不满足&#xff0c;线程是否会退出&#xff1f;进程是否会退出&#xff1f;Netty 实现 TCP 功能时&#xff0c;换…
阅读更多...
STL复习-序列式容器和容器适配器部分

STL复习-序列式容器和容器适配器部分

STL复习 1. 常见的容器 如何介绍这些容器&#xff0c;分别从常见接口&#xff0c;迭代器类型&#xff0c;底层实现 序列式容器 string string严格来说不属于stl&#xff0c;它是属于C标准库 **底层实现&#xff1a;**string本质是char类型的顺序表&#xff0c;因为不同编译…
阅读更多...
CC2530寄存器编程学习笔记_点灯

CC2530寄存器编程学习笔记_点灯

下面是我的CC2530的学习笔记之点灯部分。 第一步&#xff1a;分析原理图 找到需要对应操作的硬件 图 1 通过这个图1我们可以找到LED1和LED2连接的引脚&#xff0c;分别是P1_0和P1_1。 第二步 分析原理图 图 2 通过图2 确认P1_0和P1_1引脚连接到LED&#xff0c;并且这些引…
阅读更多...
项目/代码规范与Apifox介绍使用

项目/代码规范与Apifox介绍使用

目录 目录 一、项目规范&#xff1a; &#xff08;一&#xff09;项目结构&#xff1a; &#xff08;二&#xff09;传送的数据对象体 二、代码规范&#xff1a; &#xff08;一&#xff09;数据库命名规范&#xff1a; &#xff08;二&#xff09;注释规范&#xff1a; …
阅读更多...
【0基础学爬虫】爬虫框架之 feapder 的使用

【0基础学爬虫】爬虫框架之 feapder 的使用

前言 大数据时代&#xff0c;各行各业对数据采集的需求日益增多&#xff0c;网络爬虫的运用也更为广泛&#xff0c;越来越多的人开始学习网络爬虫这项技术&#xff0c;K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章&#xff0c;为实现从易到难全方位覆盖&#xff0c;特设【0…
阅读更多...
mac｜Mysql WorkBench 或终端 导入 .sql文件

mac｜Mysql WorkBench 或终端 导入 .sql文件

选择Open SQL Script导入文件 在第一行加入use 你的schema名字&#xff0c;相当于选择了这个schema 点击运行即可将sql文件导入database 看到下面成功了即可 这时候可以看看左侧的目标database中有没有成功导入table&#xff0c;如果没有看到的话&#xff0c;可以点一下右上角的…
阅读更多...
Bert入门-使用BERT（transformers库）对推特灾难文本二分类

Bert入门-使用BERT（transformers库）对推特灾难文本二分类

Kaggle入门竞赛-对推特灾难文本二分类 这个是二月份学习的&#xff0c;最近整理资料所以上传到博客备份一下 数据在这里&#xff1a;https://www.kaggle.com/competitions/nlp-getting-started/data github&#xff08;jupyter notebook&#xff09;&#xff1a;https://gith…
阅读更多...
【JavaEE】多线程进阶

【JavaEE】多线程进阶

&#x1f921;&#x1f921;&#x1f921;个人主页&#x1f921;&#x1f921;&#x1f921; &#x1f921;&#x1f921;&#x1f921;JavaEE专栏&#x1f921;&#x1f921;&#x1f921; 文章目录 1.锁策略1.1悲观锁和乐观锁1.2重量级锁和轻量级锁1.3自旋锁和挂起等待锁1.4可…
阅读更多...
AI大模型的智能心脏：向量数据库的崛起

AI大模型的智能心脏：向量数据库的崛起

在人工智能的飞速发展中，一个关键技术正悄然成为AI大模型的智能心脏——向量数据库。它不仅是数据存储和管理的革命性工具，更是AI技术突破的核心。随着AI大模型在各个领域的广泛应用，向量数据库的重要性日益凸显。 01 技术突破：向量数据库的内在力量 向量数据库以其快速检索…
阅读更多...
最新文章

Copyright @ 2022~2023