jQuery学习笔记之二——常规选择器

jQuery 最核心的组成部分就是： 选择器引擎。 它继承了 CSS 的语法， 可以对 DOM 元素的标签名、 属性名、 状态等进行快速准确的选择， 并且不必担心浏览器的兼容性。

简单选择器
#box { //使用 ID 选择器的 CSS 规则
color:red; //将 ID 为 box 的元素字体颜色变红
}在jQuery 选择器里，我们使用如下的方式获取同样的结果：

$('#box').css('color', 'red'); //获取 DOM 节点对象，并添加行为

选择器	CSS 模式	jQuery 模式	描述
元素名	div {}	$('div')	获取所有 div 元素的 DOM 对象
ID	#box {}	$('#box')	获取一个 ID 为 box 元素的 DOM 对象
类(class)	.box{}	$('.box')	获取所有 class 为 box 的所有 DOM 对象

$('div').css('color', 'red'); //元素选择器，返回多个元素
$('#box').css('color', 'red'); //ID 选择器，返回单个元素
$('.box').css('color', 'red'); //类(class)选择器，返回多个元素

jQuery 核心自带的一个属性 length 或 size()方法来查看返回的元素个数。
alert($('div').size()); //3 个
alert($('#box').size()); //1 个，后面两个失明了
alert($('.box').size()); //3 个

同理，你也可以直接使用 jQuery 核心属性来操作：
alert($('#box').length); //1 个，后面失明了

$('#box').css('color', 'red'); //只有第一个 ID 变红，后面两个失明

jQuery 选择器的写法与 CSS 选择器十分类似，只不过他们的功能不同。 CSS 找到元素
后添加的是单一的样式，而 jQuery 则添加的是动作行为。最重要的一点是： CSS 在添加样
式的时候， 高级选择器会对部分浏览器不兼容， 而 jQuery 选择器在添加 CSS 样式的时候却
不必为此烦恼。
#box > p { //CSS 子选择器， IE6 不支持
color:red;
}
$('#box > p').css('color','red'); //jQuery 子选择器，兼容了 IE6

jQuery 选择器在获取节点对象的时候不但简单， 还内置了容错功能， 这样避免像 JavaScript
那样每次对节点的获取需要进行有效判断。
$('#pox').css('color', 'red'); //不存在 ID 为 pox 的元素，也不报错
document.getElementById('pox').style.color = 'red'; //报错了

因为 jQuery 内部进行了判断，而原生的 DOM 节点获取方法并没有进行判断，所以导
致了一个错误，原生方法可以这么判断解决这个问题：
if(document.getElementById('pox')) { //先判断是否存在这个对象
document.getElementById('pox').style.color = 'red';
}

那么对于缺失不存在的元素，我们使用 jQuery 调用的话，怎么去判断是否存在呢？因
为本身返回的是 jQuery 对象，可能会导致不存在元素存在与否，都会返回 true。
if($('#pox').length > 0) { //判断元素包含数量即可
$('#pox').css('color', 'red');
}

除了这种方式之外，还可以用转换为 DOM 对象的方式来判断，例如：
if($('#pox').get(0)) {} 或 if($('#pox')[0]) {} //通过数组下标也可以获取 DOM 对象