jQuery基本筛选器

2023-11-01

3:jQuery基本筛选器

3.1:first:获取第一个元素
用法:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery代码:
$('li:first');

结果:
[ <li>list item 1</li> ]
3.2:not(selector):去除所有与给定选择器匹配的元素在jQuery 1.3中,
已经支持复杂选择器了(例如:not(div a) 和 :not(div,a))
用法:
<input name="apple" />
<input name="flower" checked="checked" />
jQuery代码:
$("input:not(:checked)")

结果:
[ <input name="apple" /> ]

3.3:even:
匹配所有索引值为偶数的元素,从 0 开始计数
用法:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery代码:
$("tr:even")

结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

3.4:odd:
匹配所有索引值为奇数的元素,从 0 开始计数
用法:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

JQuery代码:
$("tr:odd")

结果:
[ <tr><td>Value 1</td></tr> ]

3.5:eq(index)
匹配一个给定索引值的元素(从0开始计数)
用法:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery代码:
$("tr:eq(1)")

结果:
[ <tr><td>Value 1</td></tr> ]

3.6:gt(index)
匹配所有大于给定索引值的元素(从0开始计数)

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery代码:
$("tr:gt(0)")

结果:
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

3.7:lang(language)
选择指定语言的所有元素。:lang选择器,匹配有一个语言值等于所提供的语言代码,或以提供的语言代码开始,后面马上跟一个“ - ”的元素。
用法:

$("p:lang(it)")

3.8:last()
获取最后个元素
用法:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery代码:
$('li:last')

结果:
[ <li>list item 5</li> ]

3.9:lt(index)
匹配所有小于给定索引值的元素(从0 开始计数)

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery代码:
$("tr:lt(2)")

结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

3.10:header
匹配如 h1, h2, h3之类的标题元素
给页面内所有标题加上背景色
用法:

<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>

jQuery代码:
$(":header").css("background", "#EEE");

3.11:animated
匹配所有正在执行动画效果的元素
只有对不在执行动画效果的元素执行一个动画特效
用法:

<button id="run">Run</button><div></div>

jQuery:
$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
});	

3.12:focus
匹配当前获取焦点的元素。如同其他伪类选择器(那些以":“开始),建议:focus前面用标记名称或其他选择;否则,通用选择(”")是不言而喻的。换句话说, ( ′ : f o c u s ′ ) 等 同 为 (':focus')等同为 (:focus)(’:focus’)。如果你正在寻找当前的焦点元素,$( document.activeElement )将检索,而不必搜索整个DOM树。

css代码:
.focused {
    background: #abcdef;
}

html 代码:
<div id="content">
    <input tabIndex="1">
    <input tabIndex="2">
    <select tabIndex="3">
        <option>select menu</option>
    </select>
    <div tabIndex="4">
        a div
    </div>
</div>

jQuery 代码:
$( "#content" ).delegate( "*", "focus blur", function( event ) {
    var elem = $( this );
    setTimeout(function() {
       elem.toggleClass( "focused", elem.is( ":focus" ) );
    }, 0);
});

3.13:root
选择该文档的根元素。在HTML中,文档的根元素,和$(":root")选择的元素一样, 永远是元素。
设置背景颜色为黄色

$(":root").css("background-color","yellow");

3.14:target
选择由文档URI的格式化识别码表示的目标元素。如果文档的URI包含一个格式化的标识符,或hash(哈希), 然后:target选择器将匹配ID和标识符相匹配的元素。  例如,给定的URI http://example.com/#foo, $( “p:target” ),将选择

