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

时间：2023-12-29 21:34:38

一、前言

在使用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

相关文章