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. PAT (Advanced Level) 1072. Gas Station (30)

    枚举一下选的位置,每次算一下就可以了. #include<cstdio> #include<cstring> #include<cmath> #include< ...

  2. 用Date.ToString()输出中英文月份

    DateTime.Now.ToString("dddd,dd MMMM,yyyy")//输出   星期三,30 一月,2008DateTime.Now.ToString(" ...

  3. C#调用SCL2008 动态库SCL_API_cdecl.dll or SCL_API_Stdcall.dll，提示找不到指定模块

    在公司用的联想 ThinkPad T430i,原装配置及系统,开机巨慢.按下开机键到登陆界面超过1分钟,再到桌面这个时间就难说了,多时有超过3分钟,进入桌面还要等待几分钟才能正常操作.新年过来向公司领 ...

  4. 微信小程序实例教程（二）

    第五章:微信小程序名片夹详情页开发 今天加了新干货!除了开发日志本身,还回答了一些朋友的问题. 闲话不多说,先看下「名片盒」详情页的效果图: 备注下大致需求:顶部背后是轮播图,二维码按钮弹出模态框信息 ...

  5. CodeForces 631B Print Check

    对于每一个格子,看是行最后画还是列最后画.预处理一下就可以了. #include<stdio.h> #include<string.h> int n,m,k; +]; +]; ...

  6. layer 的一些知识

    layer类似于ps的图层,如果把一个uiview看做图片的画,layer就像是图层.一个图片是由很多个大小不同的有层次的图层构成的,uiview也是. 1. 一个view有一个underlying ...

  7. 单应性(homography)变换的推导

    矩阵的一个重要作用是将空间中的点变换到另一个空间中.这个作用在国内的<线性代数>教学中基本没有介绍.要能形像地理解这一作用,比较直观的方法就是图像变换,图像变换的方法很多,单应性变换是其中 ...

  8. Linux SSL 双向认证 浅解

    请求方的操作:此步骤是为了验证CA的发证过程. 1．生成私钥:     Openssl genrsa 1024 > private.key  生成私钥并保存到private.key文件中    ...

  9. laravel5 数据库连接问题

    [PDOException] SQLSTATE[28000] [1045] Access denied for user ‘homestead’@’localhost’ (using password ...

  10. iOS制作毛玻璃效果

    //添加一个图片 UIImageView *imageview = [[UIImageView alloc]init]; imageview.frame = CGRectMake(10, 100, 3 ...