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!");

 

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