<html>
<head runat="server">
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
$(function () {
$("<div>這是我自建的 HTML </div>").appendTo($("#sp"));
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="sp"></span>
</div>
</form>
</body>
</html>
以上面的程式為例：使用 $("<div>這是我自建的 HTML </div>")，建立了一個 <div> 物件，並將這物件指定擺放到 <span id="sp"></span>。
甚至更進一步，可以在我們自建的 HTML 裡，事先設定 jQuery 的變化。舉裡來說：
<html>
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
$(function () {
$("<div>這是我自建的 HTML </div><div class='cs1'>指定顏色一</div><div class='cs2'>指定顏色二</div>").filter(".cs1").css("color","red").end().filter(".cs2").css("color","green").end().appendTo($("#sp"));
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="sp"></span>
</div>
</form>
</body>
</html>
在自建的 HTML 中，針對
<div>這是我自建的 HTML </div>
<div class='cs1'>指定顏色一</div>
<div class='cs2'>指定顏色二</div>
分別針對 class=cs1 與 class=cs2 設定了 red 與 green 顏色，最後再塞到 <span> 裡。
.filter(".cs1").css("color","red").end().filter(".cs2").css("color","green").end().appendTo($("#sp"))
在實作的過程中，自己不小心將自建的 HTML 寫成：
原來，我把它寫成巢狀式(nested)的 <div> 了。它結果變成：
納悶的是，即便我寫成了巢狀式的語法，那又有什麼關係？可它就偏偏不如我願。後來發現了自己疏忽的地方，在於沒搞清出 jQuery 的 .filter() 與 .find() 的區別。這裡我很讚賞【钱途无梁】的文章「jQuery基础---filter()和find()」，裡面提的範例簡單明瞭。而我簡單的分別心得則是：
filter() ：是找自己的兒子輩（就只到兒子輩而已）。
find() ：是找自己的孫子輩（不含兒子輩，但含曾孫、玄孫...）
所以，即便是面臨巢狀的情形，也不怕
<html>
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
$(function () {
$("<div>這是我自建的 HTML </div><div class='cs1'>指定顏色一<div class='cs2'>指定顏色二</div></div>").filter(".cs1").css("color", "red").end().filter(".cs2").css("color", "green").end().find(".cs1").css("color","red").end().find(".cs2").css("color","green").end().appendTo($("#sp"));
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="sp"></span>
</div>
</form>
</body>
</html>
節錄【钱途无梁】的範例：
<div class="css">
<p class="rain">測試1</p>
</div>
<div class="rain">
<p>測試2</p>
</div>
如果執行：
var $find = $("div").find(".rain");
alert($find.html());
則結果是：
如果執行：
var $filter = $("div").filter(".rain");
alert($filter.html());
結果則是：
參考 01. jQuery基础---filter()和find()
沒有留言:
張貼留言