jquery-属性操作

最新推荐文章于 2024-07-30 20:19:19 发布

鲸鱼编程pyhui

最新推荐文章于 2024-07-30 20:19:19 发布

阅读量287

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ifubing/article/details/99619722

属性操作

》获取属性与设置属性

在这里插入图片描述

取值
jqobj.attr（属性名）

赋值，赋一个
jqobj.attr(属性名，属性值）

赋值，赋多个
jqobj.attr（{属性名：属性值，属性名2：属性值2}）

》移除属性

jqobj.removeAttr（属性名）

》另一种获取属性的方法

获取属性
jqobj.prop（属性名）

设置属性
jqobj.prop(属性名，属性值）

移除属性
jqobj.removeProp（属性名）

》attr获取属性与prop获取属性的比较

分别用两种方法试验一下。获取自定义属性与默认属性。获取单远框属性与多选框属性。

测试结果，prop拿不到自定义的属性，拿的话结果为 undefined

单选框，多选框获取checked属性的值，试验一下子

练习

购物车练习，复选框

全选

反选

全取消

在这里插入图片描述

随堂

在这里插入图片描述

》定义了一个特别的a标签

在这里插入图片描述
》获取属性的值

》添加新的属性值
在这里插入图片描述

》删除属性

在这里插入图片描述

》prop与attr 取属性值的区别

在这里插入图片描述

作业素材代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>


<p></p>
<input type="checkbox" name="shopList">卤鸡蛋 <br>
<input type="checkbox" name="shopList">辣条  <br>
<input type="checkbox" name="shopList">旺仔牛奶  <br>
<input type="checkbox" name="shopList">湖南臭豆腐  <br>
<input type="checkbox" name="shopList">咪咪虾条  <br>
<input type="checkbox" name="shopList">小熊饼干  <br>

<input type="button" id="qx" value="全选">
<input type="button" id="fx" value="反选">
<input type="button" id="cancel" value="取消">




</body>
</html>