jQuery常用方法

最新推荐文章于 2023-12-14 09:42:53 发布

程序媛Render

最新推荐文章于 2023-12-14 09:42:53 发布

阅读量558

点赞数 5

分类专栏： jQuery jQuery常用方法文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_46492364/article/details/118424297

版权

jQuery 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jQuery常用方法

1 篇文章 0 订阅

订阅专栏

前言

这部分学习jQuery常用语法。

一、操作标签属性的方法

1.html（）方法

相当于原生js中的innerHTML属性，可以给标签添加内容和获取标签内容。以下两个功能：
（1）设置标签内容：设置内部文字和渲染内部标签
jQuery对象.html(“内部内容”)
（2）获取标签内容：获取内部内容和获取内部标签
jquery对象.html()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">这是原始内容</div>
    <div class="box">这是原始内容</div>
    <div class="box">这是原始内容</div>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //获取内容
        //注意：只能获取内部元素的第一个文案，后面的获取不到
        console.log($(".box").html())
        //设置内容
        $(".box").html("这是新的内容")
        $(".box:first").html("新增了子级<p>这是新增的子级</p>")
    </script>
</body>
</html>

2.text（）方法

相当于原生js中的innerText属性，可以给标签添加文字和获取标签内的文字。以下两个功能：
（1）设置标签文字：会获取到所有的标签内部的文字，但是忽略标签
jQuery对象.text(“内部文字”)
（2）获取标签文字：文字设置给标签，但是标签里面的所有子标签都会以文字的形式进行显示
jquery对象.text()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">这是原始的 div1 <span>span1</span></div>
    <div class="box">这是原始的 div2 <span>span2</span></div>
    <div class="box">这是原始的 div3 <span>span3</span></div>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //获取内容
        //注意：会获取到所有的标签内部的文字，但是忽略标签
        var $box = $(".box")
        console.log($box.text())
        //设置内容
        //将文字设置给标签，但是标签里面的所有子标签都会以文字的形式进行显示
        $(".box").text("这是新的内容<p>段落</p>")
    </script>
</body>
</html>

注意：html（）和text（）方法只能在双标签上使用才能获取到内部内容，单标签不可以。

3.val（）方法

相当于原生js中的value属性，可以给表单元素设置内容和获取表单元素内部内容。以下两个功能：
（1）设置表单内部文字：根据不同表单标签元素，设置的是表单value的值
jQuery对象.val(“内部文字”)
（2）获取表单内部文字：根据不同表单标签元素，获取到value值可能不同。
jquery对象.val()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">这是原始的 div1 <span>span1</span></div>
    <input type="text" value="请输入用户名1"><br>
    <input type="text" value="请输入用户名2"><br>
    <textarea cols="30" rows="10">请输入自我介绍</textarea><br>
    <select>
      <option value="tianjin">天津</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
    </select>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // 获取元素
        var $box = $(".box")
        var $input = $("input")
        var $ta = $("textarea")
        var $se = $("select")
        var $opt = $("option")

        //设置内部内容
        $box.val("你好")
        $input.val("你好")
        $ta.val("你好")
        $se.val("beijing")
        $opt.val("bejing")

        //获取内部内容
        console.log($box.val())
        console.log($input.val())
        console.log($ta.val())
        console.log($se.val())
        console.log($opt.val())
    </script>
</body>
</html>

4.attr（）和removeAttr（）方法

