码迷,mamicode.com
首页 > Web开发 > 详细

jQuery之属性

时间:2018-07-27 18:06:01      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:remove   log   code   pre   title   需求   als   aaaaa   user   

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);
    })

 

jQuery之属性

标签:remove   log   code   pre   title   需求   als   aaaaa   user   

原文地址:https://www.cnblogs.com/caicaihong/p/9378919.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!