Bootstrap

jquery-选择器常见用法

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

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

如果要选择第三个,代码

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

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

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

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

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

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

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

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

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

对元素定位的思路

使用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'));
	}
});

使用类或者ID定位

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

多个类的class选择器

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

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

eq定位

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

对下拉列表进行赋值

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

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

如果是如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);	
	}
});
;