JQ的选择器的归类

1.基本选择器

选择器描 述返 回示 例
#id 匹配给定的id 单个元素 $(“header”)
.class 匹配给定的类名 集合元素 $(“.main”)
E 匹配给定的标签名 集合元素 $(“div”)
* 匹配所有元素 集合元素 $(“*’)
E, .class, E… 匹配任意给定的集合 集合元素 $(“span, div,p”)

2.层次选择器

选择器描 述返 回示 例
$(“ancestor descendant”) 匹配父辈里的所有
后代元素
集合元素 $(“body div”)
$(“parent>child”) 匹配parent下的第一代的所有子元素 集合元素 $(“div>span”)
$(“prev+next”) 匹配紧接在prev后的
next元素
集合元素 $(“.error+span”)
$(“prev~siblings”) 匹配prev后的所有
siblings元素
集合元素 $(“span~a”)

3.过滤选择器

3.1 基本过滤选择器

选择器描 述返 回示 例
:first 匹配第一个元素 单个元素 $(“div:first”)
:last 匹配最后一个元素 单个元素 $(“span:last”)
:even 匹配索引是偶数的元素
索引从0开始
集合元素 $(“li:even”)
: odd 匹配索引是奇数的元素
索引从0开始
集合元素 $(“li:odd”)
:eq(index) 匹配索引等于index的元
素(索引从0开始)
单个元素 $(“input:eq(2)”)
:gt(index) 匹配索引大于index的元
素(索引从0开始)
集合元素 $(“input:gt(1)”)
:lt(index) 匹配索引小于index的元
素(索引从0开始)
集合元素 $(“input:lt(5)”)
:header 匹配所有h1,h2…等
标题元素
集合元素 $(“:header”)
:animated 匹配所有正在执行
动画的元素
集合元素 $(“div:animated”)

3.2 内容过滤选择器

选择器描 述返 回示 例
:contains(text) 匹配含有文本内容text
的元素
集合元素 $(“p:contains(今天)”)
:empty 匹配不含子元素或
文本元素的空元素
集合元素 $(“p:empty”)
:has(selector) 匹配包含selector元素
的元素
集合元素 $(“div:has(span)”)
:parent 匹配含有子元素或文本
的元素
集合元素 $(“div:parent”)

3.3 可见性过滤选择器

选择器描 述返 回示 例
:hidden 匹配所有不可见
的元素
集合元素 $(“:hidden”)
:visible 匹配所有可见元素 集合元素 $(“:visible”)

3.4 属性过滤选择器

选择器描 述返 回示 例
[attr] 匹配拥有此属性
的元素
集合元素 $(“img[alt]“)
[attr=value] 匹配属性值为value
的元素
集合元素 $(“a[title=test]“)
[attr!=value] 匹配属性值不等于
value的元素
集合元素 $(“a[title!=test]“)
[attr^=value] 匹配属性值以value
开头的元素
集合元素 $(“img[alt^=welcome]“)
[attr$=value] 匹配属性值以value
结尾的元素
集合元素 $(“img[alt$=last]“)
[attr*=vlaue] 匹配属性值中含有
value的元素
集合元素 $(“div[title*=test]“)
[attr1][attr2]… 通过多个属性
进行匹配
集合元素 $(“div[id][title*=test]“)

3.5 子元素过滤选择器

选择器描 述返 回示 例
:nth-child 匹配每个父元素下的
第index个子元素
索引从1开始
集合元素 $(“div:nth-child(2)”)
:first-child 匹配每个父元素的
第一个子元素
集合元素 $(“div:first-child”)
:last-child 匹配每个父元素的
最后一个子元素
集合元素 $(“div:last-child”)
: only-child 某元素是它父元素中
的唯一的子元素
则匹配它
集合元素 $(“div:only-child”)

3.6 表单对象属性过滤选择器

选择器描 述返 回示 例
:enabled 匹配所有可用元素 集合元素 $(“form :enabled”)
:disabled 匹配所有不可用
的元素
集合元素 $(“form :disabled”)
:checked 匹配所有被选中的元素
(含单选框,复选框)
集合元素 $(“input:checked”)
:selected 匹配所有被选中的
选项元素
集合元素 $(“select :selected”)

4.表单选择器

选择器描 述返 回示 例
:input 匹配所有input, textarea,
select, button元素
集合元素 $(“input”)
:text 匹配所有文本框 集合元素 $(“:text”)
:password 匹配所有密码框 集合元素 $(“:password”)
:radio 匹配所有单选框 集合元素 $(“:radio”)
:checkbox 匹配所有所有复选框 集合元素 $(“:checkbox”)
:submit 匹配所有提交按钮 集合元素 $(“:submit”)
:image 匹配所有图像按钮 集合元素 $(“:image”)
:reset 匹配所有重置按钮 集合元素 $(“:reset”)
:button 匹配所有按钮 集合元素 $(“:button”)
:file 匹配所有上传域 集合元素 $(“:file”)
JavaScript(简称JS)是浏览器端的编程语言,而jQuery是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。在某些情况下,你可能需要在原生JavaScript和jQuery之间进行转换。 1. JS转换为jQuery: 将纯JavaScript代码转换为使用jQuery的方法通常涉及到使用jQuery的选择器、方法和函数来替代原生DOM操作和事件处理。例如,如果你有一个JavaScript代码段用于选取页面上所有的段落,并改变它们的颜色: ```javascript var paragraphs = document.querySelectorAll('p'); for (var i = 0; i < paragraphs.length; i++) { paragraphs[i].style.color = 'red'; } ``` 使用jQuery,你可以用以下代码达到同样的效果: ```javascript $('p').css('color', 'red'); ``` 2. jQuery转换为JS: 如果你希望将jQuery代码转换回原生JavaScript,你需要使用原生的DOM API来完成相同的操作。例如,使用jQuery改变所有段落颜色的代码: ```javascript $('p').css('color', 'red'); ``` 可以转换为: ```javascript var paragraphs = document.querySelectorAll('p'); for (var i = 0; i < paragraphs.length; i++) { paragraphs[i].style.color = 'red'; } ``` 对于CSS和jQuery选择器,它们都用于选取页面上的元素,但它们的使用场景和语法稍有不同: - CSS选择器用于定义HTML元素的样式,如选择器(.class)、ID选择器(#id)、元素选择器(element)、属性选择器([attribute="value"])等。 - jQuery选择器用于在JavaScript中选取和操作DOM元素,其语法与CSS选择器似,但增加了额外的功能,如子元素选择器($('parent > child'))、相邻兄弟选择器($('sibling + next'))、过滤选择器($('li:even'))等。 在实际开发中,你可能需要在CSS和jQuery之间进行选择器的相互转换。例如: - 在CSS中使用`.my-class`选择器来应用样式,而在jQuery中使用`$('.my-class')`来选取元素进行操作。 - 在CSS中使用`#my-id`来指定ID样式,在jQuery中使用`$('#my-id')`来选取具有该ID的元素。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值