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()、clone()、

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

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

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

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

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

1.相对于父元素 插入位置
$('parent').prepend('child')
$('parent').append('child')
2.相对于兄弟元素 插入位置
$('child').before('brother')
$('child').after('brother')

交换元素位置 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(){});