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