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 4421 ZOJ 3656 Bit Magic

    2-SAT,不要所有位置全部建好边再判断,那样会MLE的. 正解是,每一位建好边,就进行一次2-SAT. #include<cstdio> #include<cstring> ...

  2. Eclipse使用的小细节归档

    1. 控制台打印出来的语句不限制条数:Preference-> Run/Debug -> Control -> Limit Console Output 2.

  3. Allegro PCB -如何做自定义焊盘

    1.如何创建自定义焊盘,比如这种形状的焊盘. (1).打开PCB Editor –>Allegro PCB Design ->New,在类型中选择Shape symbol,并输入名字,比如 ...

  4. PAT (Advanced Level) 1001. A+B Format (20)

    简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...

  5. bzoj 3879 虚树

    题目大意: 给一个字符串,多次询问k个后缀,求它们两两间LCP长度总和 分析: 转化为后缀树,用虚树求 注意: 后缀树中代表后缀的点都是叶子节点 题目中取模并没有卵用 #include <cst ...

  6. mahout第一篇-----Mahout学习路线图

    Mahout学习路线图 前言 Mahout是Hadoop家族中与众不同的一个成员,是基于一个Hadoop的机器学习和数据挖掘的分布式计算框架.Mahout是一个跨学科产品,同时也是我认为Hadoop家 ...

  7. linux devel包 和 非devel包的区别

    devel 包主要是供开发用,至少包括以下2个东西: 1. 头文件 2. 链接库 有的还含有开发文档或演示代码. 以 glib 和 glib-devel 为例: 如果你安装基于 glib 开发的程序, ...

  8. hellocharts-android开源图表库（效果非常好）

    泡在网上的日子 发表于 2014-11-07 12:28 第 33156 次阅读 chart 2 编辑推荐:稀土掘金,这是一个高质量的技术干货分享社区,web前端.Android.iOS.设计资源和产 ...

  9. DateTime.CompareTo方法

    DateTime.CompareTo(value)方法,与一个时间比较,返回整数,含义如下: 值 说明 小于零 此实例早于 value. 零 此实例与 value 相同. 大于零 此实例晚于 valu ...

  10. windows server 2012 AD 活动目录部署系列（五）备份和还原域控制器

    在前篇博文中,我们介绍了用户资源的权限分配,用户只要在登录时输入一次口令,就能访问基于该域所分配给他的所有资源. 但是我们需要考虑一个问题:万一域控制器坏了怎么办?!如果这个域控制器损坏了,那用户登录 ...