jQuery选择器、jQuery关系选择器、jQuery伪选择器

本是古典何须时尚 2023-10-07 11:58 53阅读 0赞

### 一、jQuery选择器 ###

1、父元素(向上遍历单一层级)：**parent()**

2、祖先元素：**parents(*selector*)**

3、子元素(向下遍历单一层级)：**children(*selector*)**

4、后代元素：**find(*selector*)**

5、前一个兄弟元素：**prev(*selector*)**  
6、之前所有兄弟元素：**prevAll(*selector*)**  
7、后一个兄弟元素：**next(*selector*)**  
8、之后所有兄弟元素：**nextAll(*selector*)**  
9、所有兄弟元素：**siblings(*selector*)**

10、第一个：**first()**  
11、最后一个：**last()**  
12、第几个(从 0 开始)：**eq(index)**

13、排除元素(不需要某元素)：**not(*selector*)**

### **二、伪选择器** ###

多选框选中的元素：**$(':checked')**

被禁用的元素**$(':disabled)**

取得到焦点的元素**$(':**focus**)**

第一个元素：**$(':first')**

最后一个元素：**$(':last')**

### 三、关系选择器 ###

空格：**$('*****selector1 selector2*****')**  selector2是selector1的后代元素。

大于(>) ：**$('*****selector1>selector2*****')** selector2是selector1的子元素(向下遍历单一层级)。

逗号(,)：**$('*****selector1,selector2*****')** selector2元素和selector1元素。并列选择器。

### **四、其他常用函数** ###

html()、val()、text()、append()、css()、

prop()、remove()、attr()、removeAttr、

addClass()、removeClass、toggleClass()、hasClass(class)、

html()获取的是这个标签的子标签，不包括自己。

prop("outerHTML")获取的是这个标签的子标签，并包括自己。

toggle() 方法切换元素的可见状态。

交换元素位置 insertAfter 或者insertBefore 都可以。

//多选按钮，只允许选择一个
    $('#quota-list').on('click', '.ch', function () {
        let index = $('.ch').index($(this));//获取当前元素 是第几个元素
        //反选 比如 $('.ch').not(":eq(3)") 
        $('.ch').not(":eq(" + index + ")").removeAttr('checked');
    })

遍历：**$(*selector*).each(function()\{\});**

### 五、绑定事件(建议使用on不要使用bind) ###

绑定前先解绑不然可能导致重复绑定。

**$(*selector*).off('click').on('click',function()\{\});**

发表评论取消回复

表情：

评论列表（有 0 条评论，53人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery选择器、jQuery关系选择器、jQuery伪选择器

一、jQuery选择器 1、父元素(向上遍历单一层级)：parent() 2、祖先元素：parents(selector) 3、子元素(向下遍历单一层级)：child

本是古典何须时尚/ 2023年10月07日 11:58/ 0 赞/ 54 阅读

相关 Jquery选择器-基本选择器

jquery作为我们常用前端工具之一，实际项目中常用的的选择器有id选择器(\id)、元素选择器(element)、样式选择器(.class)。 \id 概述:根据给定

秒速五厘米/ 2022年07月10日 05:58/ 0 赞/ 407 阅读

相关 jquery选择器

基本选择器基本选择器标签选择器 $("a") ID选择器 $("\id") $("p\id") 类选择器 $(".class") $("h2.class"

阳光穿透心脏的1/2处/ 2022年04月22日 14:44/ 0 赞/ 181 阅读

相关 jQuery-jQuery选择器

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择

雨点打透心脏的1/2处/ 2022年04月17日 07:05/ 0 赞/ 453 阅读

相关 jQuery选择器

jQuery选择器　　jq 选择器和 css 的选择器语法类似, jq 的选择器是他的灵魂　　就是将 html 中的节点元素选择出来的语法, 　　jq 的选择器

╰半夏微凉°/ 2022年01月11日 06:45/ 0 赞/ 318 阅读

相关 jQuery选择器

jquery元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $(“p”) 选取元素。 $(“p.intro”) 选取所有 class=“

拼搏现实的明天。/ 2021年11月16日 10:38/ 0 赞/ 424 阅读

相关 Jquery 选择器

使用特殊操作符或“组合符”可以将简单选择器组合起来，表达文档树中元素之间的关系。下表列举了jQuery支持的组合选择器。这些组合选择器与CSS3支持的组合选择器是一样的。下

╰半橙微兮°/ 2021年10月08日 05:58/ 0 赞/ 515 阅读

相关 jQuery-选择器

[http://www.webhek.com/post/jquery-61-selector.html][http_www.webhek.com_post_jquery-61-

小鱼儿/ 2021年09月28日 10:46/ 0 赞/ 475 阅读

相关 jQuery 选择器

1.基本选择器 $("id") //ID选择器 $("div") //元素选择器 $(".cla

﹏ヽ暗。殇╰゛Y/ 2021年07月24日 19:07/ 0 赞/ 542 阅读

相关 jQuery 选择器

jQuery 选择器

╰半橙微兮°/ 2021年07月04日 14:22/ 0 赞/ 597 阅读