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