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

本是古典 何须时尚 2023-10-07 11:58 140阅读 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 都可以。

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

遍历:$(selector).each(function(){});

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

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

$(selector).off(‘click’).on(‘click’,function(){});

发表评论

表情:
评论列表 (有 0 条评论,140人围观)

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

相关阅读

    相关 jQuery选择

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

    相关 Jquery 选择

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