JQuery中attr,text,html,val的用法

        關於attr,text,html,val的用法,這四者之間是有一點點區別的。

  attr(name|properties|key,value|fn)

           此屬性用於設置或返回被選元素的屬性值。

name

屬性名稱

properties 作爲屬性的“名/值對”對象
key,value 屬性名稱,屬性值
key,function(index,attr)

key:屬性名稱

function(index,attr):返回屬性值的函數,第一個參數爲索引值,第二個參數爲原先的屬性值

如下:

      1、  $('img').attr('src')-------->此代碼表示返回所有圖像的src屬性值。

      2、下面例子表示爲所有src屬性和alt屬性設置屬性值

$('img').attr(
     {
          src: "test.jpg",
          alt: "Test Image"
});

        3.如下將class的屬性值設置爲reset。

<head>
    <meta charset=" utf-8">
    <meta name="author" content="http://www.jb51.net/" />
    <title>attr()函數-腳本之家</title>
    <style type="text/css">
        .reset {
            font-size: 20px;
            color: green;
        }
    </style>
    <script type="text/javascript" src="一匹黑馬/黑馬1/JS/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn").click(function () {
                $("div").attr("class", function () {
                    return "reset"
                })
            })
        })
    </script>
</head>

<body>
    <div class="font bg">腳本之家歡迎您</div>
    <button id="btn">點擊查看效果</button>
</body>

</html>

        關於text的用法

   text

         可用於獲取某一元素的內容或者設置某一元素的內容。

      1.返回p元素的文本內容

$('p').text();

       2.設置p元素的文本內容

$("p").text("Hello world!");

        關於HTML的用法

html

        他的用法和text基本一樣。都可以用了獲取內容,或者設置文本內容,但是在設置文本內容的使用上有一點的不同之處。 

        1.返回p元素的文本內容

$('p').html();

       2.設置p元素的文本內容

$("p").html("Hello <b>world</b>!");

        關於val的使用

val

        多用於獲取表單元素的當前值或者設置表單元素的值。

        1.返回input表單的文本內容 

$("input").val();

       2.設置input表單的文本內容

$("input").val("hello world!");

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章