jQuery选择器-蒲公英云

jQuery选择器

jQuery选择器
　　jq 选择器和 css 的选择器语法类似, jq 的选择器是他的灵魂
　　就是将 html 中的节点元素选择出来的语法,
　　jq 的选择器非常的灵活

id选择器:
　　$(“#id”)

类选择器:
　　$(“.class值”);

元素选择器:
　　$(“元素 “);

组选择器:
　　一次可以使用多种选择器选择元素,每个选择器之间使用 “,” 隔开
　　$(“div,span,.myClass”);

后代选择器:
　　选择出指定父元素下指定的所有子孙元素
$(function(){
var inputs = $(“form input”);
console.log(“inputs.length”);
})

子选择器
　　选择指定父元素下指定的子元素
$(“form > input”)

选择第一个元素
html:

list item 1

list item 2

list item 3

list item 4

list item 5

jq:
$(function(){
var item = $(“ul li:first”);
console.log(item[0]);
})

选择最后一个元素
$(function(){
var item = $(“ul li:last”);
console.log(item[0]);
})

not 选择器
　　一般在复选框中使用较多
　　选择不是input标签, 属性不是 checked的
$(function(){
var boxes = $(“input:not(:checked)”);
for (var i = 0; i < boxes.length; i++) {
console.log(“boxes[i]“);
}
})

偶数选择器:
html:

雇员编号	雇员姓名	雇员职位	雇员薪资	部门编号
7963	SMITH	PRESIDENT	5000.00	10
7788	SMITH	PRESIDENT	5000.00	10
7932	SMITH	PRESIDENT	5000.00	10
7369	SMITH	PRESIDENT	5000.00	10
7521	SMITH	PRESIDENT	5000.00	10

jq:
$(function(){
var trs = $(“table tr:even”);
for (var i = 0; i < trs.length; i++) {
console.log(trs[i]);
}
})

奇数选择器:
$(function(){
$(“table tr:odd”).css({background:”red”})
})

eq选择器:
$(function(){
$(“table tr:eq(2)”).css({background:”red”})
})

gt(index) 选择器,
　　寻找大于指定索引的元素
$(function(){
$(“table tr:gt(2)”).css({background:”red”})
})

lt(index)选择器
　　选择小于指定索引的元素
$(function(){
$(“table tr:lt(3)”).css({background:”red”})
})

属性选择器
$(function(){
//选择出具备id属性的所有div
var divs = $(“div[id]“);
})

属性值选择器
1.选择input元素中具有name属性并且name值为”newsletter”
$(function(){
var inputs = $(“input[name=’newsletter’]“);
console.log(“inputs[0]“);
})
2.选择出以指定内容开始的属性的所有元素
$(function(){
var inputs = $(“input[name^=’news’]“);
console.log(“inputs[0]“);
})
3.查询所有name 属性中包含 news 的input元素
$(function(){
var inputs = $(“input[name*=’news’]“);
console.log(“inputs[0]“);
})
4.选择出以指定内容结尾的元素
$(function(){
var inputs = $(“input[name$=’news’]“);
console.log(“inputs[0]“);
})
5.选择input元素中具有name属性并且name值不等于”newsletter”
$(function(){
var inputs = $(“input[name!=’newsletter’]“);
console.log(“inputs[0]“);
})