jQuery操作标签内容方法

以下示例均省略了jQuery文件引用，实际使用需要添加引用。如：

<script src="js/jquery-1.12.4.min.js"></script>
复制代码

html()方法

html()方法相当于原生JS中的innerHTML属性，用来获取或设置标签内部内容。方法可以传递一个参数，自定义标签内容。

获取：文本和内部标签。

语法：jQuery对象.html()

设置：设置标签时，标签会被渲染。

语法：jQuery对象.html('文本内容')

const box = $('.box');
// 获取标签元素内容，包含文本和标签
box.html();
// 设置标签元素内容
box.html('This is text');
复制代码

text方法

text()方法相当于原生JS中的innerText属性，用来获取或设置标签内部的文字。

获取：仅仅是文本

语法：jQuery对象.text()

设置：若设置标签时，标签会被当做普通文本

语法：jQuery对象.text('文本内容')

const box = $('.box');
// 获取标签内部文字内容，忽略标签
box.text();
// 设置标签标签内部文字内容
box.text('This is text');
复制代码

val方法

val()方法相当于原生JS中的value属性，用来获取或设置表单元素内容。

获取：表单元素的value

语法：jQuery对象.val()

设置：表单元素的value

语法：jQuery对象.val('文本内容')

// 获取元素
var $box = $(".box")// div标签
var $input = $("input")
var $ta = $("textarea")
var $se = $("select")
var $opt = $("option")
// html()和text()方法
console.log($input.text())// 对单标签，获取内容为空
console.log($input.html())// 对单标签，获取内容为空
console.log($ta.text())// 可以获取双标签文本内容
console.log($ta.html())// 可以获取双标签内容
console.log($se.text())// 可以获取双标签文本内容
console.log($se.html())// 可以获取双标签内容
console.log($opt.text())// 可以获取多个双标签元素的文本内容
console.log($opt.html())// 只能获取第一个双标签元素的内容
// 通过 val() 进行获取
console.log($box.val())// 没有value属性，则获取内容为空
console.log($input.val())// 没有value属性，则获取内容为空
console.log($ta.val())// 没有value属性，则获取文本内容
console.log($se.val())// 获取当前选项的value值，如果没有value值则获取其文本内容
console.log($opt.val())// 获取第一个选项的value值，如果没有value值则获取其文本内容
// 设置内容
$input.val("haha")// 所有input标签文本内容更改为haha
$ta.val("haha")//  文本内容更改为haha
$se.val("beijing")//  设置当前选项为value值为beijing的选项，没有该选项则设置为空选项
$opt.val("guangzhou")//  会将所有option的value值设置为guangzhou
复制代码

attr()和removeAttr()方法

attr：全称attribute，属性的意思。
作用：用来获取或者设置标签的属性值。

设置标签的属性

语法：jQuery对象.attr(name,value);

获取标签属性值

语法：jQuery对象.attr(name);

<img src="images/cat.jpg" alt="这是一只猫" hobby="fish" class="pic">
<script src="js/jquery-1.12.4.min.js"></script>
<script>
  // 获取元素
  var $pic = $(".pic")
  // 标签属性设置：需要传 2 个参数
  $pic.attr("src","images/cat2.jpg")    
  $pic.attr("hobby","sleep")    
  // 获取标签属性的值：需要 1 个参数
  console.log($pic.attr("alt"))
  console.log($pic.attr("hobby"))
  // 删除属性方法 removeAttr()
  $pic.removeAttr("hobby")
</script>
复制代码

prop()方法

针对：selected、checked、disabled等表单元素的属性。此类属性的属性值与属性名相同。

获取，得到true或false

语法：$('input').prop('属性名');

设置

语法：$('input').prop('属性名',true或者false)

