响应式布局章常规选择器.pptx

第3章常规选择器;学习要点：

1.简单选择器

2.进阶选择器

3.高级选择器

jQuery最核心的组成部分就是：选择器引擎。它继承了CSS的语法，可以对DOM元素的标签名、属性名、状态等进行快速准确的选择，并且不必担心浏览器的兼容性。jQuery选择器实现了CSS1~CSS3的大部分规则之外，还实现了一些自定义的选择器，用于各种特殊状态的选择。备注：课程必须有(X)html+CSS基础。;一．简单选择器;那么除了ID选择器之外，还有两种基本的选择器，分别为：元素标签名和类(class)：;警告：有个问题特别要注意，ID在页面只允许出现一次，我们一般都是要求开发者要遵守和保持这个规则。但如果你在页面中出现三次，并且在CSS使用样式，那么这三个元素还会执行效果。但如果，你想在jQuery这么去做，那么就会遇到失明的问题。所以，开发者必须养成良好的遵守习惯，在一个页面仅使用一个ID。

$(#box).css(color,red); //只有第一个ID变红，后面两个失明;jQuery选择器的写法与CSS选择器十分类似，只不过他们的功能不同。CSS找到元素后添加的是单一的样式，而jQuery则添加的是动作行为。最重要的一点是：CSS在添加样式的时候，高级选择器会对部分浏览器不兼容，而jQuery选择器在添加CSS样式的时候却不必为此烦恼。

#boxp{ //CSS子选择器，IE6不支持

color:red;

}

$(#boxp).css(color,red); //jQuery子选择器，兼容了IE6

jQuery选择器支持CSS1、CSS2的全部规则，支持CSS3部分实用的规则，同时它还有少量独有的规则。所以，对于已经掌握CSS的开发人员，学习jQuery选择器几乎是零成本。而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).length0){ //判断元素包含数量即可

$(#pox).css(color,red);

}

除了这种方式之外，还可以用转换为DOM对象的方式来判断，例如：

if($(#pox).get(0)){}或if($(#pox)[0]){} //通过数组下标也可以获取DOM对象;二．进阶选择器;三．高级选择器