jQuery_3_过滤选择器
2024-10-20 16:04:05
过滤选择器(过滤器)类似于CSS3里的伪类,包含
1. 基本过滤器
2. 内容过滤器
3. 可见性过滤器
4. 子元素过滤器
5. 其他方法
一. 基本过滤器
过滤器名 | jQuery语法 | 注释 |
:first | $("li:first") | 选取第一个li元素 |
:last | $("li:last") | 选取最后一个li元素 |
:not(selector) | $("li:not(.red)") | 选取class不是red的li元素 |
:even | $("li:even") | 选取索引(0开始)是偶数的所有元素 |
:odd | $("li:odd") | 选取索引(0开始)是奇数的所有元素 |
:eq(index) |
$("li.eq(2)") 正数第三个 $$("li.eq(-2)") 倒数第二个 |
选择索引(0开始)等于index的元素 |
:gt(index) | $("li:gt(2)") | 选择索引(0开始)大于index的元素 |
:lt(index) | $("li:lt(2)") | 选择索引(0开始)小于index的元素 |
:header | $(":header") | 选择标题元素h1~h6 |
:focus | $("input:focus") |
选择当前被焦点元素 focus过滤器,必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或Tab键敲击激活的 |
四个方法
first() | 等同于 :first |
last() | 等同于:last |
eq(index) | 等同于:eq(index) |
not(selector) | 等同于:not(selector) |
<ul id="d1">
<li>列表1</li>
<li>列表2</li>
<li class="red">列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul> <ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul> <div>
<h3>我是标题</h3>
</div> <input type="text"/>
<input type="text" /> <div style="display:none">aduabcppoip</div>
<div>jhkjkhjkhjkhjk</div>
<div></div>
<div></div>
$("li:first").css("background", "grey");
$("li:last").css("background", "grey");
$("#d1 li:last").css("background", "grey");
$("ul:first li:last").css("background", "grey");
$("li:not(.red)").css("background", "grey");
$("li:even").css("background", "grey");
$("li:odd").css("background", "grey");
$("li:eq(2)").css("background", "grey");
$("li:eq(-2)").css("background", "grey");
$("li:gt(2)").css("background", "grey");
$("li:lt(3)").css("background", "grey");
$("li:lt(-3)").css("background", "grey");
$(":header").css("background", "grey");
$("div :header").css("background", "grey");
$("input").get(1).focus();//先让文本框选中
$("input:last:focus").css("background", "red"); $("li").first().css("background", "grey");
$("li").last().css("background", "grey");
$("li").not(".red").css("background", "grey");
$("li").eq(2).css("background", "grey");
二. 内容过滤器
内容过滤器的过滤规则主要是包含了子元素或文本内容
过滤器名 | JQuery语法 | 注释 |
:contains(text) | $(":contains('abc')") | 选取含有“abc”文本的元素 |
:empty | $("div:empty") | 选取不包含子元素或空文本的div元素 |
:has(selector) | $(":has(.red)") | 选择子元素含有class是res的元素 |
:parent | $(":parent") | 选取含有子元素或文本的元素 |
四个方法
has(selector) | 等同于:has(selector) |
parent() | 选择当前元素的父元素 |
parents() | 选择当前元素的父元素和祖先元素 |
parentsUntil() | 选择当前元素的遇到某个元素停止 |
注意:这里的parent方法和:parant过滤器是不同的
$("div:contains('abc')").css("background", "grey");
$("div:empty").css("height", "20px").css("background", "grey");
$("ul:has(.red)").css("background", "grey");
$("div:parent").css("background", "grey"); $("ul").has(".red").css("background", "grey");
$("li").parent().css("background", "grey");
$("li").parent().eq(0).css("background", "grey");
$("li").parents().css("background", "grey");
$("li").parentsUntil("body").css("background", "grey");
三. 可见性过滤器
可见性过滤器根据元素的可见性和不可见性来选择相应元素
:hidden | $(":hidden") | 选取不可见元素 |
:visible | $(":visible") | 选取可见元素 |
:hidden过滤器一般是包含的内容为:css样式为dispaly:none, input表单类型为type="hidden"和 visiblity:hidden的元素。
$("div:hidden").css("background", "grey").show(1000);
$("div:visible").css("background", "grey")
最新文章
- [译]为什么我要离开gulp和grunt转投npm脚本的怀抱
- SET ANSI_NULLS ON ……
- 数组的sizeof
- 未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序
- mybatis 使用记录
- jQuery返回顶部(精简版)
- Data Flow ->;>; Merge
- 一个获取文件绝对路径的sh
- C# 模拟用户登录
- spring 框架整合 笔记4
- Zeppelin添加mysql解释器
- Object对象你真理解了吗?
- React 记录(6)
- 【Django模板进阶007】
- Python学习之旅(三十二)
- 获取relatedTarget属性
- C#中Split用法【转】
- dirname(__FILE__) === __DIR__
- 【Python】CVE-2017-10271批量自查POC(Weblogic RCE)
- 三篇文章了解 TiDB 技术内幕——说存储