jQuery的操作屬性詳解

Posted on by

一、操作屬性

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

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

2、修改屬性值

（1）attr(key,value)

為所有匹配的元素設置一個屬性值

（2）attr(key,fn)

'key'：表示屬性名

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

為所有匹配的元素設置一個計算的屬性值。不提供值，而是提供一個函數，由這個函數計算的值作為屬性值

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

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

從每一個匹配的元素中刪除一個屬性

<!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標簽把href的屬性賦給str
            console.log(str)
 
            // $('input').attr('value','123')
            $('input').attr('value',function(){//將函數的值賦給value，註意函數必須有返回值
                let s = 0;
                for(let i=1;i<=10;i++){
                    s+=i;
                }
                return s;
            })
        })
    </script>
</body>
</html>

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

二、操作類（class）

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

為每個匹配的元素添加指定的類名

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

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

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

如果存在（不存在）就刪除（添加）一個類

<!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>西安郵電大學</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>

  • 點擊變色：變成紅色
  • 點擊取消：變成原來的顏色
  • 點擊交替：顏色交替變換
  • 點擊單擊三次：每點擊第三次都會變色

三、操作css

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

訪問第一個匹配元素的樣式屬性

2、設置樣式屬性–采用'key/value'

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

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

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

在所有匹配的元素中，設置一個樣式屬性的值

<!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>西安郵電大學</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>

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

四、設置、獲取元素的width和height

1、獲取width：width()

取得第一個匹配元素當前計算的寬度值（px）

2、設置width：width(val)

為每個匹配的元素設置css寬度（width）屬性的值

3、獲取height：height()

4、設置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>
    <p>西安郵電大學</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>

五、操作元素內容

1、獲取內容

html()   —innerHTML

2、設置內容

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>西安郵電大學</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>

 

 

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

1、獲取值：val()

2、設置值：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>

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：