1.基本选择器
<style type="text/css">
div {
background: gray;
width: 200px;
height: 100px;
}
</style>
<script src="js/jquery-1.8.3.js"></script>
<script>
// 所谓的jQuery选择器就是获取jQuery对象的不同方式,jQuery中支持多种选择器
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 基本选择器
// 1.标识选择器,通过标记的id属性来获取jQuery对象,语法:$("#id")值
// 2.类选择器,通过标记的class属性来获取jQuery对象,语法:$(".class值")
// 3.标记选择器,通过标记名称来获取jQuery对象,语法:$("标记名称")
// 4.选择页面中所有标记选择器,语法:$("*")
// 5.组合选择器,也就是同时使用多种选择器,选择器之间通过逗号分隔,语法:$("A,B")
$(function () {
// 1.标识选择器,通过标记的id属性来获取jQuery对象,语法:$("#id")值
$("#btn01").click(function () {
// 选择id为one的元素,并且改变其CSS
$("#one").css("background","red");
});
// 2.类选择器,通过标记的class属性来获取jQuery对象,语法:$(".class值")
$("#btn02").click(function () {
// 选择class为two的元素
$(".two").css("background","red");
});
// 3.标记选择器,通过标记名称来获取jQuery对象,语法:$("标记名称")
$("#btn03").click(function () {
// 选择所有div元素
$("div").css("background","yellow");
});
// 4.选择页面中所有标记选择器,语法:$("*")
$("#btn04").click(function () {
//选择所有元素
$("*").css("background","yellow");
});
// 5.组合选择器,也就是同时使用多种选择器,选择器之间通过逗号分隔,语法:$("A,B")
$("#btn05").click(function () {
// 选择id为one与所有span元素
$("#one,span").css("background","yellow");
});
})
</script>
我是span标签
2.表单相关元素选择器:
文本02:
文本03:
文本04:
读书 美食 旅游 音乐 购物
北京 上海 广州 深圳 杭州
选择可用文本框并修改其值 选择不可用文本框并修改其值 选择复选框被选中的元素 选择下拉列表中被选中的元素
3.表单input框选择器:
// $("#btn05").click(function () {
// //选择被选中复选框并输出用户选择的值
// var $checkbox = $(“form :checkbox:checked”);
// $checkbox.each(function (i, domObj) {
// alert(“你选中的选项是:” + domObj.value);
// });
// });
//表单input框选择器。
$("btn05").click(function(){
var $checkbox = $("form :checkbox:checked");
$checkbox.each(function(i,domobj){
alert("您选中的选项是:" + domobj.value);
})
})
})
</script>
用户名:
密 码:
性 别: 男 女
照 片:
兴 趣: 音乐 美食 旅游 购物
选择文本输入框并输出用户输入的值 选择密码输入框输出用户输入的密码 选择单选框的value属性值 选择文件上传框并输出用户选择的文件 选择复选框并输出用户选择的值