jQuery选择器

Posted 2020-10-13 喝了雪碧我透心凉

jQuery选择器

1：基本选择器

Id选择器：根据给定的ID匹配一个元素。$("#div1");

class选择器：根据给定的类匹配元素。$(".div2");

元素选择器：根据给定的元素名匹配所有元素。$("div");

通配选择器：匹配所有元素。$("*");

并集选择器：$("div,p");

交集选择器：$("div#div1")；

2：层级选择器

①后代选择器：在给定的祖先元素下匹配所有的后代元素

$("div span");

②子代选择器：在给定的父元素下匹配所有的子元素$("div > span");

③相邻选择器：匹配所有紧接在--元素后的--元素$("#p1 + p");

④相邻兄弟选择器：$("#p1 ~ span");

3：基本伪类选择器

①first:获取第一个元素

$("li:first")

②last:获取最后一个元素

$("li:last")

③not：去除所有与给定选择器匹配的元素

$("li:not(#li3)")

④even:返回索引为偶数的元素

$("li:even")

⑤odd:返回索引为奇数的元素

$("li:odd")

⑥eq:返回指定索引的元素

$("li:eq(1)")

⑦gt:返回所有索引值大于某个指定数的元素

$("li:gt(2)")

⑧lt:返回所有索引值小于某个指定数的元素

$("li:lt(2)")

⑨header:返回所有的标题标签

$(":header")

4.内容选择器

①contains:返回包含指定内容的元素(区分大小写)

$("div:contains(‘John‘)").css({color:"red"});

②empty:返回没有内容也没有子元素的元素

$("div:empty").html("ccy");

③has：返回包含指定元素的元素

$("div:has(‘p‘)").css({fontSize:"30px"})

④parent:返回包含子元素或者内容的元素

$("div:parent")

5.可见性伪类选择器

①hidden：匹配所有不可见元素，或者type为hidden的元素。$("tr:hidden")

②visible：匹配所有的可见元素。$("tr:visible")

6.属性选择器

①[attr]:返回包含某个的元素

$("[id]").css({color:"red"});

②[attr=value]:返回属性等于某个值的元素

$("[class = jredu]").css({color:"red"});

③[attr!=value]:返回属性不等于某个值的元素

$("div[id != demo1]").css({color:"red"});

④[attr ^= value]:返回属性以某个值开头的元素

$("div[id ^= d]").css({color:"red"});

⑤[attr $= value]:返回属性以某个值结尾的元素

$("div[id $= 1]").css({color:"red"});

⑥[attr *= value]:返回属性包含某个值的元素

$("div[id *= e]").css({color:"red"});

⑦返回包含id属性并且属性值为man结尾

$("input[id][name$=‘man‘]")

7.表单选择器

①input：返回所有的input textarea select button

$(":input")

②text  返回所有的单行文本

$(":text").val("ccy")

③password:返回所有的密码框

$(":password").val("123456")

④radio: 返回所有的单选框

$(":radio").attr("checked",true)

⑤checkbox:返回所有的复选框

$(":checkbox").attr("checked",true);

⑥submit():返回所有的提交按钮

$(":submit").val("ccy");

⑦image:返回所有的图片按钮

$(":image").get(0)

⑧reset:返回所有的重置按钮

$(":reset").val("惠大脚")

⑨button：返回除了提交和重置按钮以外的所有的按钮

$(":button").get(0)

⑩file:返回所有的文件域

$(":file").get(0)

8.表单对象属性

①disabled:返回所有被禁用的元素

$("input:disabled").val("ccy");

②enabled:返回所有可操作的元素

$("input:enabled").val("ccy2");

③checked：返回所有被选中的选择框

$("input:checked")

④selected：返回所有被选中的下拉框的元素

$("option:selected").val()