jQuery的DOM操作之操作属性

最新推荐文章于 2024-10-09 00:58:21 发布

听海边涛声

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量633

点赞数 3

文章标签： jquery javascript ajax

本文链接：https://blog.csdn.net/panghuangang/article/details/141993040

版权

说明

val()：获取匹配元素集合中第一个元素的当前值，或设置每个匹配元素的值。
prop()：获取匹配元素集合中第一个元素的某个属性的值，或为每个匹配元素设置一个或多个属性。获取或修改原生属性值（checked，selected）。
attr()：获取匹配元素集合中第一个元素的某个属性值，或为每个匹配元素设置一个或多个属性。获取或修改自定义属性值，等于dom.setAttribute()、dom.getAttribute()。
.removeAttr()：从匹配元素集合中的每个元素中删除一个属性。

示例

val()：获取元素的当前值

<!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.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <input type="text" id="myinput" name="fruitname" value="苹果"><br>
  <ul>
    <li id="mht">猕猴桃</li>
    <li id="hlg">火龙果</li>
  </ul>
  <input type="checkbox" checked id="season">
  <script>
    const $myinput = $('#myinput')
    alert($myinput.val())
  </script>
</body>

</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.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <input type="text" id="myinput" name="fruitname" value="苹果"><br>
  <ul>
    <li id="mht">猕猴桃</li>
    <li id="hlg">火龙果</li>
  </ul>
  <input type="checkbox" checked id="season">
  <script>
    const $myinput = $('#myinput')
    $myinput.val('桂圆')
  </script>
</body>

</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.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <input type="text" id="myinput" name="fruitname" value="苹果"><br>
  <ul>
    <li id="mht" name="mihoutao">猕猴桃</li>
    <li id="hlg" name="huolongguo">火龙果</li>
  </ul>
  <input type="checkbox" checked id="season">
  <script>
    alert($('#mht').attr('name'))
  </script>
</body>

</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.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <input type="text" id="myinput" name="fruitname" value="苹果"><br>
  <ul>
    <li id="mht" name="mihoutao">猕猴桃</li>
    <li id="hlg" name="huolongguo">火龙果</li>
  </ul>
  <input type="checkbox" checked id="season">
  <script>
    const $mht = $('#mht')
    $mht.attr('name', 'hongxinmihoutao')
    alert($mht.attr('name'))
  </script>
</body>

</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.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <input type="text" id="myinput" name="fruitname" value="苹果"><br>
  <ul>
    <li id="mht" name="mihoutao">猕猴桃</li>
    <li id="hlg" name="huolongguo">火龙果</li>
  </ul>
  <input type="checkbox" checked id="season">
  <script>
    const $mht = $('#mht')
    alert($mht.attr('description'))
    $mht.attr('description', '猕猴桃富含有机酸')
    alert($mht.attr('description'))
  </script>
</body>

</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.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <input type="text" id="myinput" name="fruitname" value="苹果"><br>
  <ul>
    <li id="mht" name="mihoutao">猕猴桃</li>
    <li id="hlg" name="huolongguo">火龙果</li>
  </ul>
  <input type="checkbox" checked id="season">
  <script>
    const $mht = $('#mht')
    $mht.removeAttr('name')
    alert($mht.attr('name'))
  </script>
</body>

</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.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <input type="text" id="myinput" name="fruitname" value="苹果"><br>
  <ul>
    <li id="mht" name="mihoutao">猕猴桃</li>
    <li id="hlg" name="huolongguo">火龙果</li>
  </ul>
  <input type="checkbox" checked id="season">
  <script>
    alert($('#season').prop('checked'))
  </script>
</body>

</html>