常规选择器——简单选择器

   jQuery最核心的组成部分就是:选择器引擎。它继承了CSS的语法,可以对DOM元素的标签名属性名状态(?)等进行快速准确的选择,并且不必担心浏览器的兼容性。jQuery选择器实现了CSS1~CSS3的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择。

   简单选择器

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

   常规选择器.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>常规选择器</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="box">
        常规选择器
    </div>
</body>
</html>

   使用ID选择器的CSS规则:

#box {
    color: red; //添加样式-将ID为box的元素字体颜色变红
}

   在jQuery选择器(ID选择器)里,我们使用如下的方式获取同样的结果:

$("#box").css("color", "blue");//添加一个行为,这个行为是添加样式

   那么除了ID选择器之外,还有两种基本的选择器,分别为:元素标签名和类(class):

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

   举例说明:

   常规选择器.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>常规选择器</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="ye_demo.js"></script>
    <link rel="stylesheet" type="text/css" href="ye_style.css">
</head>
<body>
    <div class="pox">常规选择器</div>
    <div class="pox">常规选择器</div>
    <div class="pox">常规选择器</div>
</body>
</html>

   CSS规则:

div {
    color: orange;
}

   在jQuery选择器(元素名选择器)里,我们使用如下的方式获取同样的结果:

$("div").css("color", "maroon");

   又如CSS规则:

.pox {
    color: red;
}

   在jQuery选择器(类选择器)里,我们使用如下的方式获取同样的结果:

$(".pox").css("color", "green");

   为了证明ID返回的是单个元素,而元素标签名和类(class)返回的是多个,我们可以采用jQuery核心自带的一个属性length或size()方法来查看返回的元素个数。

   如,html代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>常规选择器</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="ye_demo.js"></script>
    <link rel="stylesheet" type="text/css" href="ye_style.css">
</head>
<body>
    <div class="pox">常规选择器</div>
    <div class="pox">常规选择器</div>
    <div class="pox">常规选择器</div>
</body>
</html>
alert($(".pox").size()); //3
alert($("div").size()); //3

   当html代码变成如下时:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>常规选择器</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="ye_demo.js"></script>
    <link rel="stylesheet" type="text/css" href="ye_style.css">
</head>
<body>
    <div id="pox">常规选择器</div>
    <div id="pox">常规选择器</div>
    <div id="pox">常规选择器</div>
</body>
</html>
alert($("#pox").size()); //1,后面2个失明了

   同理,你也可以直接使用jQuery核心属性来操作:

alert($("#pox").length); //1,后面2个失明了

   警告:有个问题特别要注意,ID在页面只允许出现一次,我们一般都是要求开发者要遵守和保持这个规则。但如果你在页面中出现三次,并且在CSS使用样式,那么这三个元
素还会执行效果。但如果,你想在jQuery这么去做,那么就会遇到失明的问题。所以,开发者必须养成良好的遵守习惯,在一个页面仅使用一个ID。

   要使第二个<div>元素的字体颜色为红色,那么

$("div").eq(1).css("color", "red");

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

   例,html代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>常规选择器</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="ye_demo.js"></script>
    <link rel="stylesheet" type="text/css" href="ye_style.css">
</head>
<body>
    <div id="box">
        <p>常规选择器</p>
        <p>常规选择器</p>
        <p>常规选择器</p>
        <div>
            <p>常规选择器</p>
            <p>常规选择器</p>
            <p>常规选择器</p>
        </div>
    </div>
</body>
</html>

   CSS规则如下:(高级选择器)

#box > p {
    color: red; //CSS子选择器,IE6不支持
}

   但是

$("#box > p").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"; //由于不存在ID为pox的元素,所以报错

   因为jQuery内部进行了判断,而原生的DOM节点获取方法并没有进行判断,所以导致了一个错误,原生方法可以这么判断解决这个问题:

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

   那么对于缺失不存在的元素,我们使用jQuery调用的话,怎么去判断是否存在呢?因为本身返回的是jQuery对象,可能会导致不存在元素存在与否,都会返回true。很多情况下有动态DOM生成的问题,会导致执行不存在的ID选择器

if($("#pox").size() > 0) { //判断元素包含数量即可
    $("#pox").css("color", "red");
}

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

if($("#pox").get(0)) {
    ...
}

   或者

if($("#pox")[0]) { //通过数组下标也可以获取DOM对象
    ...
}

 

posted @ 2016-04-19 18:05  叶十一少  阅读(310)  评论(0编辑  收藏  举报