元素。这个不寻常的用法,可进一步讨论中找到 W3C CSS specification.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery基本筛选器 的相关文章

  • 详解Java中的byte类型(补充内容)

    写在前面 大家有时候可能会对Java中出现的byte类型有些疑惑 今天就来内化这些知识点 这个算是对其他博客的一个补充 内容很少 byte 在Java中 byte占据一个字节 也就是8的bite位 public static void ma
  • Kaiwii

    http blog csdn net kaiwii article details 7478038
  • qt 16进制字符串 转换为 二进制 字节流

    代码 include
  • 找出10个被打乱的数中被拿出的一个数

    include
  • RuoYi-弹出新窗口选择数据回显到父页面

    这里只贴出关键代码 其他代码需要自行编写 返回值处理根据实际需求来 目前是只取第一条 因为选择页面是单选行 表单页面新加方法 选择社区 function selectCommunity var url ctx community selec
  • 深度

    解码区块链 专题文章三 区块链的安全基础架构及构想 近期 国家发改委明确 区块链 被纳入新基建定义和范围 作为一项能够打通各个技术及领域的基础技术 区块链被认为将在各行业深度融合 新领域拓展 新场景新应用开发等方面潜力无限 解码区块链 内容
  • js 小技巧 ( 根据不同的状态生成不同的颜色和状态 )

    HTML 解决办法 动态绑定 color 然后 根据 三元表达式 进行处理 js 解决办法 动态绑定 color 然后 根据在每个数据的后面添加color属性 可能有的人会问vueb不能用不然不会双向绑定 确实vue要使用vueset 但是
  • 他人工作多年后的总结

    1 找一个好公司 精通至少一门语言及其框架 专注做5到10年 先有深度再有广度 不要为了高工资过早转向管理角色 2 从长远来看 拥有个人项目 阅读 写博客和参加访谈都会有助于你成为一个更好的开发人员 3 成为开发者社区的一部分 努力参加线上
  • qt写C++(引用的妙处,内联函数)

    首先看什么是引用 引用和取地址很像 容易混淆 单独出现 a就是对a这个变量取地址 如果是int a 就是声明这是一个引用 引用 include
  • 基于SpringBoot+redis实现一个简单的点赞功能

    点赞操作比较频繁 而且比较随意 所以数据变更很快 如果用mysql 会对mysql产生很大的压力 于是决定使用Redis 防止数据丢失 所以会定期将数据持久化同步到mysql中 一 Redis 缓存设计及实现 1 1 Redis 安装及运行
  • mysql约束之_外键约束 foreign key

    外键约束 foreign key 创建一个员工表employee 员工编号id 员工的姓名name 部门名称dept name 员工所在的地址address CREATE TABLE employee id INT PRIMARY KEY
  • R语言学习笔记

    参考 W N Venables D M Smith and the R DCT Introduction to R Notes on R A Programming Environment for Data Analysis and Gra
  • java集合Map介绍及具体使用

    目录 Map 双例集合 存储 键值对 key value 的数据 1 基本介绍 2 HashMap 2 1源码介绍 2 2 HashMap源码中的重要常量 2 3面试题 3 LinkHashMap 3 1LinkHashMap源码分析 4

