溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery的操作屬性有哪些

發(fā)布時(shí)間：2022-02-24 09:32:56 來(lái)源：億速云 閱讀：114 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要介紹jQuery的操作屬性有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

    一、操作屬性

    1、讀取屬性值：attr(屬性名)

    取得以第一匹配元素的屬性值。通過(guò)這個(gè)方法可以方便地從第一個(gè)匹配元素中獲取一個(gè)屬性的值。如果元素沒有相應(yīng)屬性，則返回undefined

    2、修改屬性值

    （1）attr(key,value)

    為所有匹配的元素設(shè)置一個(gè)屬性值

    （2）attr(key,fn)

    'key'：表示屬性名

    'fn'：表示函數(shù),將函數(shù)的屬性值作為key代表的屬性的值

    為所有匹配的元素設(shè)置一個(gè)計(jì)算的屬性值。不提供值，而是提供一個(gè)函數(shù)，由這個(gè)函數(shù)計(jì)算的值作為屬性值

    （3）attr({屬性名1：屬性值，屬性名2：屬性值})

    3、刪除屬性：removeAttr(屬性名)

    從每一個(gè)匹配的元素中刪除一個(gè)屬性

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jq/jquery.js"></script>
</head>
<style>
    .ok{
        color: red;
    }
</style>
<body>
    <a href="https://www.baidu.com">去百度</a>
    <br><br>
    <input type="text">
    <div></div>
 
    <script>
        $(function(){
            let str = $('a').attr('href');//選中a標(biāo)簽把href的屬性賦給str
            console.log(str)
 
            // $('input').attr('value','123')
            $('input').attr('value',function(){//將函數(shù)的值賦給value，注意函數(shù)必須有返回值
                let s = 0;
                for(let i=1;i<=10;i++){
                    s+=i;
                }
                return s;
            })
        })
    </script>
</body>
</html>

    jQuery的操作屬性有哪些

    value為55，輸出的是href屬性的值

    二、操作類（class）

    1、添加class屬性：addClass(class屬性)

    為每個(gè)匹配的元素添加指定的類名

    2、刪除class屬性：removeClass(屬性名)

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

    3、交替添加/刪除class屬性：toggleClass(class屬性)

    如果存在（不存在）就刪除（添加）一個(gè)類

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jq/jquery.js"></script>
</head>
<style>
    .ok{
        color: red;
    }
</style>
<body>
    <p>西安郵電大學(xué)</p>
    <button id='btn1'>變色</button>
    <button id="btn2">取消</button>
    <button id="btn3">交替</button>
    <button id="btn4">單擊三次</button>
    <div></div>
 
    <script>
        $(function(){
            $('#btn1').click(function(){
                $('p').addClass('ok')
            })
            $('#btn2').click(function(){
                $('p').removeClass('ok')
            })
            $('#btn3').click(function(){
                $('p').toggleClass('ok')
            })
            var count = 0;
            $('#btn4').click(function(){
                $('p').toggleClass('ok',++count % 3 ===0)
                //如果值為0，那么就添加css樣式
            })
        })
    </script>
</body>
</html>

    jQuery的操作屬性有哪些

    點(diǎn)擊變色：變成紅色

    點(diǎn)擊取消：變成原來(lái)的顏色

    點(diǎn)擊交替：顏色交替變換

    點(diǎn)擊單擊三次：每點(diǎn)擊第三次都會(huì)變色

    三、操作css

    1、獲取CSS樣式屬性值：css('樣式屬性名')

    訪問第一個(gè)匹配元素的樣式屬性

    2、設(shè)置樣式屬性--采用'key/value'

    css({'屬性名','屬性值','屬性名','屬性值'})

    把一個(gè)"名/值對(duì)"對(duì)象設(shè)置為所有匹配元素的樣式屬性。這是一種在所有匹配的元素上設(shè)置大量樣式屬性的最佳方式

    3、一次設(shè)置一個(gè)屬性：css('屬性名','值')

    在所有匹配的元素中，設(shè)置一個(gè)樣式屬性的值

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jq/jquery.js"></script>
</head>
<style>
    .ok{
        color: red;
    }
</style>
<body>
    <p>西安郵電大學(xué)</p>
    <div></div>
 
    <script>
        $(function(){
            let c = $('p').css('color');
            let f = $('p').css('font-size');
 
            console.log(c)
            console.log(f)
 
        })
    </script>
</body>
</html>

     開發(fā)者工具的控制臺(tái)輸出的是rgb(0, 0, 0)和16px

    四、設(shè)置、獲取元素的width和height

    1、獲取width：width()

    取得第一個(gè)匹配元素當(dāng)前計(jì)算的寬度值（px）

    2、設(shè)置width：width(val)

    為每個(gè)匹配的元素設(shè)置css寬度（width）屬性的值

    3、獲取height：height()

    4、設(shè)置height：height(val)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jq/jquery.js"></script>
</head>
<style>
    .ok{
        color: red;
    }
</style>
<body>
    <div></div>
 
    <script>
        $(function(){
            $('div').width(300);
            $('div').height(200);
            $('div').css('backgroundColor','red')
        })
    </script>
</body>
</html>

    jQuery的操作屬性有哪些

    五、操作元素內(nèi)容

    1、獲取內(nèi)容

    html()   ---innerHTML

    2、設(shè)置內(nèi)容

    html(val)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jq/jquery.js"></script>
</head>
<style>
    .ok{
        color: red;
    }
</style>
<body>
    <p>西安郵電大學(xué)</p>
    <div></div>
 
    <script>
        $(function(){
 
            $('div').width(300);
            $('div').height(200);
            $('div').css('backgroundColor','red')
            
 
            console.log($('p').html())
 
            $('div').html('<b>西游記</b>')
        })
    </script>
</body>
</html>

    jQuery的操作屬性有哪些

    六、操作值--操作元素的value屬性

    1、獲取值：val()

    2、設(shè)置值：val(值)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jq/jquery.js"></script>
</head>
<style>
    .ok{
        color: red;
    }
</style>
<body>
    <input type="text">
 
    <script>
        $(function(){
            $('input').val('AAAAA')
        })
    </script>
</body>
</html>

    jQuery的操作屬性有哪些

    以上是“jQuery的操作屬性有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

    向AI問一下細(xì)節(jié)

    免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

    AI
    助
    手