jQuery之属性

Posted 2020-12-25 caicaihong

1. 操作任意属性
attr() 操作非布尔值的
removeAttr()
prop() 操作布尔值的
2. 操作class属性
addClass() 添加class属性
removeClass() 移除class属性
3. 操作html代码/文本/值
html()
val()

<div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box" title="two">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
  <li>AAAAA</li>
  <li title="hello" class="box2">BBBBB</li>
  <li class="box">CCCCC</li>
  <li title="hello">DDDDDD</li>
  <li title="two"><span>BBBBB</span></li>
</ul>

<input type="text" name="username" value="guiguClass"/>
<br>
<input type="checkbox">
<input type="checkbox">
<br>
<button>选中</button>
<button>不选中</button>

需求和实现如下：

1. 读取第一个div的title属性
2. 给所有的div设置name属性(value为atguigu)
3. 移除所有div的title属性
4. 给所有的div设置class=‘guiguClass‘
5. 给所有的div添加class=‘abc‘
6. 移除所有div的guiguClass的class
7. 得到最后一个li的标签体文本
8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
9. 得到输入框中的value值
10. 将输入框的值设置为atguigu
11. 点击‘全选‘按钮实现全选
12. 点击‘全不选‘按钮实现全不选

//1. 读取第一个div的title属性值
    console.log($("div:first").attr("title"))
    
    // 2. 给所有的div设置name属性(value为atguigu)
    console.log($("div:first").attr("name",‘rainbow‘))
    
    // 3. 移除所有div的title属性
    $("div").removeAttr("title")
    // 4. 给所有的div设置class=‘guiguClass‘
    $("div").attr("class","guiguClass");
    // 5. 给所有的div添加class=‘abc‘
    $("div").addClass("abc");
    // 6. 移除所有div的guiguClass的class
    $("div").removeClass("guiguClass")
    
    // 7. 得到最后一个li的标签体文本
    console.log($("li:last").html())
    // 8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
    $("li:first").html("<h1>mmmmmmmmm</h1>")
    console.log($("li:first").html())
    // 9. 得到输入框中的value值
    console.log($(":text").val())
    // 10. 将输入框的值设置为atguigu
    $(":text").val("atguigu")
    // 11. 点击‘全选‘按钮实现全选
    // attr(): 操作属性值为非布尔值的属性
    // prop(): 专门操作属性值为布尔值的属性
    var $checkboxs = $(":checkbox");
    $(":button:first").click(function(){
        $checkboxs.prop("checked",true);
    });
    
    // 12. 点击‘全不选‘按钮实现全不选
    $(":button:last").click(function(){
        $checkboxs.prop("checked",false);
    })