随机推荐

  • Pandas数据处理

    数据预览 首先 调用read excel 方法读取数据 import pandas as pd df pd read excel data xlsx df 姓名 班级 语文 数学 0 张三 一班 99 90 1 李四 一班 78 NaN 2
  • 【从零开始学c++】———模拟实现string类(常用接口的实现)

    string 1 前言 2 string类常用接口实现 3 总结 1 前言 之前学到了string类常用接口的后 我很好奇string类在底层是怎样实现的 在由之前学习到c 有关的之后 所以我打算模拟实现一下string类常用的接口 以便加
  • Allegro学习笔记

    1 用Allegro进行PCB设计 文件的后缀名是 brd 2 双击 brd无法打开该文件 必须在Allegro里面File Open中进行打开
  • 《代码大全2》第5章 软件构建中的设计

    目录 前言 本章主题 5 1 设计中的挑战 5 1 1 设计在软件构建中所处的角色 5 1 2 设计是一个险恶的问题 5 2 关键的设计概念 5 2 1 软件的首要技术使命 管理复杂度 1 管理复杂度的重要性 5 2 2 理想的设计特征 5
  • threeJs着色器ShaderMaterial以及统一着色语言GLSL语法基本介绍

    一 着色器材质ShaderMaterial的基本使用 废话不多讲先来看案例 console log 着色器入门 引入three js import as THREE from three 引入OrbitControls控制器 import
  • RuntimeError: cuDNN error: CUDNN_STATUS_NOT_SUPPORTED.

    原因 batch size太大了 说起来我也觉得挺奇怪 bs太大为什么不报错out of memory而是报了这么一个牛头不对马嘴的错误 不过因为我这个环境已经跑了很多模型都没有问题 因此不是cudnn和cuda版本对应问题 将bs调小一半
  • 常用Linux发行版镜像源配置

    最近研究Linux 试了一些Linux发行版 但是大多数发行版的软件源速度都不是很理想 所以我这里干脆做了一个收集 把我用过的一些常用发行版的软件源设置方法做个总结 大家也可以做个参考 Ubuntu 18 04 18 04是目前Ubuntu
  • unity Animation和Animator动画的暂停和继续播放

    1 利用Animator组件实现暂停和继续播放自己创建的Animation动画 需要按以下顺序操作 在需要播放动画的物体身上添加Animator组件 在Project视图下创建AnimatorController并拖入到Animator组件
  • 【vue3+ts+ant】a-table的column绑定点击事件的两种方式

    需求 给标题这一列的数据绑定点击事件 实现交互 第一种 在dom里面插入标签 并绑定点击事件
  • 【牛客网 - 华为机试 - HJ85 最长回文子串】

    描述 给定一个仅包含小写字母的字符串 求它的最长回文子串的长度 所谓回文串 指左右对称的字符串 所谓子串 指一个字符串删掉其部分前缀和后缀 也可以不删 的字符串 数据范围 字符串长度 进阶 时间复杂度 O n O n 空间复杂度 O n O
  • Java编码规范

    目录 1 代码规范 2 1 1 注释规范 2 1 1 1 页头注释
  • redux之react-redux实现原理

    Redux Flow 一 介绍 一 redux 1 reducer念 reducer就是一个纯函数 接收旧的state和action 返回新的state previousState action gt newState 名字由来 Array
  • Java 实现下载文件工具类

    package com liunian utils import lombok SneakyThrows import javax servlet ServletOutputStream import javax servlet http
  • 力扣每日一题——四数相加Ⅱ

    题目链接 class Solution public 将四个组分为两组 即时间复杂度n 4 gt 2 n 2 int fourSumCount vector
  • 服务器域名修改,服务器修改域名

    服务器修改域名 内容精选 换一换 华为云帮助中心 为用户提供产品简介 价格说明 购买指南 用户指南 API参考 最佳实践 常见问题 视频帮助等技术文档 帮助您快速上手使用华为云服务 您可以通过华为云的域名注册服务管理您的域名 如表1所示 服
  • 无法连接imessages信息服务器,如何屏蔽imessage广告 iPhone怎么屏蔽iMessages广告【详解】...

    很多苹果设备用户都会用到iMessages 苹果设备之间聊天很方便 不过iMessages广告却是一个神烦的存在 怎么屏蔽iMessages广告 下面IT百科小编和大家分享几种屏蔽iMessages广告的方法 大家可以根据自己的使用习惯选择
  • QWidget的背景颜色和背景图片的设置

    首先设置autoFillBackground属性为真 然后定义一个QPalette对象 设置QPalette对象的背景属性 颜色或图片 最后设置QWidget对象的Palette 实例 QWidget widget new QWidget
  • web基础学习笔记(九)之节点常用属性和方法

    节点常用属性和方法 getElementsByTagName 获取当前节点的指定标签名孩子节点 gappendChild oChildNode 添加一个子节点 oChildNode是要添加的孩子节点 属性 childNodes 获取当前节点
  • Docker---本地镜像发布到阿里云

    本地镜像发布到阿里云 1 准备前提 2 以当前运行运行的mycentos运行实例 以它为模板commit一个新的mycentos镜像 3 将本地镜像推送到阿里云 3 1 本地镜像素材原型 3 2 登录阿里云开发者平台创建镜像仓库 3 2 1
  • jQuery基本筛选器

    3 jQuery基本筛选器 3 1 first 获取第一个元素 用法 ul li list item 1 li li list item 2 li li list item 3 li li list item 4 li li list it