jQuery基础学习（3）（获取标签属性,动态添加标签）

来源：互联网发布：淘宝秋季女装编辑：程序博客网时间：2024/05/17 23:24

jQuery DOM 操作

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

<script>$(document).ready(function(){  $("#btn1").click(function(){    alert("Text: " + $("#test").text());  });  $("#btn2").click(function(){    alert("HTML: " + $("#test").html());  });  $("button").click(function(){    alert("Value: " + $("#test").val());  });});</script>

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

$("button").click(function(){  alert($("#w3s").attr("href"));});

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

$("#btn1").click(function(){  $("#test1").text("Hello world!");});$("#btn2").click(function(){  $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){  $("#test3").val("Dolly Duck");});

text()、html() 以及 val() 的回调函数

$("#btn1").click(function(){  $("#test1").text(function(i,origText){    return "Old text: " + origText + " New text: Hello world!    (index: " + i + ")";  });});$("#btn2").click(function(){  $("#test2").html(function(i,origText){    return "Old html: " + origText + " New html: Hello <b>world!</b>    (index: " + i + ")";  });});

设置属性 - attr()

$("button").click(function(){  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");});//设置多值<script>$(document).ready(function(){  $("button").click(function(){    $("#w3s").attr({      "href" : "http://www.w3school.com.cn/jquery/",      "title" : "W3School jQuery 教程"    });  });});</script>

设置属性 - attr()回调函数

//回调<script>$(document).ready(function(){  $("button").click(function(){    $("#w3s").attr("href", function(i,origValue){      return origValue + "/jquery";     });  }); });</script>

添加新的 HTML 内容

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

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容。

$(document).ready(function(){  $("#btn1").click(function(){    $("p").append(" <b>Appended text</b>.");  });  $("#btn2").click(function(){    $("ol").append("<li>Appended item</li>");  });});</script>

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

<script>$(document).ready(function(){  $("#btn1").click(function(){    $("p").prepend("<b>Prepended text</b>. ");  });  $("#btn2").click(function(){    $("ol").prepend("<li>Prepended item</li>");  });});</script>

通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建若干个标签。

<script>function appendText(){var txt1="<p>Text.</p>";              // 以 HTML 创建新元素var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素var txt3=document.createElement("p");txt3.innerHTML="Text.";               // 通过 DOM 来创建文本$("body").append(txt1,txt2,txt3);        // 追加新元素}</script>

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。

<script>$(document).ready(function(){  $("#btn1").click(function(){    $("img").before("<b>Before</b>");  });  $("#btn2").click(function(){    $("img").after("<i>After</i>");  });});</script>

jQuery删除元素/内容

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

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

jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

<script>$(document).ready(function(){  $("button").click(function(){    $("#div1").remove();  });});</script>

jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素。

<script>$(document).ready(function(){  $("button").click(function(){    $("#div1").empty();  });});</script>

过滤被删除的元素(删除指定id)

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

<script>$(document).ready(function(){  $("button").click(function(){    $("p").remove("#italic");  });});</script>

动态添加标签

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="jquery.min.js"></script>    <style type="text/css">        div{            background-color: #98bf21;            width: 50px;            height: 50px;            margin-top: 20px;            margin-right: 20px;            display: inline-block;            /*float: left;*/        }    </style></head><body>    <script>        for(var i=0;i<10;i++){            $("<div>").appendTo(document.body);        }        $("div").click(function(){            $(this).hide(2000,function(){                $(this).remove();            });        });    </script></body></html>

0 0