jQuery children等筛选用法：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>b index</title>
<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
<style type="text/css">
.s1{
width: 100px;
height: 100px;
background-color: pink;
}
.s2{
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body style="margin:150px;">
<div id="div001">div001
<div id='cdiv001'>cdiv001
<div id='ccdiv001'>ccdiv001</div>
</div>
<span id='cdiv002'>cdiv002</span>
<span id='cspn002'>cspn002</span>
</div>
<div id='div002'>div002</div>
<div id='div003' class='div003'>div003</div>
<div id='div004'>
<ul><li></li><li></li></ul>
</div>
<div id='div005'>
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
</div>
<div>
<button id="btn001">click me to get div001 children </button>
<button id="btn002">click me to get div001 children(exp) </button>
<button id="btn003">click me to get div001 next </button>
<button id="btn004">click me to get div001 next(exp) </button>
<button id="btn005">click me to get div next </button>
<button id="btn006">click me to get div prev </button>
<button id="btn007">click me to get div001 siblings </button>
<button id="btn008">click me to get div001 parent/parents </button>
<button id="btn009">click me to get cdiv001 closest </button>
<button id="btn010">click me to get li closest </button>
<button id="btn011">click me to get div001 find </button>
<button id="btn012">click me to use filter </button>
<button id="btn013">click me to use nextAll/prevAll </button>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="b/js/bootstrap.js"></script>
<script type="text/javascript" src="js/index036.js"></script>
</body>
</html>
$(function() {
$('#btn001').click(btn001Click);
$('#btn002').click(btn002Click);
$('#btn003').click(btn003Click);
$('#btn004').click(btn004Click);
$('#btn005').click(btn005Click);
$('#btn006').click(btn006Click);
$('#btn007').click(btn007Click);
$('#btn008').click(btn008Click);
$('#btn009').click(btn009Click);
$('#btn010').click(btn010Click);
$('#btn011').click(btn011Click);
$('#btn012').click(btn012Click);
$('#btn013').click(btn013Click);
});
function btn001Click() {
// 得到的是jQuery对象；
var cld = $('#div001').children();
console.log(cld);
}
function btn002Click() {
// 这样只获得span；
var cld = $('#div001').children('span');
console.log(cld);
}
function btn003Click() {
var obj01 = $('#div001').next();
console.log(obj01);
}
function btn004Click() {
// 这样会返回一个空，因为next元素没有.div003的class；
var obj01 = $('#div001').next('.div003');
console.log(obj01);
}
function btn005Click() {
// 这样会得到很多div元素的next元素；
var obj01 = $('div').next();
console.log(obj01);
}
function btn006Click() {
// 这样会得到很多div元素的prev元素；
var obj01 = $('div').prev();
console.log(obj01);
}
function btn007Click() {
// 获得所有同级元素；
var obj01 = $('#div001').siblings();
console.log(obj01);
}
function btn008Click() {
// 获得唯一父元素；
var obj01 = $('#div001').parent();
console.log(obj01);
// 获得所有的父级元素；
var obj02 = $('#cdiv001').parents();
console.log(obj02);
}
function btn009Click() {
// 不输入参数就返回空结果；
var obj01 = $('#cdiv001').closest();
console.log(obj01);
// 这样就返回自身了；因为自身就是div；
var obj02 = $('#cdiv001').closest('div');
console.log(obj02);
}
function btn010Click() {
// 传入字符串数组，返回结果竟然为空；与API的说明不一致；
var obj01 = $("li:first").closest([ "ul", "body" ]);
console.log(obj01);
// 使用clostest来完成事件委托。点击之后进行事件委托；不用往li上面绑定事件了；
$(document).bind("click", function(e) {
$(e.target).closest("li").toggleClass("s1");
});
}
function btn011Click() {
// 不输入参数就返回空结果；
var obj01 = $('#div001').find();
console.log(obj01);
// 这样会得到集合；
var obj02 = $('#div001').find('span');
console.log(obj02);
// 可以找到任何后代元素；
var obj03 = $('#div001').find('#ccdiv001');
console.log(obj03);
}
function btn012Click() {
var obj01 = $('div').filter('#div001');
console.log(obj01);
var obj02 = $('div').filter(function() {
return $('span', this).length == 0;
});
console.log(obj02);
var obj03 = $('div').filter(function() {
return $('span', $(this)).length == 0;
});
console.log(obj03);
var obj04 = $('div').filter($('#div002'));
console.log(obj04);
var obj05 = $('div').filter($('#div002').get(0));
console.log(obj05);
}
function btn013Click() {
// 找到的是同辈的元素
var obj01 = $('#div001').nextAll();
console.log(obj01);
var obj02 = $('#cspn002').prevAll();
console.log(obj02);
}