JQ——设置值、DOM对象和JQ对象的转换
1、设置值:
text() :设置或返回所选元素的文本内容
html() :设置或返回所选元素的内容(包括 HTML 标记)
val() :设置或返回表单字段的值
attr() :设置或返回属性值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>值的设置</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> </script> <script> $(function(){ $("#b").click(function(){ $("#test").text("新年好!"); }); }); </script> </head> <body> <p id="test">我是一个文本!</p> <button id="b">设置文本的值</button> </body> </html>
刚开始是文本的初始值:
点击按键后,对文本重新赋值,文本的值发生了改变:
2、DOM对象和JQ对象的转换:
(1)DOM对象转换为JQ对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM对象和JQ对象的转换</title> <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> <script> function test(){ var test = document.getElementById("test"); $(test).html("新年好!"); } </script> </head> <body> <span id="test">大家好,我是一个文本!</span> <input type="button" value="DOM对象转换为JQ对象" onclick="test()"/> </body> </html>
2、DOM对象转换为JQ对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM对象和JQ对象的转换</title> <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> <script> function test(){ var test = document.getElementById("test"); $(test).html("新年好!"); } </script> </head> <body> <span id="test">大家好,我是一个文本!</span> <input type="button" value="DOM对象转换为JQ对象" onclick="test()"/> </body> </html>
3、JQ对象转换为DOM对象:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ对象转换为DOM对象</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("#button").click(function(){ $("#test").get(0).innerHTML="新年好!"; }); }); </script> </head> <body> <span id="test">大家好,我是一个文本!</span> <input type="button" value="JQ对象转换为DOM对象" id="button"/> </body> </html>
相关推荐
e度空间 2020-05-16
82550495 2020-05-12
liaoxuewu 2020-01-25
89463661 2020-01-25
福叔 2019-12-20
donghongbz 2019-12-22
SIMONDOMAIN 2019-12-13
宇智波鼬 2015-04-14
Luu 2016-11-19
SinhaengHhjian 2016-11-19
XTUxiaoxin 2016-11-14
aaaaaaaa00 2016-11-14
miyacnn 2019-07-12
roodyszz0 2019-07-01
luoshuitianyi 2019-06-28
82473264 2017-02-23
WCschool官方 2017-02-17
flywaterfree 2016-11-19
gamecalo 2016-11-14