jQuery之操作標籤屬性與文字

阿新 • • 發佈：2020-07-09

屬性/文字

操作任意屬性：

　　attr(name)/attr(name,value)：讀寫非布林值的標籤屬性。

　　prop(name)/prop(name,value)：讀寫布林值的標籤屬性。

　　removeAttr(name)/removeProp(name)：刪除屬性。

操作class屬性：

　　addClass(classValue)：新增class。

　　removeClass(classValue)：移除指定class。

操作HTML程式碼/文字/值：

　　val()/val(value)：讀寫標籤的value。

　　html()/html(htmlString)：讀寫標籤體文字。

示例

<! 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性/文字</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 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>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    $(function (){
        /*
         * 需求：
         * 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)
        $('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>mmmmmmmmm</h1>"
        $('li:first').html('<h1>mmmmmmmmm</h1>');
        //9.得到輸入框中的value值
        console.log($(':text').val());
        //10.將輸入框的值設定為atguigu
        $(':text').val('atguigu');
        //11.點選'全選'按鈕實現全選
        $('button:first').click(function () {
            $(':checkbox').prop('checked', true)
        });
        //12.點選'全不選'按鈕實現全不選
        $('button:last').click(function () {
            $(':checkbox').prop('checked', false)
        });
    });
</script>
</body>
</html>