一、前言
在使用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