Loading

jQuery children等筛选用法

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);
}
复制代码

 

posted @   stono  阅读(849)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示