WEB前端 -- 简单选择器

1.简单选择器

在使用JQuery选择器时，首先必须使用“$()”函数来包装CSS规则。而CSS规则作为参数传递到JQuery对象内部后，再返回包含页面中对应元素的JQuery对象。然后，就可对获取的DOM节点进行行为操作了。

#box{         //使用ID选择器的CSS规则
  color:red;  //将ID="box"的元素字体颜色变为红
}

在JQuery选择器中，可以使用下面的方式获取同样的结果：

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

下面可以对比在JavaScript和CSS中的写法

在JavaScript中的写法是：

$(function(){
  $('#box').css('color','blue');//添加一个行为，这个行为是添加样式
});

在CSS中的写法是：

#box{color:blue;}

除ID选择器外，还有2种基本的选择器，分别为：元素标签名和类（class）

简单选择器

选择器	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)选择器，返回多个元素

2.JQuery选择器和CSS选择器

JQuery选择器的写法与CSS选择器十分类似，只不过他们的功能不同。CSS找到元素后添加的是单一的样式，而JQuery添加的是动作行为。最重要的一点是：CSS在添加样式的时候，高级选择器会对部分浏览器不兼容，而JQuery选择器在添加CSS样式时不会。

#box>p{          //CSS子选择器，IE6不兼容
  color:red;
}
$('#box>p').css('color','blue');//JQuery子选择器，兼容IE6

JQuery选择器支持CSS1、CSS2的全部规则，支持CSS3部分实用的规则，同时它还有少量独有的规则。JQuery选择器在获取节点对象时不但简单，还内置了容错功能，这样避免像JavaScript那样每次对节点的获取需要进行有效的判断。

$('#box').css('color','red');//不存在ID="box"的元素，也不报错
document.getElementById('box').style.color='red';//报错

原因：JQuery内部进行了判断，而原生的DOM节点获取方法并没有进行判断，故导致一个错误，原生方法可这么判断解决这个问题。

if(document.getElementById('box')){  //先判断是否存在这个对象
document.getElementById('box').style.color='red';
}