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

news2024/9/20 10:38:28

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.coloradmin.cn/o/1904708.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【密码学】什么是密码？什么是密码学？

【密码学】什么是密码？什么是密码学？

一、密码的定义 根据《中华人民共和国密码法》对密码的定义如下&#xff1a; 密码是指采用特定变换的方法对信息等进行加密保护、安全认证的技术、产品和服务。 二、密码学的定义 密码学是研究编制密码和破译密码的技术科学。由定义可以知道密码学分为两个主要分支&#x…
阅读更多...
【UML用户指南】-30-对体系结构建模-模式和框架

【UML用户指南】-30-对体系结构建模-模式和框架

目录 1、机制 2、框架 3、常用建模技术 3.1、对设计模式建模 3.2、对体系结构模式建模 用模式来详述形成系统体系结构的机制和框架。通过清晰地标识模式的槽、标签、按钮和刻度盘 在UML中&#xff0c; 对设计模式&#xff08;也叫做机制&#xff09;建模&#xff0c;将它…
阅读更多...
前端必修技能：高手进阶核心知识分享 - CSS 阴影属性详解

前端必修技能：高手进阶核心知识分享 - CSS 阴影属性详解

CSS 涉及设计到阴影的相关内容包括三个方面&#xff1a;box-shadow属性&#xff08;盒子阴影&#xff09;、 text-shadow属性&#xff08;文本阴影&#xff09;、drop-shadow滤镜。 本篇文章旨在详细介绍和分析三种阴影的具体参数设置和典型用例。 box-shadow属性&#xff08;…
阅读更多...
1958.力扣每日一题7/7 Java(100%解）

1958.力扣每日一题7/7 Java(100%解）

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;算法练习关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 目录 思路 解题方法 时间复杂度 空间复杂度 Code 思路 首先将指定位…
阅读更多...
【ubuntu中关于驱动得问题】—— 如何将nouveau驱动程序加入黑名单和安装NVIDIA显卡驱动

【ubuntu中关于驱动得问题】—— 如何将nouveau驱动程序加入黑名单和安装NVIDIA显卡驱动

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、nouveau驱动程序加入黑名单二、安装NVIDIA显卡驱动总结 前言 NVIDIA显卡驱动是用于支持和优化NVIDIA显卡在计算机系统中运行的关键软件组件。该驱动程序能…
阅读更多...
2024 WAIC｜第四范式胡时伟分享通往AGI之路：行业大模型汇聚成海

2024 WAIC｜第四范式胡时伟分享通往AGI之路：行业大模型汇聚成海

7月4日&#xff0c;2024世界人工智能大会&#xff08;WAIC&#xff09;正式开幕。此次大会围绕核心技术、智能终端、应用赋能等板块展开&#xff0c;展览规模、参展企业数均达历史最高。第四范式受邀参展&#xff0c;集中展示公司十年来在行业大模型产业应用方面的实践。在当天…
阅读更多...
Django 查询数据

Django 查询数据

模型参考上一章内容&#xff1a; Django QuerySet对象&#xff0c;filter()方法-CSDN博客 查询数据可以通过以下方法&#xff1a; Book.objects.all() Book.objects.filter() Book.objects.get() 1&#xff0c;添加视图函数 Test/app11/views.py from django.shortcuts im…
阅读更多...
【QT中堆栈布局的实现】

【QT中堆栈布局的实现】

学习分享 1、环境设置&#xff0c;头文件2、.h文件2.1、主界面.h文件2.2、对话界面1.h文件2.3、对话界面2.h文件 3、.cpp文件3.1、对话界面1.cpp3.2、对话界面2.cpp3.3、主界面.cpp3.4、main.cpp 1、环境设置&#xff0c;头文件 该示例使用C14实现&#xff0c;因此在QT项目pro文…
阅读更多...
实战：搭建一款属于自己的个人知识库~docusaurus(强大且丝滑)-2024.7.7(测试成功)

实战：搭建一款属于自己的个人知识库~docusaurus(强大且丝滑)-2024.7.7(测试成功)

目录 文章目录 目录docusaurus简介效果专题链接&#x1f44f;环境源码1、安装基础环境2、拉取代码3、安装坚果云并同步md核心文件4、构建运行5、配置脚本环境1.配置vscode终端到ecs的免密2.配置win10 vscode终端环境变量 6、构建并推送静态文件到ecs关于我最后最后 docusaurus简…
阅读更多...
基于CentOS Stream 9平台搭建RabbitMQ3.13.4以及开机自启

基于CentOS Stream 9平台搭建RabbitMQ3.13.4以及开机自启

1. erlang与RabbitMQ对应版本参考&#xff1a;https://www.rabbitmq.com/which-erlang.html 2. 安装erlang 官网&#xff1a;https://www.erlang.org/downloads GitHub: https://github.com/rabbitmq/erlang-rpm/releases 2.1 安装依赖&#xff1a; yum -y install gcc glib…
阅读更多...
BigDecimal(double)和BigDecimal(String)有什么区别？BigDecimal如何精确计数?

BigDecimal(double)和BigDecimal(String)有什么区别？BigDecimal如何精确计数?

BigDecimal(double)和BigDecimal(String)的区别 double是不精确的&#xff0c;所以使用一个不精确的数字来创建BigDecimal&#xff0c;得到的数字也是不精确的。如0.1这个数字&#xff0c;double只能表示他的近似值。所以&#xff0c;当我们使用new BigDecimal(0.1)创建一个Bi…
阅读更多...
算法简介：什么是算法？——定义、历史与应用详解

算法简介：什么是算法？——定义、历史与应用详解

引言 在现代计算机科学中&#xff0c;算法是一个核心概念。无论是编程还是数据分析&#xff0c;算法都扮演着至关重要的角色。在这篇博客中&#xff0c;我们将深入探讨算法的定义、历史背景以及它在计算机科学中的地位和实际应用。 什么是算法&#xff1f; 算法是解决特定问题…
阅读更多...
STM32基础篇：GPIO

STM32基础篇：GPIO

GPIO简介 GPIO&#xff1a;即General Purpose Input/Output&#xff0c;通用目的输入/输出。就是一种片上外设&#xff08;内部模块&#xff09;。 对于STM32的芯片来说&#xff0c;周围有一圈引脚&#xff0c;有时需要对引脚进行读写&#xff08;读&#xff1a;从外部输入一…
阅读更多...
数字信号处理及MATLAB仿真（3）——量化的其他概念

数字信号处理及MATLAB仿真（3）——量化的其他概念

上回书说到AD转换的两个步骤——量化与采样两个步骤。现在更加深入的去了解以下对应的概念。学无止境&#xff0c;要不断地努力才有好的收获。万丈高楼平地起&#xff0c;唯有打好基础&#xff0c;才能踏实前行。 不说了&#xff0c;今天咱们继续说说这两个步骤&#xff0c;首先…
阅读更多...
51单片机-第一节-LED和独立按键

51单片机-第一节-LED和独立按键

一、点亮LED&#xff1a; 首先包含头文件 <REGX52.H> 随后令P2为0xFE。(此时二进制对应1111 1110&#xff0c;为0 的LED亮&#xff0c;故八个灯中的最后一个亮起)。 注&#xff1a;P2为控制LED的8位寄存器。 void main() {P2 0xFE;//1111 1110while(1){} } 二、L…
阅读更多...
非同步升压转换器，效率95%你信吗？ETA1611输出电流2A, 22V DCDC

非同步升压转换器，效率95%你信吗？ETA1611输出电流2A, 22V DCDC

前言&#xff1a; 截止24年7月7日某创报价&#xff1a;500&#xff1a; &#xffe5;0.7856 / 个 建议使用前同时了解下方器件。 2毛钱的SOT23-5封装28V、1.5A、1.2MHz DCDC转换器用于LCD偏置电源和白光LED驱动等MT3540升压芯片 描述 ETA1611 SOT23-6封装 丝印GVYW&#xff0…
阅读更多...
基于java语言+ Vue+ElementUI+ MySQL8.0.36数字化产科管理平台源码，妇幼信息化整体解决方案

基于java语言+ Vue+ElementUI+ MySQL8.0.36数字化产科管理平台源码，妇幼信息化整体解决方案

基于java语言 VueElementUI MySQL8.0.36数字化产科管理平台源码&#xff0c;妇幼信息化整体解决方案 数字化产科管理平台是为医院产科量身定制的信息管理系统。它管理了孕妇从怀孕开始到生产结束42天一系列医院保健服务信息。该系统由门诊系统、住院系统、数据统计模块三部分组…
阅读更多...
MSPM0G3507——滴答定时器和普通定时

MSPM0G3507——滴答定时器和普通定时

滴答定时器定时&#xff1a;&#xff08;放在主函数即可&#xff09; volatile unsigned int delay_times 0;//搭配滴答定时器实现的精确ms延时 void delay_ms(unsigned int ms) {delay_times ms;while( delay_times ! 0 ); } //滴答定时器中断 void SysTick_Handler(…
阅读更多...
【2024_CUMCM】时间序列算法ARMA

【2024_CUMCM】时间序列算法ARMA

目录 2023-c-问题二 问题分析 介绍 单位根检验 白噪声检验 自相关和偏自相关图 利用信息准则定阶 构建AMIMA模型 D-W检验 预测 代码 2023-c-问题二 问题分析 ARMA适合多个领域的时间序列分析&#xff0c;不同时间的定价策略属于这类问题。 介绍 ARMA模型&…
阅读更多...
一.2.（4）放大电路静态工作点的稳定；（未完待续）

一.2.（4）放大电路静态工作点的稳定；（未完待续）

1.Rb对Q点及Au的影响 输入特性曲线&#xff1a;Rb减少&#xff0c;IBQ&#xff0c;UBEQ增大 输出特性曲线&#xff1a;ICQ增大&#xff0c;UCEQ减少 AUUO/Ui分子减少&#xff0c;分母增大&#xff0c;但由于分子带负号&#xff0c;所以|Au|减少 2.Rc对Q点及Au的影响 输入特性曲…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023