jQuery选择器、jQuery关系选择器、jQuery伪选择器
一、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(){});
还没有评论,来说两句吧...