这是第二课,主要学习一些基本的jQuery选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lesson2 基本选择器</title>
<link rel="stylesheet" type="text/css" href="css/lesson.css" ></link>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/lesson.js"></script>
</head>
<body>
<div id="div">
</div>
<div class="div">
</div>
<div class="div">
</div>
<div class="div">
</div>
<div>
<p>111111</p>
<p>222222</p>
<p>33333333</p>
<p>444444444</p>
</div>
</body>
</html>
div{
width:200px;
height:200px;
background-color:red;
border: 2px solid blue;
}
#box > p { /*CSS 子选择器,IE6 不支持*/
color:red;
}
$(function(){
$('#div').css('background-color','blue'); //id选择器
$('.div').css('background-color','green'); //class选择器
//jQuery 核心自带的一个属性 length 或 size()方法来查看返回的元素个数
alert($('#div').length); //值为1
alert($('.div').size()); //值为3
$("div >p").css('color','white'); //jQuery 子选择器,兼容了 IE6
/*jQuery选择器在获取节点对象的时候不但简单, 还内置了容错功能, 这样避免像JavaScript
那样每次对节点的获取需要进行有效判断。*/
//$("#aaa").css('color','red'); //不存在 ID 为 aaa的元素,也不报错
//document.getElementById('aaa').style.color = 'red'; //js内置方法报错了
});
/*
* 选择器 CSS模式 jQuery 模式 描述
* 元素名 div {} $('div') 获取所有 div 元素的 DOM 对象
* ID #box {} $('#box') 获取一个 ID 为 box 元素的 DOM 对象
* 类(class) .box{} $('.box') 获取所有class为box的所有DOM对象
* 群组选择器 span,em,.box {} $('span,em,.box') 获取多个选择器的 DOM 对象
* 后代选择器 ul li a {} $('ul li a') 获取追溯到的多个 DOM 对象
* 通配选择器 * {} $('*') 获取所有元素标签的 DOM 对象
* 后代选择器 ul li a {} $('ul li a') 获取追溯到的多个 DOM 对象
* 子选择器 div > p {} $('div p') 只获取子类节点的多个 DOM 对象
* next 选择器 div + p {} $('div + p') 只获取某节点后一个同级DOM对象
* nextAll 选择器 div ~ p {} $('div ~ p') 获取某节点后面所有同级DOM对象
*/
未完待续。。。。。。。