文章目录

  • 属性列表
  • 实际使用
  • 区分
  • attr()和prop()
  • attr('class', value)和addclass(classValue)
  • 小结：


属性列表

  • attr(name|properties|key,value|fn) ：设置或返回被选元素的属性值。
  • removeAttr(name)：从每一个匹配的元素中删除一个属性
  • prop(name|properties|key,value|fn)：获取在匹配的元素集中的第一个元素的属性值。
  • removeProp(name)：用来删除由.prop()方法设置的属性集
  • addClass(class|fn)：为每个匹配的元素添加指定的类名
  • removeClass([class|fn])：从所有匹配的元素中删除全部或者指定的类。
  • toggleClass(class|fn[,sw])：如果存在（不存在）就删除（添加）一个类。
  • html([val|fn])：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
  • text([val|fn])：取得所有匹配元素的内容。
  • val([val|fn|arr])：获得匹配元素的当前值。

实际使用

  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的标签体为"

mmmmmmmmm</ h2>"

  1. 得到输入框中的vaLue值
  2. 将输入框的值设置为atguigu
  3. 点击’全选’按钮实现全选
  4. 点击’全不选’按钮实现全不选
    eg：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery属性</title>
</head>
<body>
    <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 tit1e="he1lo" >DDDDDD</li>
        <li title="two"><span>BBBBB</span></li>
    </ul>
    <input type="text" name="username" value="baiduClass" />
    <br>
    <input type="checkbox">
    <input type="checkbox"><br>
    <button>选中</button>
    <button>不选中</button>
    
    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    <script>
// 1. 读取第一个div的titLe属性
        console.log($('div:first').attr('title'))
// 2. 给所有的div设置name属性(vaLue为atguigu)
        $('div').attr('name','baidu')
// 3. 移除所有div的titLe属性
        $('div').removeAttr('title')
// 4. 给所有的div设置cLass='baidu'
        $('div').attr('class','baidu')
// 5. 给所有的div添加cLass='abc'
        $('div').addClass('abc')
// 6. 移除所有div的baidu的cLass
        $('div').removeClass('baidu')
// 7. 得到最后一个Li的标签体文本
        console.log($('li:last').html())
// 8. 设置第一个Li的标签体为"<h1>mmmmmmmmm</ h1>"
        $('li:first').html('<h1>mmmmmmmmm</ h1>')
// 9. 得到输入框中的vaLue值
        console.log($(':text').val())
// 10. 将输入框的值设置为helloword
        $(':text').val('helloword')
        
// 11. 点击'全选'按钮实现全选
        var $checkboxs =$(':checkbox')
        $('button:first').click(function (){
           $checkboxs.prop('checked',true)
        })
// 12. 点击'全不选'按钮实现全不选
        $('button:last').click(function (){
                $checkboxs.prop('checked',false)
        })
    </script>
    
</body>
</html>

区分

attr()和prop()

attr()：操作属性值为非布尔值的属性
prop()：专门操作属性值为布尔值的属性

attr(‘class’, value)和addclass(classValue)

attr(‘calss’, value)：是设置class,后面设置的会覆盖前面设置的
addclass(classValue)：是添加class。

小结：
• attr(name) / attr(name, value):读写非布尔值的标签属性
• prop( name) / prop(name,value):读写布尔值的标签属性
• removeAttr(name)/ removeProp(name):删除属性
上面的方法对对任意的属性都可用，也可以对calss使用。
• addclass(classValue):添加class
• removeClass( classValue):移除指定class
• val() / val(value):读写标签的value
• html() | html( htmlString):读写标签体文本