jQuery属性

jQuery属性

1、操作任意属性

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

2、操作class属性

• addClass()
• removeClass()

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">DDDDD</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>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    // 1、读取第一个div的title属性
    console.log($('div:first').attr('title'))
    // 2、给所有的div设置name属性(value为atguigu)
    $('div').attr('name', 'atguigu')
    // 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>mmmmmmmm</h1>"
    $('li:first').html('<h1>mmmmmmmm</h1>')
    // 9、得到输入框中的value值
    console.log($(':text').val())
    // 10、将输入框中的值设置为atguigu
    $(':text').val('atguigu')
    // 11、点击'全选'按钮实现全选
    var $checkbox = $(':checkbox')
    $('button:first').click(function () {
        $checkbox.prop('checked', true)
    })
    // 12、点击'全不选'按钮实现全不选
    var $checkbox = $(':checkbox')
    $('button:last').click(function () {
        $checkbox.prop('checked', false)
    })
</script>