jQuery基礎學習（3）（獲取標籤屬性,動態新增標籤）

小溪彼岸發表於2016-06-29
jQuery

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>

相關文章