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. 转：Validation of viewstate MAC failed异常的原因及解决方法

    ViewState是一种机制,ASP.NET 使用这种机制来跟踪服务器控件状态值,否则这些值将不作为 HTTP 窗体的一部分而回传.也就是说在页面刷新或者回传的时候控件的值将被清空,我们在aspx.c ...

  2. UITextField和UIViewConteoller

    UITextField控件 UITextFiled常用属性和方法   UITextField是常用的文本输入控件,比如我们用的QQ的登录界面,词典输入要查询的单词都使用了文本框控件,如下图所示.之前介 ...

  3. mtp

    http://www.android.gs/mount-google-nexus-4-mtp-sd-card-on-ubuntu-and-other-linux-computers/ https:// ...

  4. RunLoop基础

    序言 RunLoop一直是比较高级而又比较神秘的技术,一直以来都没有深入去阅读过苹果给出的官方文档.本篇文章就讲讲苹果官方文档中所介绍的RunLoop,再加上其开源性,让我们一起深入去研究其特性及与线 ...

  5. OPENCV形态学操作1

    形态学操作是指基于形状的一系列图像处理操作,包括膨胀,腐蚀,二值化,开运算,闭运算,顶帽算法,黑帽算法,形态学梯度等,最基本的形态学操作就是膨胀和腐蚀. 一.膨胀 首先需要明确一个概念,膨胀和腐蚀都是 ...

  6. objective-c学习笔记2

    Objective-c学习笔记 1.cocoa的对象初始化一般使用alloc和init两个方法,不适用new,其中alloc用于分配内存,init用于初始化,因为初始化方法返回的对象可能和分配的对象不 ...

  7. NULL、nil、Nil、NSNull的区别

    标志 值 含义 NULL (void *)0 C指针的字面零值 nil (id)0 Objecve-C对象的字面零值 Nil (Class)0 Objecve-C类的字面零值 NSNull [NSNu ...

  8. ios开发获取SIM卡信息

    .加入一个Framework(CoreTelephony.framework). .引入头文件 #import<CoreTelephony/CoreTelephonyDefines.h> ...

  9. 在阿里云ECS（CentOS6.5）上安装jdk

    JDK安装 在安装前先确定服务器上没有安装过JDK 命令: java -version 结果: 查看所有java安装包 命令: yum -y list java* 结果: 选择安装所需要的JDK 命令 ...

  10. 《玩转Bootstrap（基础）》笔记

    基本的HTML模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...