博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery.选择器
阅读量:5741 次
发布时间:2019-06-18

本文共 1751 字,大约阅读时间需要 5 分钟。

选择器


jQuery的选择器相比javaScript更简单明了。

$()是jQuery的元素选择器,各种DOM是这选择的:

$()查找元素

选择器语法 说明
$(*) 选择所有元素
$(element) 按元素名称选择
$(id) 按id选择元素
$(.class) 按类选元素

基本选择器

选择器示例 说明

 ancestor descendant

 一个元素是另一个元的后代,如li a
 parent>chiild

一个元素是另一个元素的子节点 

 previous+next 想领的兄弟选择器,只会选中紧跟在前一个元素之后的那一个 元素
 previous-siblings 兄弟选择器会选择钱前一个元素的所有兄弟元素 


基本筛选器

 

筛选示例 说明
$('li:first') 选取第一个元素
$('li:last') 选取最后一个元素
$("tr:even") 选取索引为偶数的元素,从 0 开始
$("tr:odd") 选取索引为奇数的元素,从 0 开始
$("tr:eq(1)")   选取给定索引值的元素
$("tr:gt(0)") 选取大于给定索引值的元素
$("tr:lt(2)") 选取小于给定索引值的元素
$(":focus")   当前获取焦点的元素
$(":animated") 正在执行动画效果的元素

 

内容选择器

 筛选示例  说明
$("div:contains('nick')")   选取包含nick文本的元素
$("td:empty") 选取不包含子元素或者文本的空元素
$("div:has(p)") 选取含有选择器所匹配的元素
$("td:parent") 选取含有子元素或者文本的元素

可见性选择器

 筛选示例  说明
$("div:hidden")   筛选所有隐藏的元素
$("td:empty") 筛选所有可见的元素

 

子节点选择器

 筛选示例  说明
$("ul:nth-child(2)")    选取当前选中元素的指定子节点,参数中的值是从1开始索引的
$("ul:first-child")  选取当前选中元素的第一个子节点
$("ul:last-child")  选取当前选中元素的最后一个子节点
$("ul:only-child")  选取当前是父元素的唯一子节点时选中

 


 

属性筛选器

筛选示例 说明
$("[href]") 筛选指定属性的元素
$(“[hret='https://www.0735it.net']”) 筛选指定属性,并指定属性值的元素
$("[href!='#index']") 筛选指定属性,并属性值不为指定值的元素
$("[href^='#']") 筛选以特定值开头的元素
$("[href*='#']") 筛选包含特定值的元素
$("[href|='#']") 筛选属性值等于特定字符串,或以特定字符串做为前缀,后加一个连字符(-)的元素
$('input[name~="man"]') 筛选属性值以空格分隔的多个值中的一个
$('input[id][name$="man"]') 多个属性筛选器同时使用

表单筛选器

筛选示例 说明
$("input")   筛选所有的input元素
$("input:text")   筛选所有文本类型的input元素
$("input:password") 筛选所有密码类型的input元素
$("input:radio") 筛选所有单选类型的input元素
$("input:checkbox") 筛选所有复选类型的input元素
$("input:submit") 筛选所有的提交按钮
$("input:image") 筛选所有的图片
$("input:reset") 筛选所有的重置按钮
$("input:button") 筛选所有的按钮
$("input:file") 筛选所有的文件上传域
$("input:selected") 筛选所有的提交按钮
$("input:enabled") 筛选所有可用的元素
$("input:disabled") 筛选所有禁用的元素
$("input:checked") 筛选所被选中的单选或筛选元素

 

 

转载于:https://www.cnblogs.com/H97042/p/9347280.html

你可能感兴趣的文章
es 加磁盘扩容
查看>>
linux下使用过的命令总结(未整理完)
查看>>
时间助理 时之助
查看>>
英国征召前黑客组建“网络兵团”
查看>>
Silverlight 2.5D RPG游戏“.NET技术”技巧与特效处理:(十二)魔法系统
查看>>
PHP 命令行模式实战之cli+mysql 模拟队列批量发送邮件(在Linux环境下PHP 异步执行脚本发送事件通知消息实际案例)...
查看>>
pyjamas build AJAX apps in Python (like Google did for Java)
查看>>
Java not support java EE1.3
查看>>
LAMP环境搭建1-mysql5.5
查看>>
spring boot view override
查看>>
centos5.9使用RPM包搭建lamp平台
查看>>
Javascript String类的属性及方法
查看>>
[LeetCode] Merge Intervals
查看>>
SharePoint 读取 Site Columns 的数据并绑定到DropdownList
查看>>
使用 axios 详解
查看>>
IPA提交APPStore问题记录(一)
查看>>
有利于seo优化的网站地图不能取巧
查看>>
快照产品体验优化
查看>>
ASCII
查看>>
ibatis SqlMap not found
查看>>