JQuery dom 操作总结

最新推荐文章于 2024-06-13 16:29:32 发布

a1214651181

最新推荐文章于 2024-06-13 16:29:32 发布

阅读量73

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/RedHat-Linux/p/7828717.html

版权

DOM 操作之获取值

　　获得内容 - text()：设置或返回所选元素的文本内容

1 $("#btn1").click(function(){
2     alert("Text: " + $("#test").text());
3   });

　　html() ：设置或返回所选元素的内容（包括 HTML 标记）

1 $("#btn2").click(function(){
2     alert("HTML: " + $("#test").html());
3   });

　　 val()：设置或返回表单字段的值

1 $("button").click(function(){
2     alert("Value: " + $("#test").val());
3   });

　　获取属性 - attr() ：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8     alert($("#w3s").attr("href"));
 9   });
10 });
11 </script>
12 </head>
13 
14 <body>
15 <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
16 <button>显示 href 值</button>
17 </body>
18 
19 </html>

　　设置内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
  });
});
</script>
</head>

<body>
<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>

　设置属性 - attr()

　　jQuery attr() 方法也用于设置/改变属性值。attr() 方法也允许您同时设置多个属性。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#ws").attr({
      "href" : "http://www.ibbidream.cn/",
      "title" : "jQuery 教程"
    });
  });
});
</script>
</head>

<body>
<p><a href="http://www.baidu.com" id="ws">Baidu</a></p>
<button>改变 href 和 title 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值和已经设置的 title 值。</p>
</body>
</html>

添加新的 HTML 内容

　　我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js">
 5 </script>
 6 <script>
 7 $(document).ready(function(){
 8   $("#btn1").click(function(){
 9     $("p").append(" <b>Appended text</b>.");
10   });
11 
12   $("#btn2").click(function(){
13     $("ol").append("<li>Appended item</li>");
14   });
15 });
16 </script>
17 </head>
18 
19 <body>
20 <p>This is a paragraph.</p>
21 <p>This is another paragraph.</p>
22 <ol>
23 <li>List item 1</li>
24 <li>List item 2</li>
25 <li>List item 3</li>
26 </ol>
27 <button id="btn1">追加文本</button>
28 <button id="btn2">追加列表项</button>
29 </body>
30 </html>

prepend() - 在被选元素的开头插入内容

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(document).ready(function(){
 7   $("#btn1").click(function(){
 8     $("p").prepend("<b>Prepended text</b>. ");
 9   });
10   $("#btn2").click(function(){
11     $("ol").prepend("<li>Prepended item</li>");
12   });
13 });
14 </script>
15 </head>
16 <body>
17 
18 <p>This is a paragraph.</p>
19 <p>This is another paragraph.</p>
20 <ol>
21 <li>List item 1</li>
22 <li>List item 2</li>
23 <li>List item 3</li>
24 </ol>
25 
26 <button id="btn1">添加文本</button>
27 <button id="btn2">添加列表项</button>
28 
29 </body>
30 </html>

after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(document).ready(function(){
 7   $("#btn1").click(function(){
 8     $("img").before("<b>Before</b>");
 9   });
10 
11   $("#btn2").click(function(){
12     $("img").after("<i>After</i>");
13   });
14 });
15 </script>
16 </head>
17 
18 <body>
19 <img src="http://www.ibbidream.cn/img/ico.jpg" alt="test" />
20 <br><br>
21 <button id="btn1">在图片前面添加文本</button>
22 <button id="btn2">在图片后面添加文本</button>
23 </body>
24 </html>

　删除元素/内容

　　如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8     $("#div1").remove();
 9   });
10 });
11 </script>
12 </head>
13 
14 <body>
15 
16 <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
17 This is some text in the div.
18 <p>This is a paragraph in the div.</p>
19 <p>This is another paragraph in the div.</p>
20 </div>
21 
22 <br>
23 <button>删除 div 元素</button>
24 
25 </body>
26 </html>

empty() - 从被选元素中删除子元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8     $("#div1").empty();
 9   });
10 });
11 </script>
12 </head>
13 
14 <body>
15 
16 <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
17 This is some text in the div.
18 <p>This is a paragraph in the div.</p>
19 <p>This is another paragraph in the div.</p>
20 </div>
21 
22 <br>
23 <button>清空 div 元素</button>
24 
25 </body>
26 </html>

转载于:https://www.cnblogs.com/RedHat-Linux/p/7828717.html

a1214651181

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery dom 操作总结

DOM操作之获取值　　　　获得内容 - text()：设置或返回所选元素的文本内容　　　　1 $("#btn1").click(function(){2 alert("Text: " + $("#test").text());3 });　　html() ：设置或返回所选元素的内容（包括 HTML 标记）1 $("#btn2...
复制链接

扫一扫