<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")
  var btn = document.querySelector(".btn")
  // 获取 disabled 的属性值
  console.log(btn.disabled)// 原生JS方法获取是否为disable状态，输出为true
  console.log($btn.attr("disabled"))// 得到的是disable字符串，不是我们想要的true或false布尔值
  console.log($btn[0].disabled)// 原生JS方法获取是否为disable状态，输出为true
  // prop() 方法，直接操作的就是布尔值
  console.log($btn.prop("disabled"))// 输出true
  console.log($choose.prop("checked"))// 输出true
  // 设置
  $btn.prop("disabled",false)// 设置disabled
</script>
复制代码

css()方法

用于调用或者更改css属性值。
语法：jQuery对象.css(name,value)
name：字符串格式的css样式属性名
value：设置或更改的属性值
注意：\

一个参数：表示调用css属性的值，得到的是某个元素的计算后样式，值为字符串格式。\
两个参数：表示设置css样式属性，第二个参数可以是字符串格式的属性值，如果带单位的数字的属性值，可以写成带单位的字符串格式、不带单位的字符串、纯数字、带+=等赋值运算的字符串。\

// 获取元素
var $box = $(".box")
    
// css() 传一个参数：获取对应的属性值
console.log($box.css("width"))
// 复合属性的单一属性写法，可以是横线写法，也可以是驼峰命名法
console.log($box.css("background-color"))
console.log($box.css("backgroundColor"))
// css() 传入两个参数：设置或更改对应的属性值
$box.css("width","400px")
$box.css("width","400")
$box.css("width",500)
$box.css("width","+=100px")
// 设置多条属性，可以使用对象形式的参数
$box.css({
  "width": 200,
  "height": 300
})
复制代码

addClass()、removeClass()、toggleClass()方法

addClass()添加类名。\

语法：jQuery对象.addClass(className)
className：字符串格式的类名

removeClass()删除类名

语法：jQuery对象.removeClass(className)
className：字符串格式的类名
如果不传参数，则默认删除所有类名

toggleClass()切换类名

语法：jQuery对象.toggleClass(className)
className：字符串格式的类名
如果类名存在则移除该类名，否则添加该类名。\

<!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>
        .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");

        // jQuery 中的类名控制方法，只会操作指定的类名，不会影响其他类名
        // 点击按钮 添加，让元素增加一个类名
        $btn1.click(function () {
          $box.addClass("demo")
        })

        // 点击按钮 删除，让元素减少一个类名
        $btn2.click(function () {
          $box.removeClass("demo")
          // 如果不传参数，会删除所有类名
          $box.removeClass()
        })

        // 点击按钮 切换，让元素在一个类名中进行添加和删除的自动切换
        $btn3.click(function () {
          $box.toggleClass("demo")
        })
    </script>
</body>
</html>
复制代码

hasClass()方法

判断类名是否存在
语法：jQuery对象.hasClass(className)
className：字符串格式的类名
返回值：true和false

// 判断 box 是否有 demo 的类名
if ($box.hasClass("demo")) {
  // 如果有 demo，就删除
  $box.removeClass("demo")
} else {
  // 如果没有 demo，就添加一个
  $box.addClass("demo")
}
复制代码

jQuery常用事件方法

jQuery对象封装了一系列的事件方法。
事件方法与原生JS事件方法名称类似，不需要写on
事件方法需要jQuery对象打点调用，小括号内的参数是事件函数。
例如点击事件：click()方法。\

mouseenter() 和 mouseleave()

jQuery对象.mouseenter(funMouseIn)：鼠标进入
jQuery对象.mouseleave(funMouseOut)：鼠标移出
funMouseIn：鼠标移入函数
funMouseOut：鼠标移出函数

mouseover() 和 mouseout()

jQuery对象.mouseover(funMouseIn)：鼠标进入
jQuery对象.mouseout(funMouseOut)：鼠标移出
funMouseIn：鼠标移入函数
funMouseOut：鼠标移出函数
对比：
注意：mouseover()和mouseout()有事件冒泡。在使用时，mouseenter()和mouseleave()更加合适。\

hover()

jQuery对象.hover(funMouseIn,funMouseOut)是对mouseenter和mouseleave的整合。 funMouseIn：鼠标移入函数 funMouseOut：鼠标移出函数

