append()向每个匹配元素的内部追加元素，$("p").append("<b>你好</b>"); <p>我想说<b>你好</b></p>
prepend() 向每个匹配元素的内家前置内容 $("p").prepend("<b>你好</b>") <p><b>你好</b>我想说</p>
after()在元素外的后面插入内容 $("p").after("<b>你好</b>") <p>我想说</p><b>你好</b>
before()与上面的相反$("p").before("<b>你好</b>") <b>你好</b><p>我想说</p>
children()方法 该方法用于取得匹配元素的子元素集合
var $body=$("body").children();
alert($body.length)
next()方法 该方法用于取得后面紧邻的同辈元素
prev()方法 用于取得前面紧邻的同辈元素
siblings()方法 用于取得匹配元素前后所有的同辈元素 var $pp=$("p").siblings() 获得与p元素的相邻元素
在jquery中还有很多的遍历节点的方法例如find() nextAll() parent()等等的一些遍历的方法
例如给点击元素li最近的元素添加代码,这些dom元素都有一个共同的特点，就是都可以使用jquery表达式作为参数来筛选元素
$(docment).bind("click" function(){
$(e.target).closest.css("coler","read")
})
下面给一个简单的jquery侧边伸缩导航
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
$(".has-ch").click(function(){
$(this).children("a").show().end().siblings().children("a").hide();
})
})
</script>
<style>
*{ padding:0; margin:0;}
#menu{ width:300px;}
.has-ch{ background:#555; color:#FFF; cursor:pointer;}
.has-show{ background:#06C; color:#FFF;}
.has-ch a{ background:#888; display:none; width:300px; color:#FFF; float:left;}
</style>
</head>
<body>
<div id="menu">
<div class="has-ch">
<span>第一章节</span>
<a>study javascript</a>
<a>study javascript</a>
<a>study javascript</a>
<a>study javascript</a>
<a>study javascript</a>
</div>
<div class="has-ch">
<span>第一章节</span>
<a>study javascript</a>
<a>study javascript</a>
<a>study javascript</a>
<a>study javascript</a>
<a>study javascript</a>
</div>
<div class="has-ch">
<span>第一章节</span>
<a>study javascript</a>
<a>study javascript</a>
<a>study javascript</a>
<a>study javascript</a>
<a>study javascript</a>
</div>
</div>
</body>
</html>
329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
