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); }