有关DOM查找、CSS类样式、DOM节点过滤以及Jquery中的串联

一、有关DOM查找
:children() 查找儿子辈分的元素
:find() 查找儿子辈分、孙子辈分的元素
:parent() 紧接着的上一级父级元素
:parents() 上面的多级元素，包括父级祖级元素
:next() + 同级下一个
:nextAll() ~ 同级下面所有
:prev() 同级上一个
:prevAll() 同级上所有
:siblings() 同级所有不包含本身

<div id="divs">
	<span>
		标签1
		<p>标签11</p>
	</span>
	<span>标签2</span>
</div>
<div id="divs1">
	<span>标签3</span>
	<span class="spans">标签4</span>
</div>
<div> 
	标签5
	<p>标签66</p>
</div>

$("#divs").children("span").css();//指的是标签1，标签2
$("#divs").find("span").css();//指的是标签1，标签2，标签11
$("#divs span p").parent().css();//指的是标签1
$("p").parents().css();//指的是标签1
$("#divs1").next().css();//指的是标签5
$("#divs1").nextAll().css()//指的是标签5
$(".spans").prev().css();//标签3
$(".spans").prevAll().css();//标签3，标签2，标签1
$("span .spans").siblings().css();//标签1,标签2，标签3

二、CSS类样式
addClass() 所有有关元素，都要添加类名
removeClass() 所有有关元素，都要删除类名
toggleClass() 有的话就删除，没有的话就添加
hide(ms) 隐藏
show(ms) 显示

<button>更多</button>
<ul>
	<li>1111</li>
	<li>2222</li>
	<li>3333</li>
	<li>4444</li>
</ul>

var btn=$("button");
btn.click(function(){
$("ul li").is(":visible"){
	$(this).hide(2000);
}else{
	$(this).show(2000);
}
})

手风琴案例：

<dl>
	<dt>
		前端案例
		<dd>手风琴</dd>
		<dd>瀑布流</dd>
		<dd>tab切换</dd>
	</dt>
	<dt>
		前端语言
		<dd>vue.js</dd>
		<dd>webpack</dd>
		<dd>JavaScript</dd>
	</dt>
	<dt>
		前端工具
		<dd>浏览器</dd>
		<dd>dreamweaver cs4</dd>
		<dd>控制台</dd>
	</dt>
</dl>

$("dt").click(function(){
	$("dd").hide();
	$(this).nextAll().show(1000);
})

菜单：

<ul id="uls">
	<li>
		新闻
		<ul>
			<li>news1</li>
			<li>news1</li>
			<li>news1</li>
		</ul>
	</li>
	<li>
		活动
		<ul>
			<li>activity1</li>
			<li>activity1</li>
			<li>activity1</li>
		</ul>
	</li>
	<li>
		项目
		<ul>
			<li>item1</li>
			<li>item1</li>
			<li>item1</li>
		</ul>
	</li>
	<li>
		娱乐
		<ul>
			<li>happy1</li>
			<li>happy1</li>
			<li>happy1</li>
		</ul>
	</li>
</ul>

$("#uls li").mouseover(function(){
	$(this).find("ul li").stop(false,true).slideDown(500);
}).mouseout(function(){
	$(this).find("ul li").stop(false,true).slideUp(500);
})

三、DOM节点过滤
eq(): 下标从0开始数，方法
index(): 下标从0开始数，方法
is(): 检测方法
not(): 不包含该元素
has(): 保留包含的，去掉那些不包含的
filter(): 筛选 找孩子辈分还能找同级辈分的
与find()相比较，只能找孩子辈分的
slice(start,end) start从0开始数，数end个数结束。

$("#div1 ul").is(":visible"){//is(":hidden")
	代码块;
}

四、JQuery中的串联
add(): 和的关系
andself(): 加入先前所选元素，并加入当前元素
contents(): 子节点元素 ，必须是含有子节点的元素
end(): 把操作往前走一步的操作，即上一步操作

<div>
	我是div元素
	<p>1111</p>
	<p>2222</p>
	<span>3333</span>
</div>

$("div").contents("p").css("background","yellow");