ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

jQ的四类基本选择器

2021-04-28 14:34:51  阅读:236  来源: 互联网

标签:四类 元素 jQ ###### ##### eq 选择器


#### jQuery的四种选择器

jQ选择器与css选择器本质上相差不大,但是在使用容易混淆格式或属性

##### 1.基础选择器

$('#id名')

$('.类名')

$('.类名1 .类名2')

$('标签名.类名')

##### 2.层级选择器

###### 1.子代:> children

$('基础选择器1>基础选择器2')//,代表选中1的子代2

###### 2.后代: 空格

$('基础选择器1 基础选择器2')//空格,代表选中所有1的后代2

###### 两者还可以通过下标来选中元素

$('基础选择器1 基础选择器2')[2]//注意是下标,这里代表第三个元素2

##### 3.过滤选择器

eq匹配一个给定索引值的元素

###### 1.原生方法

通过$(':nth-child(n)') //这里的n不是下标,直接代表第几个

###### 2.jQ方法

同过$(':eq(n)')//这里的n代表的下标,当前元素 = 第(n-1)个,从0开始计数

同时jQ方法还可以通过奇偶数批量选择元素

$('eg:odd')

$('eg:even')

##### 4.筛选选择器

括号的参数参数除了基础选择器之外还可以用过滤选择器eq,比如:

$("#box").children("div:eq(n)")

###### 1. .children()

不输入参数是全选,输入参数可以选择指定的元素,

###### 2. .find()

传入参数*可以找到所有的后代元素

也可以获得指定的后代元素

###### 3. .siblings()

获得所有兄弟元素,除了自己,在实际的使用中可以结合排他思想,比如选用sibilings方法设置其他元素,然后设置自己,大幅节约代码

传入参数可以获得指定的兄弟元素

###### 4. .prev()/.next()

获得上一个或下一个兄弟元素

###### 5. .prevAll()/.nextAll()

获得前方或者后方的所有兄弟元素

###### 6. .parent()/.parents()

.parent() 这个方法用来获得所有父级元素

.parents() 在加了s后表示获取所有上级元素,一直到document

这里联系一下parentNode和parentElement,他们主要区别是,前者最高可以读取到Document,而parentElement只能读取到html

标签:四类,元素,jQ,######,#####,eq,选择器
来源: https://www.cnblogs.com/Code-Is-Fun/p/14713971.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有