jQuery基本筛选器-表单筛选器-关系筛选器

一、基本筛选器

:first // 第一个

:last // 最后一个

:eq(index)// 索引等于index的那个元素

:even // 匹配所有索引值为偶数的元素，从 0 开始计数

:odd // 匹配所有索引值为奇数的元素，从 0 开始计数

:gt(index)// 匹配所有大于给定索引值的元素

:lt(index)// 匹配所有小于给定索引值的元素

:not(元素选择器)// 移除所有满足not条件的标签

:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

<!DOCTYPE html>

<html>

<head>

    <title>基本筛选器</title>

</head>

<body>

    <ul id="ul1">

        <li>1</li>

        <li>2</li>

        <li id="li3">3</li>

        <li>4</li>

        <li>5</li>

    </ul>

<script src="jquery-3.3.1.js"></script>

<script type="text/javascript">

    var ulfirst = $("#ul1>li:first");

    // 第一个标签

    console.log(ulfirst);

    //最后一个li标签

    var ullast = $("#ul1>li:last");

    console.log(ullast);

    //eq(index) 索引等于index的那个元素

    var uleq = $("#ul1>li:eq(2)");  // 索引是从0开始的

    console.log(uleq);

    //匹配索引是偶数的元素

    var uleven = $("#ul1>li:even");

    console.log(uleven);

    //匹配索引是奇数的元素

    var ulodd = $("#ul1>li:odd");

    console.log(ulodd);

    //匹配所有大于给定值的元素

    var ulgt = $("#ul1>li:gt(3)");//不包括3

    console.log(ulgt);

    //匹配所有小于给定值的元素

    var ullt = $("#ul1>li:lt(3)");//不包括3

    console.log(ullt);

    // 移除所有满足not条件的标签

    var ulnot = $("#ul1>li:not(#li3)");

    console.log(ulnot);

    // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

    var ulhas = $("#ul1:has(li)");  //返回包含li标签的ul，本页面就是一个ul

    console.log(ulhas);

</script>

</body>

</html>

基本筛选器demo

二、表单常用筛选器

:text

:password

:file

:radio

:checkbox

:submit

:reset

:button

<!DOCTYPE html>

<html>

<head>

    <title>表单基本筛选器</title>

</head>

<body>

    <form>

        <input type="radio" name="sex" value="男" checked="checked">男

        <input type="radio" name="sex" value="女">女

        <select>

            <option>1</option>

            <option>2</option>

            <option selected="selected">3</option>

            <option>4</option>

        </select>

        <input type="checkbox" name="" value="" checked="checked" />足球

        <input type="checkbox" name="" value="" />篮球

        <input type="checkbox" name="" value="" />乒乓球

    </form>

<script src="jquery-3.3.1.js"></script>

<script type="text/javascript">

    // 获取所有checked

    var checkinpu = $("input:checked");

    var selectedinpu = $(":selected");

    console.log(checkinpu);

    console.log(selectedinpu);

    var checkinpu = $(":checked"); //将会把select也命中

    console.log(checkinpu);

</script>

</body>

</html>

表单常用筛选器demo

三、关系筛选器

下一个元素

$("#id").next()

$("#id").nextAll()

$("#id").nextUntil("#i2")

上一个元素

$("#id").prev()

$("#id").prevAll()

$("#id").prevUntil("#i2")

父亲元素

$("#id").parent()

$("#id").parents()  // 查找当前元素的所有的父辈元素

$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素

$("#id").children();// 儿子们

$("#id").siblings();// 兄弟们

查找元素

$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

补充：

.first()// 获取匹配的第一个元素

.last()// 获取匹配的最后一个元素

.not()// 从匹配元素的集合中删除与指定表达式匹配的元素

.has()// 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

<!DOCTYPE html>

<html>

<head>

    <title>关系筛选器</title>

</head>

<body>

    <ul id="ul1">

        <li id="li1">1</li>

        <li>2</li>

        <li id="li3">3</li>

        <li>4</li>

        <li id="li5">5</li>

    </ul>

    <script src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        // 下一个元素

        var li3 = $("#li3");

        console.log(li3.next()); // 下一个元素

        console.log(li3.nextAll());//下面所有的元素

        console.log(li3.nextUntil("#li5"))//下面所有的元素直到xx停止,只有一个<li>4</li>

        //上一个元素

        console.log(li3.prev());

        console.log(li3.prevAll());

        console.log(li3.prevUntil("#li1"));

        console.log("============父亲=======================");

        //父亲元素

        console.log(li3.parent()); // ul

        console.log(li3.parents());// 一直往上 ul  body  html

        console.log(li3.parentsUntil("body")); //就只会得到ul。因为到body就终止了

        console.log("============儿子和兄弟======================");

        //儿子和兄弟元素

        console.log(li3.parent().children()); // 获取所有父亲的子元素

        console.log(li3.siblings()); // 除他本身外，上面下面全部获取

        console.log("============补充======================");

        console.log(li3.parent().children().first()); // 获取第一个

        console.log(li3.parent().children().last()); // 获取最后一个

        console.log(li3.parent().children().not("#li3")); // 从匹配元素的集合中（结果）删除与指定表达式匹配的元素  把#li3过滤掉

        console.log(li3.parent().children().has("#li3"));//保留包含特定后代的元素，去掉那些不含有指定后代的元素.

    </script>

