jQuery学习笔记(3)-操作jQuery包装集的函数

一、前言

在使用jQuery选择器获取到jQuery包装集后，我们就要对这些包装集进行各种操作

二、创建新的元素

1.使用HTMLDOM创建元素

(1)什么是DOM

当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)

(2)使用HTML DOM创建元素

  1 <div id="testDiv"></div>
  2 <script>
  3     var select = document.createElement("select");
  4     select.options[0] = new Option("加载项1", "value1");
  5     select.options[1] = new Option("加载项2", "value2");
  6     select.size = "2";
  7     var testDiv = document.getElementById("testDiv");
  8     var object = testDiv.appendChild(select);
  9 </script> 

2.使用jQuery函数创建元素

  1 <div id="testDiv"></div>
  2 <script>
  3     $("<select><option value ='value1'>加载项1</option><option  value='value2'>加载项2</option></select>").appendTo($("#testDiv"))
  4 </script>
  5 

(1)创建时注意

一定不要在页面加载时就改变页面的DOM结构，正确的做法是在页面加载完毕后添加或删除元素

方式一：所有资源完整加载后，再添加新的元素

缺点：如果某个图片或资源加载很长时间，就会显示一个不完整的页面

<script>
    window.onload = function () {
        $("<select><option value ='value1'>加载项1</option><option  value='value2'>加载项2</option></select>").appendTo($("#testDiv"));
    }
</script>

方式二：DOM完整加载后，再添加新的元素

<script>
    $(document).ready(function () {
        $("<select><option value ='value1'>加载项1</option><option  value='value2'>加载项2</option></select>").appendTo($("#testDiv"));
    });
</script>

或者使用简洁语法

<script>
    $(function () {
        $("<select><option value ='value1'>加载项1</option><option  value='value2'>加载项2</option></select>").appendTo($("#testDiv"));
    });
</script>

三、管理jQuery包装集的一些函数

1.过滤 Filtering

$("p").eq(1)	获取匹配的第二个元素
$("p").filter(".selected")	保留class为selected的元素
$("div").filter(function (index) {return $("ol", this).size() == 0;});	保留子元素中不含有ol的元素
$("input[type='checkbox']").parent().is("form")	由于input元素的父元素是一个表单元素，所以返回true
$("p").append($("input").map(function () { return $(this).val(); }).get().join(", "));	把form中的每个input元素的值建立一个列表
$("p").not( $("#selected")[0] )	从p元素中删除带有 select 的ID的元素
$("p").slice(0, 1)	选择第一个p元素

2.查找Finding

$("p").add("<span>Again</span>")	动态生成一个元素并添加至匹配的元素中
$("div").children()	查找DIV中的每个子元素
$(document).bind("click", function (e) { $(e.target).closest("li").toggleClass("hilight"); })	为事件源最近的父类li对象更换样式
$("p").contents().not("[nodeType=1]").wrap("<b/>")	查找所有文本节点并加粗
$("p").find("span")	与$("p span")相同
$("p").next()	找到每个段落的后面紧邻的同辈元素
$("div:first").nextAll().addClass("after")	给第一个div之后的所有元素加个class
offsetParent( )
$("p").parent()	查找每个段落的父元素
$("span").parents()	找到每个span元素的所有祖先元素
$("p").prev()	找到每个段落紧邻的前一个同辈元素
$("div:last").prevAll().addClass("before")	给最后一个之前的所有div加上一个class
$("div").siblings()	找到每个div的所有同辈元素

3.串联 Chaining

$("div").find("p").andSelf().addClass("border")	选取所有div以及内部的p，并加上class
$("p").find("span").end()	选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素

四、参考文章

http://www.cnblogs.com/zhangziqiu/archive/2009/05/04/jQuery-Learn-3.html