JQuery选择器筛
选择器：选具有相似特征的元素（标签）
1.基本语法学习：
（1）事件绑定
（2）入口函数
//jquery的入口函数，（dom文档加载完成之后执行该函数中的代码）
$(function () {
})
代码示例与结果
window.onload和$(function)区别：
window.onload：只能定义一次，如果定义多次，后边的会将前面的覆盖掉
$(function)：可以定义多次
（3）样式控制
2.分类：
（1）基本选择器
①标签选择器
语法：$("html标签名")获得所有匹配标签名称的子元素
②id选择器
语法：$("id的属性值")获得与指定id属性值匹配的元素
③类选择器
语法：$(".class的属性值")获得与指定class属性值匹配的元素
④并集选择器
语法：$("选择器1，选择器2")获得多个选择器选中的所有元素
代码示例
<script type="text/javascript">
//入口函数
$(function () {
//<input type="button" value="改变id为one的元素的背景色为红色" id="b1"/>
$("#b1").click(function () {
$("#one").css("backgroundColor",red);
});
// <input type="button" value="改变元素名为<div>的所有元素的背景色为红色" id="b2"/>
$("#b2").click(function () {
$("div").css("backgroundColor",red);
});
///<input type="button" value="改变class为mini的所有元素的背景色为红色" id="b3"/>
$("#b3").click(function () {
$(".mini").css("backgroundColor",red);
});
//<input type="button" value="改变所有的<span>元素和id为two的元素的背景色为红色" id="b4"/>
$("#b4").click(function () {
$("span,#two").css("backgroundColor",red);
});
})
</script>
（2）层级选择器
①后代选择器
语法：$("A B ")选择A元素内部的所有B元素
②子选择器
语法：$("A>B")选择A元素内部的所有B子元素
<script type="text/javascript">
//入口函数
$(function () {
// <input type="button" value="改变<body>内所有<div>的背景为红色" class="b1"/>
$("#b1").click(function () {
$("body div").css("backgroundColor","pink");
});
//<input type="button" value="改变<body>内子<div>的背景色为红色" id="b1"/>
$("#b2").click(function () {
$("body > div").css("backgroundColor","pink");
});
})
</script>
（3）属性选择器
①属性名称选择器
语法：$("A[属性名]")包含指定属性的选择器
②属性选择器
语法：$("A[属性名=‘值’]")包含指定属性等于指定值的选择器
③复合属性选择器
语法：$("A[属性名=‘值’][]...")包含多个属性条件的选择器
代码示例
//入口函数
$(function () {
// <input type="button" value="含有属性 title的div元素背景色为红色" class="b1"/>
$("#b1").click(function () {
$("div[title]").css("backgroundColor","red");
});
// <input type="button" value="属性title值等于test的div元素背景色为红色" id="b1"/>
$("#b2").click(function () {
$("div[title='test']").css("backgroundColor","red");
});
// <input type="button" value="属性title值不等于test的div元素背景色为红色" id="b1"/>
$("#b3").click(function () {
$("div[title !='test']").css("backgroundColor","red");
});
// <input type="button" value="属性title值以te开始的div元素背景色为红色" id="b1"/>
$("#b4").click(function () {
$("div[title^='te']").css("backgroundColor","red");
});
// <input type="button" value="属性title值以est结束的div元素背景色为红色" id="b1"/>
$("#b5").click(function () {
$("div[title$='est']").css("backgroundColor","red");
});
// <input type="button" value="属性title值含有es的div元素背景色为红色" id="b1"/>
$("#b6").click(function () {
$("div[title*='es']").css("backgroundColor","red");
});
// <input type="button" value="选取属性id的div元素，然后在结果中选取属性title值含有es的div元素背景色为红色" id="b1"/>
$("#b7").click(function () {
$("div[id][title*='es']").css("backgroundColor","red");
});
（4）过滤选择器
①首元素选择器
语法：:first获得选择的元素中的第一个元素
②尾元素选择器
语法：:last获得选择的元素中的最后一个元素
③非元素选择器
语法：:not(selector)不包括指定内容的元素
④偶数选择器
语法：:even偶数，从0开始计数
⑤奇数选择器
语法：:odd奇数，从0开始计数
⑥等于索引选择器
语法：:eq(index)指定索引元素
⑦大于索引选择器
语法：:gt(index)大于指定索引元素
⑧小于索引选择器
语法：:lt(index)小于指定索引元素
⑨标题选择器
语法：:header获得标题（h1-h6）元素，固定写法
//入口函数
$(function () {
// <input type="button" value="改变第一个div元素的背景为红色" class="b1"/>
$("#b1").click(function () {
$("div:first").css("backgroundColor","red");
})
// <input type="button" value="改变最后一个div元素的背景为红色" class="b2"/>
$("#b2").click(function () {
$("div:last").css("backgroundColor","red");
})
// <input type="button" value="改变class不为one的所有div元素的背景为红色" class="b3"/>
$("#b3").click(function () {
$("div:not(.one)").css("backgroundColor","red");
})
// <input type="button" value="改变索引值为偶数的div元素的背景为红色" class="b4"/>
$("#b4").click(function () {
$("div:even").css("backgroundColor","red");
})
// <input type="button" value="改变索引值为奇数的div元素的背景为红色" class="b5"/>
$("#b5").click(function () {
$("div:odd").css("backgroundColor","red");
})
// <input type="button" value="改变索引值大于3的背景色为红色" id="b6"/>
$("#b6").click(function () {
$("div:gt(3)").css("backgroundColor","red");
})
//<input type="button" value="改变索引值等于3的背景色为红色" id="b7"/>
$("#b7").click(function () {
$("div:eq(3)").css("backgroundColor","red");
})
// <input type="button" value="改变索引值小于3的背景色为红色" id="b8"/>
$("#b8").click(function () {
$("div:lt(3)").css("backgroundColor","red");
})
// <input type="button" value="改变所有的标题元素的背景色为红色" id="b9"/>
$("#b9").click(function () {
$(":header").css("backgroundColor","red");
})
})
（5）表单过滤选择器
①可用元素选择器
语法：:enabled获得可用元素
②不可用元素选择器
语法：:disabled获得不可用元素
③选中选择器
语法：:checked获得单选或多选框选中的元素
④选中选择器
语法：:selected获得下拉框选中的元素
//入口函数
$(function () {
// <input type="button" value="利用jQuery对象的val（）方法改变表单内可用<input>的值" class="b1"/>
$("#b1").click(function () {
$("input[type='text']:enabled").val("aaa");
});
//<input type="button" value="利用jQuery对象的val（）方法改变表单内不可用<input>的值" class="b2"/>
$("#b2").click(function () {
$("input[type='text']:disabled").val("aaa");
});
//<input type="button" value="利用jQuery对象的length属性获取复选框选中的个数" class="b3"/>
$("#b3").click(function () {
alert($("input[type='checkbox']:checked").length);
});
//<input type="button" value="利用jQuery对象的length属性获取下拉框中的个数" class="b4"/>
$("#b4").click(function () {
alert($("#job > option:selected").length);
});
})
244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