attr（）设置和获取标签属性和属性值，removeAttr（）删除标签属性。
（1）设置：两个参数，第一个参数是属性名，第二个参数是属性值。
jQuery对象.attr(“属性名”，“属性值”)
（2）获取表单内部文字：根据不同表单标签元素，获取到value值可能不同。
jQuery对象.attr(“属性名”，“属性值”)
（3）删除属性：jquery对象.removeAttr(“属性名”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="images/cat.jpg" alt="这是一只猫" hobby="fish" class="pic">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //获取元素
        var $pic = $(".pic")
        //也可以读取和设置自定义属性
        //获取
        console.log($pic.attr("alt"))
        console.log($pic.attr("hobby"))
        //设置
        $pic.attr("src","images/cat2.jpg")
        $pic.attr("hobby","mouse")
        //删除
    </script>
</body>
</html>

5.prop（）方法

给特殊的表单标签属性设置和获取内容，例如：checked、disabled等，这种属性名等于属性值的标签属性。
（1）设置：两个参数，第一个参数是属性名，第二个参数是true或false。
jQuery对象.prop(“属性名”，true或者false)
（2）获取：一个参数获取到的是true或false
jQuery对象.prop(“属性名”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="按钮" disabled="disabled" class="btn"><br>
    <input type="checkbox" checked="checked" class="choose"> 绘画
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //获取元素
        var $btn = $(".btn")
        var $choose = $(".choose")

        //获取  得到的是true或false
        console.log($choose.prop("disabled"))
        console.log($btn.prop("disabled"))
        //设置
        $btn.prop("disabled",false)
    </script>
</body>
</html>

6.css（）方法

调用css属性或修改css属性值。两个参数，第一个参数是css的样式属性名，第二个参数是设置或更改的属性值。如果同时修改多条属性时，可以用对象作为参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" style="width: 100px;height: 100px;background-color: aqua;"></div>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //获取元素
        var $box = $(".box")

        //获取样式
        console.log($box.css("background-color"))

        //设置样式
        // $box.css("width","200px")
        // $box.css("width","200")
        // $box.css("width",200)
        $box.css("width","+=100")

        //同时设置多个样式
        $box.css({
            "height": 200,
            "background-color": "pink"
        })
    </script>
</body>
</html>

二、操作类名的方法

1.addClass（）

增加一个类名的方法，参数是要增加的类名。

2.removeClass（）

删除一个类名的方法，参数是要删除的类名。

3.toggleClass（）

切换类名的方法，参数是要切换的类名，每次切换，如果参数中的类名存在就删除掉，参数中的类名不存在就增加，来回切换。
以上三种方法的案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .demo{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <input type="button" value="添加" id="btn1">
    <input type="button" value="删除" id="btn2">
    <input type="button" value="切换" id="btn3">
    <div id="box" class="box"></div>

    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // 给 box 切换 demo 的类名，从而改变背景颜色
        var $box = $("#box");
        var $btn1 = $("#btn1");
        var $btn2 = $("#btn2");
        var $btn3 = $("#btn3");

        //添加类名
        $btn1.click(function () {
            $box.addClass("demo")
        })
        //删除类名
        $btn2.click(function () {
            $box.removeClass("demo")
        })
        //切换类名
        $btn3.click(function () {
            $box.toggleClass("demo")
        })
    </script>
</body>
</html>

4.hasClass（）

判断参数中的类名是否存在，存在就返回true，不存在就返回false。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .demo{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <input type="button" value="添加" id="btn1">
    <input type="button" value="删除" id="btn2">
    <input type="button" value="切换" id="btn3">
    <div id="box" class="box"></div>

    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // 给 box 切换 demo 的类名，从而改变背景颜色
        var $box = $("#box");
        var $btn1 = $("#btn1");
        var $btn2 = $("#btn2");
        var $btn3 = $("#btn3");

        //利用判断是否存在类名，实现一个切换类名的效果
        $btn3.click(function () {
            if ($box.hasClass("demo")) {
                //删除这个类名
                $box.removeClass("demo")
            } else {
                //增加这个类名
                $box.addClass("demo")
            }
        })
    </script>
</body>
</html>

三、常用事件方法

1.click（）

点击事件，点击后执行的函数直接写在小括号内部。不用写“on”

2.mouseenter（）

鼠标进入事件，与mouseover不同的是不会冒泡。

3.mouseleave（）

鼠标离开事件，与mouseout不同的是不会冒泡。

4.hover（）

是mouseenter与mouseleave的一个合写。
接下来代码中是上面几种方法的案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #parents{
          width: 200px;
          height: 200px;
          background-color: yellowgreen;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .demo{
            background-color: skyblue;
        }
    </style>
</head>
<body>    
    <input type="button" value="切换" id="btn1">
    <div id="parents">
      <div id="box" class="box"></div>
    </div>

    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // 给 box 切换 demo 的类名，从而改变背景颜色
        var $box = $("#box");
        var $btn1 = $("#btn1");
        var $parents = $("#parents");

        // 添加事件，使用 自己对象的方法
        // $btn1.click(function () {
        //   $box.toggleClass("demo")
        // })

        // hover() 方法，对mouseenter 和 mouseleave 进行了合并书写
        $box.hover(function () {
          // 鼠标移入
          $box.addClass("demo")
        },function () {
          // 鼠标离开
          $box.removeClass("demo")
        })

        // jQuery 中增加了自己的事件类型：mouseenter 和 mouseleave
        // 没有事件冒泡
        // $box.mouseenter(function () {
        //   // 鼠标进入元素，触发事件
        //   console.log("box-mouse-in")
        // })

        // $box.mouseleave(function () {
        //   // 鼠标离开元素，触发事件
        //   console.log("box-mouse-out")
        // })
        // $parents.mouseenter(function () {
        //   // 鼠标进入元素，触发事件
        //   console.log("parents-mouse-in")
        // })

        // $parents.mouseleave(function () {
        //   // 鼠标离开元素，触发事件
        //   console.log("parents-mouse-out")
        // })

        // mouseover 和 mouseout ：有事件冒泡
        // $box.mouseover(function () {
        //   // 鼠标进入元素，触发事件
        //   console.log("box-mouse-in")
        // })

        // $box.mouseout(function () {
        //   // 鼠标离开元素，触发事件
        //   console.log("box-mouse-out")
        // })
        // $parents.mouseover(function () {
        //   // 鼠标进入元素，触发事件
        //   console.log("parents-mouse-in")
        // })

        // $parents.mouseout(function () {
        //   // 鼠标离开元素，触发事件
        //   console.log("parents-mouse-out")
        // })
    </script>
</body>
</html>

四、节点关系查找方法

1.$(this)

因为this是找到自己的原生js对象，因此只要转换成jQuery对象，就可以找到节点自己。

2.parent()

找到节点的父节点，父节点只有一个，因此没有参数。

3.children()

找到节点的所有子节点，子节点可以有很多个，因此有参数，参数是需要查找的节点的标签名，对于传入的参数进行二次查找。

4.siblings()

找到节点的所有兄弟节点，兄弟节点可以有很多个，因此有参数，参数是需要查找的节点的标签名，对于传入的参数进行二次查找。只能找父节点内的兄弟节点，不能查找叔叔节点内的兄弟。
案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 1000px;
      height: 80px;
      border: 1px solid #333;
      margin-top: 10px;
    }

    .box p,
    .box h2 {
      float: left;
      width: 80px;
      height: 80px;
      margin-right: 20px;
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <h2>h2</h2>
    <h2>h2</h2>
    <h2>h2</h2>
  </div>
  <div class="box">
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <h2>h2</h2>
    <h2>h2</h2>
    <h2>h2</h2>
  </div>
  <div class="box">
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <h2>h2</h2>
    <h2>h2</h2>
    <h2>h2</h2>
  </div>

  <script src="js/jquery-1.12.4.min.js"></script>
  <script>
    // 获取所有的 p 标签
    var $ps = $("p")
    var $box = $(".box")

    
    $ps.click(function () {
      // 让点击的自己 颜色变红色
      // this 指向的是触发事件的事件源的原生 JS 对象
      // 需要转换成 jQuery对象
      // $(this).css("background-color","red")
      // 找到事件源的 父级元素，添加黄色背景
      // $(this).parent().css("background-color","yellow")
      // 查找兄弟元素
      // $(this).siblings().css("background-color","skyblue")
      $(this).siblings("h2").css("background-color","skyblue")

    })

    // 通过点击 div 获取它的子级元素
    // $box.click(function () {
    //   // 获取子级
    //   // $(this).children().css("background-color","pink")
    //   // 添加参数后，会按照指定的选择器在子级中进行二次选择
    //   $(this).children("p").css("background-color","pink")
    // })
  </script>
</body>

</html>

5.链式调用

jQuery对象调用任何方法（除了节点关系方法）执行完后，方法都会有一个返回值，返回值就是 jQuery对象自己，这个现象给我们提供了便利，可以对执行结果继续打点调用JQ的方法和属性。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 1000px;
      height: 80px;
      border: 1px solid #333;
      margin-top: 10px;
    }

    .box p,
    .box h2 {
      float: left;
      width: 80px;
      height: 80px;
      margin-right: 20px;
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <h2>h2</h2>
    <h2>h2</h2>
    <h2>h2</h2>
  </div>
  <div class="box">
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <h2>h2</h2>
    <h2>h2</h2>
    <h2>h2</h2>
  </div>
  <div class="box">
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <h2>h2</h2>
    <h2>h2</h2>
    <h2>h2</h2>
  </div>

  <script src="js/jquery-1.12.4.min.js"></script>
  <script>
    // 获取所有的 p 标签
    var $ps = $("p")
    var $box = $(".box")

    // 批量添加事件
    $ps.click(function () {
      // 让点击的自己 颜色变红色
      // jQuery 对象调用除了节点关系的方法之外，其他的方法执行后，返回值就是 对象自己
      // 可以继续链式调用其他的 jQuery 对象的方法和属性
      // 好处：简化代码书写
      // console.log($(this).css("background-color","red").html("哈哈"))
      $(this).css("background-color", "red")        // 自己变红色
      .siblings().css("background-color", "gold")   // 兄弟变金色
      .parent().css("background-color", "pink")     // 父级变粉色
      .siblings().css("background-color", "blue")   // 父级的兄弟变蓝色
      .children().css("background-color", "yellowgreen")  // 父级的兄弟的子级变黄绿色
    })
  </script>
</body>

</html>

6.其他节点关系方法

后代：
find（）
兄弟：
pre（）上一个兄弟节点
next（）下一个兄弟节点
preAll（）上面所有的兄弟节点
nextAll（）下面所有的兄弟节点
祖先：
parents（）
都可以传参数，进行二次查找。

五、综合案例

1.发送验证码控制按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="">
    <input type="button" class="btn" value="发送">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //获取元素
        var $btn = $(".btn")
        //添加点击事件
        $btn.click(function () {
            //定义变量接收倒计时时间值
            var n = 5
            //点击后让按钮禁用
            //点击后改变按钮的文字内容
            $(this).prop("disabled",true).val(n + "s后重新发送")
            //定时器给文字内容倒计时
            var timer = setInterval(() => {
                //到了0秒停止定时器
                n--
                $(this).val(n + "s后重新发送")
                if (n <= 0) {
                    clearInterval(timer)
                    //按钮取消禁用
                    $(this).prop("disabled",false)
                    //恢复value值
                    $(this).val("重新发送")
                }
            },1000)
        })
        
    </script>
</body>
</html>

2.放大镜切换项

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <!--版心  -->
  <div class="w">
    <!-- 左侧 -->
    <div class="leftBox">
      <!-- 上 -->
      <div class="top">
        <img src="img/m1.jpg">
      </div>
      <ul>
        <li class="active">
          <img src="img/s1.jpg" msrc="m1.jpg" bsrc="b1.jpg">
        </li>
        <li>
          <img src="img/s2.jpg" msrc="m2.jpg" bsrc="b2.jpg">
        </li>
        <li>
          <img src="img/s3.jpg" msrc="m3.jpg" bsrc="b3.jpg">
        </li>
      </ul>
    </div>
    <!-- 右侧 -->
    <div class="rightBox">
      <img src="img/b1.jpg" alt="">
    </div>
  </div>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 获取元素
    var $imgs = $(".leftBox ul li img")
    var $mimg = $(".leftBox .top img")
    var $bimg = $(".rightBox img")
    //鼠标移上小图添加边框样式
    $imgs.mouseenter(function () {
      //排他操作
      //给自己父级添加样式，给其他删除样式
      $(this).parent().addClass("active").siblings().removeClass("active")
      var str = "img/"
      //切换中图和大图的路径
      var msrc = str + $(this).attr("msrc")
      var bsrc = str + $(this).attr("bsrc")
      //设置给对应图片
      $mimg.attr("src",msrc)
      $bimg.attr("src",bsrc)
    })
  </script>
</body>
</html>