Jquery基本选择器 层次选择器 过滤选择器 表单选择器使用示例 带注释
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Jquery示例</title>
<style type="text/css">
#menu {
width:300px;
}
.has_children{
background : #555;
color :#fff;
cursor:pointer;
}
.highlight{
color : #fff;
background : green;
}
div{
padding:0;
}
div a{
background : #888;
display : none;
float:left;
width:300px;
}
</style>
<!-- 引入 jQuery -->
<script src="http://static.blog.csdn.net/scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function () {
$(".has_children").click(function () {
$(this).addClass("highlight") //为当前元素增加highlight类
.children("a").show().end() //将子节点的a元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight") //获取元素的兄弟元素，并去掉他们的highlight类
.children("a").hide(); //将兄弟元素下的a元素隐藏
});
//------------------------------------------------------------------
//在一个id为table的表格的tbody中，如果每行最后一列中的checkbox没有被禁用
//则把这行的背景设为红色
$("#table>tbody>tr:has(td:last:has(:checkbox:enabled))").css("background", "red");
//------------------------------------------------------------------
var obj = $("#cr"); //jQuery对象
obj.click(function () {
if (obj.is(":checked")) { //jQuery方式判断是否选中
alert("感谢你的支持!你可以继续操作！");
}
})
//-----------------------基本选择器----------------------------------
// 所有的span元素和id为two的div元素
$('#btn5').click(function () {
$('span,#two').css("background", "#bfa");
});
//-----------------------层次选择器-------------------------------
// 选择 body内的所有div元素.
$('#btn1').click(function () {
$('body div').css("background", "#bbffaa");
})
//在body内的选择 元素名是div 的子元素.
$('#btn2').click(function () {
$('body > div').css("background", "#bbffaa");
})
//选择 所有class为one 的下一个div元素.
$('#btn3').click(function () {
$('.one + div').css("background", "#bbffaa");
})
//选择 id为two的元素后面的所有div兄弟元素.
$('#btn4').click(function () {
$('#two ~ div').css("background", "#bbffaa");
})
//------------------------过滤选择器--------------------------------
//选择第一个div元素.
$('#btn1').click(function () {
$('div:first').css("background", "#bfa");
})
补充：web前端 , JavaScript ,
