JQ——DOM操作(获取值)
1、text() :设置或返回所选元素的文本内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM操作</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> </script> <script> $(function(){ $("#b").click(function(){ alert($("#test").text()); }); }); </script> </head> <body> <p id="test">海军军医大学第二附属医院(上海长征医院)举行了<b>“赴湖北抗击疫情誓师大会”</b>。该院首批医疗队60人已集结完毕,除夕之夜奔赴武汉。</p> <button id="b">显示文本</button> </body> </html>
2、html() : 设置或返回所选元素的内容(包括 HTML 标记)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM操作</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> </script> <script> $(function(){ $("#b").click(function(){ alert($("#test").html()); }); }); </script> </head> <body> <p id="test">海军军医大学第二附属医院(上海长征医院)举行了<b>“赴湖北抗击疫情誓师大会”</b>。该院首批医疗队60人已集结完毕,除夕之夜奔赴武汉。</p> <button id="b">显示文本</button> </body> </html>
3、val() : 设置或返回表单字段的值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM操作</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> </script> <script> $(function(){ $("#b").click(function(){ alert($("#test").val()); }); }); </script> </head> <body> <input type="text" id="test" value="新年快乐!"><br><br> <button id="b">显示输入的文本内容</button> </body> </html>
4、attr() :用于获取属性的值、
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM操作</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> </script> <script> $(function(){ $("#b").click(function(){ alert($("#test").attr("align")); }); }); </script> </head> <body> <table width="600" border="1" align="center" cellpadding="5" cellspacing="3" id="test"> <caption>成绩登记表</caption> <thead> <tr> <th align="middle" >序号</th> <th align="middle ">学号</th> <th align="middle ">姓名</th> <th align="middle ">平时成绩</th> <th align="middle ">期末成绩</td> <th align="middle ">学期总成绩</th> </tr> </thead> <tbody> <tr onmouseover="changeColor(‘tr1‘,‘over‘)" id="tr1" onmouseout="changeColor(‘tr1‘,‘out‘)"> <td align="middle ">1</td> <td align="middle ">20100300201</td> <td align="middle ">张小丽</td> <td align="middle ">95</td> <td align="middle ">95</td> <td align="middle ">95</td> </tr> </tbody> </table> <center> <button id="b">显示属性的值</button> </center> </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