jQuery捕获-获取DOM元素内容和属性
⼀、获取内容
  1.text()-设置或返回所选元素的⽂本内容
  2.html()-设置或返回所选元素的内容（包括HTML标记）
  3.val()-设置或返回表单字段的值
1 $(document).ready(function(){
2  $("#btn1").click(function(){
3    alert("Text: " + $("#test").text());
4  });
5  $("#btn2").click(function(){
6    alert("HTML: " + $("#test").html());
7  });
8    $("#btn3").click(function(){
9    alert("值为: " + $("#test").val());
10  });
11 });
12 </script>
13 </head>
14
15 <body>
16 <p id="test">这是段落中的 <b>粗体</b> ⽂本。</p>
17 <p>名称: <input type="text" id="test" value="val测试值"></p>
18 <button id="btn3">val显⽰值</button>
19 <button id="btn1">显⽰⽂本</button>
20 <button id="btn2">显⽰ HTML</button>
  第⼀个按钮显⽰：val测试值
  第⼆个按钮显⽰：这是段落中的粗体⽂本
  第三个按钮显⽰：这是段落中的 <b>粗体</b> ⽂本
  上⾯的三个 jQuery ⽅法：text()、html() 以及 val()，如果向⾥⾯传递⼀个值，则是表⽰把被选元素的值设置为传进去的参数。
  上⾯的三个 jQuery ⽅法：text()、html() 以及 val()，可以传递⼀个回调函数。回调函数有两个参数：1.被选元素列表中当前元素的下标，2.原始（旧的）值。然后函数返回你经过处理的字符串。
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
//i是被选元素当前元素的下标，origText是原始的⽂本值
return "旧⽂本: " + origText + " 新⽂本: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
});
</script>
</head>
<body>
<p id="test1">旧段落1。</p>
<p id="test2">旧段落2。</p>
<button id="btn1">显⽰新/旧⽂本</button>
<button id="btn2">显⽰新/旧 HTML</button>
</body>
  4.获取属性 - attr()
<script>
$(document).ready(function(){
$("button").click(function(){
htmlbutton属性alert($("#runoob").attr("href"));
});
});
</script>
<p><a href="www.baidu" id="runoob">菜鸟教程</a></p>
<button>显⽰ href 属性的值</button>
  按钮显⽰：www.baidu
同样的，attr()也可以传进去参数设置值。但是与text()它们三个不同的是，attr()需要传递两个参数，第⼀个参数为要设置的属性名，第⼆个参数为要设置的值。
  attr也是可以传递⼀个回调函数的，在attr()的第⼆个参数位传递⼀个回调函数。第⼀个参数为要设置的属性名，第⼆个参数为要设置的值。
$("#runoob").attr({
"href" : "www.baidu",
"title" : "attr使⽤"
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。