Jquery-day03

$说明

Jquery-day03

Jquery DOM操作

Jquery的text方法，html方法，val方法。

1.获取操作text. html. val.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JQ-DOM</title>
 6     <script type="text/javascript" src="jquery-3.3.1.js"></script>
 7     <script>
 8 $(document).ready(function () {
 9     $("#bval").click(function () {
10         alert("val:" + $("#text").val());
11     });
12     $("#btext").click(function () {
13         $("#btext").text("text()方法")
14     });
15     $("#bhtml").click(function () {
16         $("#bhtml").html("html()方法")    //改变原属性的值
17     });
18 
19     //text() - 设置或返回所选元素的文本内容
20     //html() - 设置或返回所选元素的内容（包括 HTML 标记）
21     //val() - 设置或返回表单字段的值
22     //attr() 方法用于获取属性值。
23 })
24 
25     </script>
26 </head>
27 <body>
28 输入：<input type="text" value="" name="text" id="text"><br><hr>
29 <button id="bval">显示值</button>
30 <button id="btext">显示文本</button>
31 <button id="bhtml">显示HTML内容</button>
32 </body>
33 </html>

2.Jquery的回调函数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JQ-回调函数</title>
 6     <script type="text/javascript" src="jquery-3.3.1.js"></script>
 7     <script>
 8     $(document).ready(function () {
 9         $("#button").click(function () {
10            $("#p").text(function (i,origText) {
11                  //i是前面元素集合的顺序，origText是元素的内容
12                 return "old text:" + origText + ":new text" + ":" + i;
13                 //每调用一次改变一次origtext的值
14                 //attr() 的回调函数 可以改变href title属性值等
15            })
16         })
17     })
18     </script>
19 </head>
20 <body>
21 <p id="p">回调函数</p>
22 <button id="button">触发回调</button>
23 </body>
24 </html>

红色部分为回调函数的核心方法，每调用一次更新origtext的内容。

$未完待续.........

猜你喜欢