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);
}
});