属性操作

》获取属性与设置属性

jquery-属性操作_赋值

取值
jqobj.attr(属性名)

赋值,赋一个
jqobj.attr(属性名,属性值)

赋值,赋多个
jqobj.attr({属性名:属性值,属性名2:属性值2})

》移除属性

jqobj.removeAttr(属性名)

》另一种获取属性的方法

获取属性
jqobj.prop(属性名)

设置属性
jqobj.prop(属性名,属性值)

移除属性
jqobj.removeProp(属性名)

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

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

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

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

练习

购物车练习,复选框

全选

反选

全取消

jquery-属性操作_属性值_02

随堂

jquery-属性操作_html_03

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

jquery-属性操作_赋值_04
》获取属性的值
jquery-属性操作_多选框_05

》添加新的属性值
jquery-属性操作_多选框_06

》删除属性

jquery-属性操作_html_07

》prop与attr 取属性值的区别

jquery-属性操作_jquery_08

jquery-属性操作_多选框_09

jquery-属性操作_多选框_10

作业素材代码
<!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>