</body>

</html>

关系筛选器demo

<!DOCTYPE html>

<html>

<head>

    <title>find以jQuery对象为基准，查找子节点</title>

</head>

<body>

<ul class="lang">

    <li class="js dy">JavaScript</li>

    <li class="dy">Python</li>

    <li id="swift">Swift</li>

    <li class="dy">Scheme</li>

    <li name="haskell">Haskell</li>

</ul>

<script src="jquery-3.3.1.js"></script>

<script type="text/javascript">

    //使用find()查找

    var ul1 = $(".lang");

    console.log(ul1);

    console.log(ul1.find(".dy"));  // 以ul1为基准，查找子节点中包含类dy的节点

    console.log(ul1.find("#swift"));

    console.log(ul1.find("[name='haskell']")); 

    // 如果要想从当前节点向上查找，使用parent()方法；

    var swf = $("#swift");

    console.log(swf.parent()); // 得到父标签ul

    console.log(swf.parent(".red")); // 同时可以传入条件，如果不符合条件的话，返回空

    //同级的话使用next()和prev()

    var swf = $("#swift");

    console.log(swf.prev());  //  <li class="dy">Python</li>

    console.log(swf.next());// <li class="dy">Scheme</li>

</script>

</body>

</html>

使用find()查找demo

完

jQuery基本筛选器-表单筛选器-关系筛选器的更多相关文章

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
jquery通过class验证表单不能为空
在开发系统时,往往都有某些表单数据为必填项,若用jQuery通过ID去验证,不仅会影响效率,还会有所遗漏,不易于后期维护. 本章将介绍如何利用jQuery,通过为表单配置class进行统一验证.(ID ...
运用jQuery写的验证表单
//运用jQuery写的验证表单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
jquery.form.js 让表单提交更优雅
jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...
基于jQuery商品分类选择提交表单代码
分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览源码下载实现的代码: <div class="yList ...
第二百二十一节，jQuery EasyUI，Form(表单)组件
jQuery EasyUI,Form(表单)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...
Jquery来对form表单提交（mvc方案）
来自:http://www.cnblogs.com/lmfeng/archive/2011/06/18/2084325.html 我先说明一下,这是asp.net mvc 里面的用法, Jquery来 ...
jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因
jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...
jquery扩展方法（表单数据格式化为json对象）
1.jquery扩展方法(表单数据格式化为json对象) <script type="text/javascript"> // 将表单数据序列化为一个json对象,例如 ...

随机推荐

unable to create new native thread
一.认识问题: 首先我们通过下面这个测试程序来认识这个问题:运行的环境 (有必要说明一下,不同环境会有不同的结果):32位 Windows XP,Sun JDK 1.6.0_18, eclipse ...
聊聊flink的NetworkEnvironmentConfiguration
本文主要研究一下flink的NetworkEnvironmentConfiguration NetworkEnvironmentConfiguration flink-1.7.2/flink-runt ...
【BZOJ2463】谁能赢呢？（博弈论）
[BZOJ2463]谁能赢呢?(博弈论) 题面 BZOJ 洛谷题解洛谷上对于难度的评级我总觉有些问题. 很多人按照代码难度而并非思维难度在评级,导致很多评级很不合理啊... 不说废话了.. 对于一 ...
洛谷 P4301 [CQOI2013]新Nim游戏解题报告
P4301 [CQOI2013]新Nim游戏题目描述传统的Nim游戏是这样的:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量可以不同).两个游戏者轮流操作,每次可以选一个火柴堆拿走若干根火柴. ...
P4051 [JSOI2007]字符加密解题报告
P4051 [JSOI2007]字符加密题目描述喜欢钻研问题的JS 同学,最近又迷上了对加密方法的思考.一天,他突然想出了一种他认为是终极的加密办法:把需要加密的信息排成一圈,显然,它们有很多种不 ...
面向对象高级编程（1）-使用__slots__
使用__slots__ 正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性.先定义class: >>> ...
fzyzojP3580 -- [校内训练-互测20180315]小基的高智商测试
题目还有一个条件是,x>y的y只会出现一次(每个数直接大于它的只有一个) n<=5000 是[HNOI2015]实验比较的加强版 g(i,j,k)其实可以递推:g(i,j,k)=g(i- ...
CentOS 6.5下Squid代理服务器的安装与配置
1.1 缓存代理概述作为应用层的代理服务器软件,squid主要提供缓存加速,应用层过滤控制的功能. 1. 代理的工作机制当客户机通过代理来请求web页面时,指定的代理服务器会先检查自己的缓存 ...
docker中实现服务日志轮转
问题背景通常我们一个完整的应用镜像有两部分组成,一个是运行时环境,一个是应用程序.我们以php应用为例,一个完整的php应用需要包含openresty + php两个服务来配置运行时环境,然后再加上 ...
什么是ground truth(GT)
转自ground truth的含义 ground truth在不同的地方有不同的含义,下面是参考维基百科的解释,ground truth in wikipedia. 1.在统计学和机器学习中在机器学 ...

jQuery基本筛选器-表单筛选器-关系筛选器

一、基本筛选器

二、表单常用筛选器

三、 关系筛选器

jQuery基本筛选器-表单筛选器-关系筛选器的更多相关文章

随机推荐

热门专题

三、关系筛选器