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. POJ 3905 Perfect Election

    2-SAT 裸题,搞之 #include<cstdio> #include<cstring> #include<cmath> #include<stack&g ...

  2. Spring创建对象的方式3种方式

    此文为基础回顾,估计是最后一次总结. 项目利用maven进行架构,其基本项目结构为: 其中pom.xml中的内容为: <project xmlns="http://maven.apac ...

  3. svn代码管理的使用工作流程

    1. 新建代码库repository. 2. checkout 到workspace. 3. checkin 回 repository. 4. release 一个版本出来(相当于拉出一个branch ...

  4. [ERROR] Fatal error: Can't open and lock privilege tables: Table 'mysql.user' doesn't exist 160913 02:11:21 mysqld_safe mysqld from pid file /tmp/mysql.pid ended

    -- :: [Note] InnoDB: Renaming log file ./ib_logfile101 to ./ib_logfile0 -- :: [Warning] InnoDB: New ...

  5. [Shell]随机数

    0-1之间的随机数# awk 'BEGIN{srand();printf "%.16f\n",rand()}' 0-20之间随机数# awk 'BEGIN{srand();sum= ...

  6. (简单) POJ 1511 Invitation Cards，SPFA。

    Description In the age of television, not many people attend theater performances. Antique Comedians ...

  7. H3C inode for OSX 10.10 校园网客户端亲测可用

    1.打开终端 2.输入以下命令 sudo /library/StartupItems/iNodeAuthService/iNodeAuthService start 3.输入管理密码 4.打开客户端联 ...

  8. python函数的参数传递问题---传值还是传引用？

    摘要:在python中,strings, tuples, 和numbers是不可更改的对象,而list,dict等则是可以修改的对象.不可更改对象的传递属于传值,可更改对象属于传引用.想要在函数中传递 ...

  9. HUST 1353 Dartboard

    构造.应该有多种构造方法.做的时候WA了好几发,怀疑做法是错的,事实上是代码写搓了.. 我是这样构造的:先从上往下左右放奇数,再从下往上左右填偶数 (一)如果n/2是偶数(以12为例) 左边列是内环, ...

  10. 修改maven本地仓库的位置