// 给 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")
})
复制代码

节点关系查找方法

事件中，$(this): 表示自己\

在原生的DOM操作中，事件函数内部有一个this关键字指向的就是触发事件的事件源，在jQuery中将this关键字传递给$()方法，得到就是指向自己的jQuery对象，就可以使用JQ的方法。\

parent()获取父级对象

jQuery对象都有一个parent()方法，得到的是自己的父级。父级得到的也是一个jQuery对象，可以继续打点调用JQ方法和属性。\

children()获取子级对象集

jQuery对象内部有一个children()方法，可以得到自己的所有子级元素组成的jQuery对象。得到的子级组成的jQuery对象可以继续调用JQ方法和属性。
获得子级时，不限制标签类型。
children()可以传参数，参数是字符串格式的选择器，在选中所有子级的情况下，保留满足选择器的部分，进行了二次选择。

siblings()获取兄弟级对象集

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>
复制代码

链式调用

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

// 获取所有的 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")  // 父级的兄弟的子级变黄绿色
})
复制代码

其他节点关系方法

find()获取后代元素

jQuery对象可以利用find()方法，传递一个参数，参数部分规定的选择器，查找范围是jQuery对象的所有后代。参数是字符串格式的选择器。

紧邻兄弟元素的方法

next()下一个兄弟元素
prev()上一个兄弟元素\

多选方法

nextAll()后面所有兄弟元素
preAll()前面所有兄弟元素
可以传参数，参数是字符串格式的选择器，在选中所有子级的情况下，保留满足选择器的部分，进行了二次选择。

// 获取元素
var $box1 = $("#box1")
var $box = $(".box")
var $child = $box.children()
// find() 方法查找后代中的 span 元素
$box1.find("span").css({
  "width": 50,
  "height": 50
})
// 兄弟元素查找
// next() 下一个兄弟
// prev() 上一个兄弟
// nextAll() 后面所有兄弟
// prevAll() 前面所有兄弟
// parents() 查找包含body在内的祖先级
$child.click(function () {
  // 让自己变红色，让下一个兄弟变粉色
  $(this).css("background-color", "red")
  .next().css("background-color", "skyblue")
  // 让自己变红色，让上一个兄弟变蓝色
  $(this).css("background-color", "red")
  .prev().css("background-color", "blue")
  // 让自己变红色，让前面所有兄弟变蓝色，让后面所有兄弟变黄色
  $(this).css("background-color", "red")
  .prevAll().css("background-color", "blue")
  $(this).nextAll("p").css("background-color", "yellow")
  // 让自己变红色，祖先级变天蓝色
  $(this).css("background-color", "red")
  .parents("div").css("background-color", "skyblue")
})
复制代码

发送验证码案例

<!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>  
</head>

<body>
  <input type="text">
  <input type="button" value="发送">
  <script src="js/jquery-1.12.4.min.js"></script>
  <script>
    // 获取元素
    var $btn = $("input:button")
    // 添加按钮的点击事件
    $btn.click(function () {
      // 定义一个变量存储时间的数字
      var n = 5;
      // 让按钮被禁用
      // 替换按钮的文字内容
      $(this).prop("disabled",true).val(n + "s 后重新发送")
      // 每隔 1s 更改倒计时内容
      // 通过定时器进行每隔 1s 减时间效果
      var timer = setInterval(() => {
        n--;
        // 文字内容发生变化
        // 定时器内部的this指向的默认为 window
        $(this).val(n + "s 后重新发送")
        // 判断如果时间到了 0 ，就要停止定时器
        if (n <= 0) {
          clearInterval(timer)
          // 5s 结束后，需要让文字恢复 发送
          // 让按钮取消禁用          
          $(this).val("重新发送").prop("disabled",false)
        }
      },1000)
      
    })
    
  </script>
</body>
</html>

作者：小流江河
链接：juejin.cn/post/693323… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

jQuery常用方法