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

}

jQuery children等筛选用法的更多相关文章

  1. jQuery 中 children() 与 find() 用法的区别

    1.children() 与 find() 用法的区别 通过children获取的是该元素的下级元素,而通过find获取的是该元素的下级所有元素.

  2. jQuery中on()方法用法实例

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...

  3. jQuery中Animate进阶用法（一）

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  4. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

  5. jQuery中$.fn的用法示例介绍

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 如扩展$.fn.abc(),即$.fn.abc()是对jquery ...

  6. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  7. jQuery中attr()方法用法实例

    本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...

  8. jQuery中each的用法之退出循环和结束本次循环

    jQuery中each的用法之退出循环和结束本次循环 jQuery中each类似于javascript的for循环 但不同于for循环的是在each里面不能使用break结束循环,也不能使用conti ...

  9. jQuery.extend函数详细用法！

    最近在研究jQuery.把jQuery.extend扩展函数的用法记录下来. 1.扩展jQuery静态方法. }) 用法: $.test() 2.合并多个对象.为jQuery.extend(css1, ...

随机推荐

  1. HDU 5521 Meeting

    2015 ACM / ICPC 沈阳站现场赛 M题 最短路 设置N+M个节点,前N个节点是Block,后M个节点是Set,每一组Set中的点向该Set连边,从1和n开始分别求最短路.注意爆int. # ...

  2. opencart 图片管理器 500错误

    网站点击文件夹打不开返回500错误,通过ftp删除大于1M的图片文件即可

  3. [iOS]Objective-C 第一节课

    Objective-C 第一节课 本节课的主要内容 创建Objective-C的第一个工程 HelloWorld Objective-C中的字符串 创建Objective-C的第一个工程 打开Xcod ...

  4. higncharts 编辑Highcharts.com链接

    credits: {             text: 'Example.com',             href: 'http://www.example.com'          }, 只 ...

  5. 用free -m查看的结果：

    用free -m查看的结果: # free -m          total    used    free     shared buffers     cached Mem:           ...

  6. hibernate--多对多单向关联 (重点!!!)

    老师和学生的关系, 一个老师对多个学生, 一个学生也对应多个老师. 数据库会需要3个表, 一个老师表, 一个学生表, 一个老师对应学生表. 单向: 老师知道自己有多少学生, 但是学生不知道自己有多少个 ...

  7. Application_Start和Application_End事件执行时间

    Application_start: 第一个访问网站的用户会触发该方法. 通常会在该方法里定义一些系统变量,如聊天室的在线总人数统计,历史访问人数统计的初始化等等均可在这里定义. Applicatio ...

  8. Ext分页之php中，真分页显示

    这是我经过很多天调试的真分页显示Ext组件 显示页面ext.php <html> <head> <meta http-equiv="Content-Type&q ...

  9. USB自定义HID设备实现-LPC1768

    首先在之前鼠标的基础上修改设备描述符 #include "usbdesc.h" //usb标准设备描述符 const U8 USB_DeviceDescriptor[] = { U ...

  10. 流水线技术原理和Verilog HDL实现（转）

    源:流水线技术原理和Verilog HDL实现 所谓流水线处理,如同生产装配线一样,将操作执行工作量分成若干个时间上均衡的操作段,从流水线的起点连续地输入,流水线的各操作段以重叠方式执行.这使得操作执 ...