jquery-选择器常见用法

对象下有多个子元素时如何选择

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

1
2
3
4
5
6
7

如果要选择第三个，代码

$("ul").children().eq(2)
1

依次类推，如果要选择第二个，代码

$("ul").children().eq(1)
1

整个文档中匹配到的元素如何获取

比如在整个文档中，有两个div的class=“cc”，此时可以通过如下方法获取第一个和第二个。

注意：不是html中搜索出了有两个cc，是有两个元素。因为有可能在搜索cc的时候元素一个，style里有一个cc，因此要判断。

$("div.cc").eq(0)
$("div.cc").eq(1)
1
2

如何匹配有同样class的第一个和最后一个

$(".aui-textarea__inner:last").attr("title").trim();
$(".aui-textarea__inner:first").attr("title").trim();
1
2

对元素定位的思路

使用each方法

$("span").each(function(index,value){
	if($(value).text()=="时长"){
		$(value).next().find("input").click();
		
		setTimeout(function() {
			$("ul.hae-poplist").children().eq(4).click();
		},1000);	
	}
});

$("textarea").each(function(index,value){
	if($(value).attr("placeholder")=="请输入8位工号或姓名全拼，以“,”号间隔"){
		$(value).val("Li,");
		$(value)[0].dispatchEvent(new Event('input'));
	}
	if($(value).attr("placeholder")=="请输入8位工号或姓名全拼"){
		$(value).val("Zhang");
		$(value)[0].dispatchEvent(new Event('input'));
	}
	if($(value).attr("placeholder")=="请输入邮箱，以“,”号间隔"){
		$(value).val(email);
		$(value)[0].dispatchEvent(new Event('input'));
	}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

使用类或者ID定位

var org=$(".customerOrg-link").text().trim();
1

多个类的class选择器

如class=“ant-input css-1auzvgt”，逗号隔开

$("input.ant-input,.css-1auzvgt");
1

eq定位

$("div.ql-editor").eq(0)
1

对下拉列表进行赋值

如果是select，直接定位后，使用

$(value).trigger("select")
或者
$(value)[0].dispatchEvent(new Event('input'));
1
2
3

如果是如vue的下拉，只能采取定位元素后激活click方法

$("span").each(function(index,value){
	if($(value).text()=="时长"){
		$(value).next().find("input").click();
		
		setTimeout(function() {
			$("ul.hae-poplist").children().eq(4).click();
		},1000);	
	}
});
1
2
3
4
5
6
7
8
9