jQuery -> 获取各种滤芯(filter)
2023-09-27 14:27:02 时间
按顺序选择
依次选择过滤器(filter)有着
- :first
- 第一元件
- :last
- 最后一个元素
- :even
- 序号为偶数的元素
- :odd
- 序号为奇数的元素
- :eq(n)
- 序号等于n的元素
- :lt(n)
- 序号小于n的元素
- :gt(n)
- 序号大于n的元素
假设有例如以下的表格
0 | even |
1 | odd |
2 | even |
3 | odd |
4 | even |
html代码例如以下
<table>
<tr><td>0</td><td>even</td></tr>
<tr><td>1</td><td>odd</td></tr>
<tr><td>2</td><td>even</td></tr>
<tr><td>3</td><td>odd</td></tr>
<tr><td>4</td><td>even</td></tr>
</table>
<tr><td>0</td><td>even</td></tr>
<tr><td>1</td><td>odd</td></tr>
<tr><td>2</td><td>even</td></tr>
<tr><td>3</td><td>odd</td></tr>
<tr><td>4</td><td>even</td></tr>
</table>
假设须要改动全部序号为偶数的tr的式样。用jQuery则能够很easy的实现
$("tr:even").addClass('even')
even是在css中定义的式样
table tr.even { background: #CCC; }
加入even式样后,表格例如以下所看到的
0 | even |
1 | odd |
2 | even |
3 | odd |
4 | even |
jQuery也提供了filter函数
$('ul li').filter(':first');
选取正在运行动画的元素
过滤器是
:animated
使用方法例如以下
$('div:animated'); // #1 $('div:not(div:animated').animate({height:100}); // #2
也能够使用动画过滤器来推断元素是否正在运行动画
var myElem = $('#elem'); if (myElem.is(':animated')) { // do something }
依据包括的内容来选择元素
过滤器:has(), contains()
使用方法例如以下
假设要选取包括特定文字的元素。能够使用contains
HTML
<span>Hello Bob!</span>JS
$('span:contains("Bob")); # contains參数区分大写和小写,能够不需冒号
通过has来使用selector
$('div:has(p a)');
逆向选择
过滤器 not
not的參数也是一个selector
$('div:not(#content))
当然也能够使用复杂的selector
$('a:not(div.important a, a.nav)');
jQuery也提供了not方法
var anchors = $('a'); anchors.click(function() { anchors.not(this).addClass('not-clicked'); });
通过是否可见来选择元素
选择器 hidden, visible
使用方法例如以下所看到的
if ($('#elem').is(':hidden')) { // Do something conditionally } $('p:visible').hide();
基于属性来选择元素
过滤器
- [attr]
- 是否具有此属性
- [attr=val]
- attr属性是否等于val
- [attr!=val]
- attr属性不等于val
- [attr^=val]
- attr属性以val开头
- [attr$=val]
- attr属性以val结尾
- [attr~=val]
- attr属性包括val
- [attr]
- 是否具有此属性
使用方法
$('a[href="http://google.com"]');
连续使用多个属性过滤器
$('*[title][href]')
依据元素类型来选择
过滤器
jQuery selector syntax | Selects what? |
:text | <input type="text" /> |
:password | <input type="password" /> |
:radio | <input type="radio" /> |
:checkbox | <input type="checkbox" /> |
:submit | <input type="submit" /> |
:image | <input type="image" /> |
:reset | <input type="reset" /> |
:button | <input type="button" /> |
:file | <input type="file" /> |
:hidden | <input type="hidden" /> |
版权声明:本文博主原创文章,博客,未经同意不得转载。
相关文章
- Leetcode: Reorder List && Summary: Reverse a LinkedList
- List of 3rd Party .NET UI & Reporting Components
- 小工具:天气查询 Vs自定义设置 DevGridControl中GridView排序问题 小工具:火车票查询 小工具:邮件发送 小工具:截图&简单图像处理
- jQuery -> 获取/设置HTML或TEXT内容
- 【微信小程序】-- 全局配置 -- window - 下拉刷新 & 上拉触底(十六)
- 淘东电商项目(38) -Docker下安装ES&Kibana(一次填完所有的坑)
- Command: command & type
- Descriptor描述器 & 类初始化参数检查
- S2750&S5700&S6700 V200R003(C00&C02&C10) MIB参考
- vite&vue3中使用批量导入 import.meta.glob import.meta.globEager
- Go语言开发小技巧&易错点100例(一)
- JAVA二维码编码&解码
- 浮动&清除浮动的四种方法(伪类清除法)
- 【进阶指针一】字符数组&数组指针&指针数组
- 【C++】函数模板&类模板
- SQL ERDER BY & DESC
- hadoop(1):centos 安装 hadoop & hive
- 15.0 vue3 provide&inject跨组件通信方式
- AT&T 尝试NFV的应用点播平台
- DICOM医学图像处理:深入剖析Orthanc的SQLite,了解WADO & RESTful API