jQuery操作元素的属性值
1.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> function testField(){ //获取元素对象 var uname = $("#uname"); //获取属性的类型 alert(uname.attr("type")); } </script> </head> <body> <h3>jQuery操作元素的属性值</h3> <input type="button" value="测试获取元素属性" onclick="testField()"> <hr> 用户名:<input type="text" name="uname" id="uname"> </body> </html>
获取元素属性类型的时候调用一个attr的方法
2.如何拿到实时数据,用户名输入的数据在点击按钮的时候可以显示,也就是把他存到计算机中
jQuery操作元素属性:
获取:
对象名.attr(“属性名”)//返回当前属性值
注意此种方法不能获取value属性的实时数据,使用对象名.val()进行获取
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> function testField(){ //获取元素对象 var uname = $("#uname"); //获取属性的类型 alert(uname.attr("type")+":"+uname.val()); } </script> </head> <body> <h3>jQuery操作元素的属性值</h3> <input type="button" value="测试获取元素属性" onclick="testField()"> <hr> 用户名:<input type="text" name="uname" id="uname"> </body> </html>
3.对操作元素进行修改:
修改:
对象名.attr(“属性名”,“属性值”)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> function testField(){ //获取元素对象 var uname = $("#uname"); //获取属性的类型 alert(uname.attr("type")+":"+uname.val()); } function testField2() { //获取元素对象 var uname = $("#uname"); uname.attr("type","button"); } </script> </head> <body> <h3>jQuery操作元素的属性值</h3> <input type="button" value="测试获取元素属性" onclick="testField()"> <input type="button" value="测试修改元素属性" onclick="testField2()"> <hr> 用户名:<input type="text" name="uname" id="uname" value="haha"> </body> </html>
点击:测试修改元素属性——