1. 基本选择器
- 语法
选择器名称 | 语法 | 解释 |
标签选择器（元素选择器） | $(“html标签名”) | 获得所有匹配标签名称的于元素 |
id选择器 | $("#id的属性值") | 获得与指定id属性值匹配的元素 |
类选择器 | $(".class的属性值") | 获得与指定的class属性值匹配的元素 |
现有如下需求：
- 改变 id 为 one 的元素的背景色为 红色
- 改变元素名为<div> 的所有元素的背景色为 红色
- 改变 class 为 mini 的所有元素的背景色为 红色
- 改变所有的<span>元素和 id 为 two 的元素的背景色为红色
代码实现：
<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子元素 |
现有如下需求：
- 改变 <body> 内所有<div> 的背景色为红色
- 改变 <body> 内 子 <div> 的背景色为 红色
实现：
代码基于01-jquery选择器目录下 层次选择器.html 进行编写
<script type="text/javascript">
$(function() {
//<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
$("#b1").click(function() {
$("body div").css("backgroundColor", "red");
})
//<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
$("#b2").click(function() {
$("body>div").css("backgroundColor", "red");
});
})
</script>3. 表单属性选择器
- 语法
选择器名称 | 语法 | 解释 |
可用元素选择器 | :enabled | 获得可用元素 |
不可用元素选择器 | :disabled | 获得不可用元素 |
选中选择器 | :checked | 获得单选/复选框选中的元素 |
选中选择器 | :selected | 获得下拉框选中的元素 |
现有如下需求：
- 利用 jQuery 对象的 val() 方法改变表单内可用 元素的值
- 利用 jQuery 对象的 val() 方法改变表单内不可用 元素的值
- 利用 jQuery 对象的 length 属性获取多选框选中的个数
- 利用 jQuery 对象的 text() 方法获取下拉框选中的内容
实现
<script type="text/javascript">
$(function() {
//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
$("#b1").click(function() {
var $inputs = $("input[type='text']:enabled");
//$inputs内部有两个input的js的dom对象
for (var i = 0; i < $inputs.length; i++) {
console.log($($inputs[i]).val());
}
});
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
$("#b2").click(function() {
var $inputs = $("input[type='text']:disabled");
//$inputs内部有两个input的js的dom对象
for (var i = 0; i < $inputs.length; i++) {
console.log($($inputs[i]).val());
}
});
//<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
$("#b3").click(function() {
var $checkedInputs = $("input[type='checkbox']:checked");
console.log($checkedInputs.length);
});
// <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
$("#b4").click(function() {
var $options = $("option:selected");
//$options内部有多个下拉框选中的js的dom对象
for (var i = 0; i < $options.length; i++) {
console.log($($options[i]).text());
}
});
})
</script>
