04-jQuery的屬性操做

時間 2019-11-24

標籤 jquery 屬性欄目 JQuery 简体版

原文原文鏈接

jquery的屬性操做模塊分爲四個部分：html屬性操做，dom屬性操做，類樣式操做和值操做javascript

html屬性操做：是對html文檔中的屬性進行讀取，設置和移除操做。好比attr()、removeAttr()
DOM屬性操做：對DOM元素的屬性進行讀取，設置和移除操做。好比prop()、removeProp()
類樣式操做：是指對DOM屬性className進行添加，移除操做。好比addClass()、removeClass()、toggleClass()
值操做：是對DOM屬性value進行讀取和設置操做。好比html()、text()、val()

attr()

設置屬性值或者返回被選元素的屬性值css

       //獲取值：attr()設置一個屬性值的時候 只是獲取值
        var id = $('div').attr('id')
        console.log(id)
        var cla = $('div').attr('class')
        console.log(cla)
        //設置值
        //1.設置一個值 設置div的class爲box
        $('div').attr('class','box')
        //2.設置多個值，參數爲對象，鍵值對存儲
        $('div').attr({name:'hahaha',class:'happy'})

removeAttr()

移除屬性html

//刪除單個屬性
$('#box').removeAttr('name');
$('#box').removeAttr('class');

//刪除多個屬性
$('#box').removeAttr('name class');

prop()

prop() 方法設置或返回被選元素的屬性和值。java

當該方法用於返回屬性值時，則返回第一個匹配元素的值。jquery

當該方法用於設置屬性值時，則爲匹配元素集合設置一個或多個屬性/值對。瀏覽器

語法：app

返回屬性的值：dom

$(selector).prop(property)

設置屬性和值：this

$(selector).prop(property,value)

設置多個屬性和值：spa

$(selector).prop({property:value, property:value,...})

關於attr()和prop()的區別

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    男<input type="radio" id='test' name="sex"  checked/>
    女<input type="radio" id='test2' name="sex" />
    <button>提交</button>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //獲取第一個input
            var el = $('input').first();
            //undefined  由於attr是獲取的這個對象屬性節點的值，很顯然此時沒有這個屬性節點，天然輸出undefined
            console.log(el.attr('style'));
            // 輸出CSSStyleDeclaration對象，對於一個DOM對象，是具備原生的style對象屬性的，因此輸出了style對象
            console.log(el.prop('style'));
            console.log(document.getElementById('test').style);

            $('button').click(function(){
                alert(el.prop("checked") ? "男":"女");
            })
            


        })
    </script>
    
</body>
</html>

何時使用attr()，何時使用prop()？

1.是有true,false兩個屬性使用prop();

2.其餘則使用attr();

addClass（添加多個類名）

爲每一個匹配的元素添加指定的類名。

$('div').addClass("box");//追加一個類名到原有的類名

還能夠爲匹配的元素添加多個類名

$('div').addClass("box box2");//追加多個類名

removeClass

從全部匹配的元素中刪除所有或者指定的類。

移除指定的類（一個或多個）

$('div').removeClass('box')；

移除所有的類

$('div').removeClass();

能夠經過添加刪除類名，來實現元素的顯示隱藏

代碼以下：

var tag  = false;
        $('span').click(function(){
            if(tag){
                $('span').removeClass('active')
                tag=false;
            }else{
                $('span').addClass('active')
                tag=true;
            }    
})

案例：

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
     <ul>
         <li class="item">張三</li>
         <li class="item">李四</li>
         <li class="item">王五</li>
     </ul>
     <script type="text/javascript" src="jquery-3.3.1.js"></script>
     <script type="text/javascript">
         $(function(){

             $('ul li').click(function(){
                 // this指的是當前點擊的DOM對象 ,使用$(this)轉化jquery對象
                 $(this).addClass('active').siblings('li').removeClass('active');
             })
         })
     </script>
    
</body>
</html>

toggleClass

若是存在（不存在）就刪除（添加）一個類。

語法：toggleClass('box')

$('span').click(function(){
    //動態的切換class類名爲active
    $(this).toggleClass('active')
})

html

獲取值：

語法;

html() 是獲取選中標籤元素中全部的內容

$('#box').html();

設置值：設置該元素的全部內容會替換掉標籤中原來的內容

$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

text

獲取值：

text() 獲取匹配元素包含的文本內容

語法：

$('#box').text();

設置值：
設置該全部的文本內容

$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

注意：值爲標籤的時候不會被渲染爲標籤元素只會被當作值渲染到瀏覽器中

val

獲取值：

val()用於表單控件中獲取值，好比input textarea select等等

設置值：

$('input').val('設置了表單控件中的值')；

1. 屬性節點的操做(JS操做屬性)（jQuery操做屬性）（H5新增的屬性操做）
2. jQuery屬性操做
3. js屬性操做
4. javascript屬性操做
5. jQuery 屬性操做
6. jQuery---屬性操做
7. JS操做屬性
8. js操做屬性
9. JavaScript中的屬性操做
10. 對象屬性的操做
更多相關文章...
• ASP ASPError 對象的屬性 - ASP 教程
• C# Windows 文件系統的操作 - C#教程
• 互聯網組織的未來：剖析GitHub員工的任性之源
• JDK13 GA發佈：5大特性解讀

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。