jQuery选择器的核心(1)-学习纪录与交流。

jQuery中核心的选择器,与CSS中使用选择器类似。(语法基本相同)。

我们先写好基本格式吧

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery选择器的核心(1)-学习纪录与交流</title>
<meta name="keywords" content="jQuery,选择器" />
<meta name="description" content="jQuery选择器的核心(1)-学习纪录与交流" />
<style type="text/css"></style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script><!--引入jQuert文件-->
<script type="text/javascript">
//这里书写jQuery代码。
//$()函数传入一个function函数,这里的jQuery代码,就会在HTML页面加载完毕之后在执行。
//当然你也可以将内嵌的js代码写在使用js代码的HTML元素的下面,来实现js的功能
$(function(){
//这里来看我们的第一个选择器。
alert($('*').length);// *号代表选择匹配HTML页面的所有所有元素,我们来看看,一共匹配了多少?
//页面弹窗输出 11 应该也就是 匹配了11个html元素标签。我们一起数数是不是11个。
});
</script>
</head>
<body>
<div></div>
<p class="p1"></p>
<p calss="p2"></p>
<a class="p2"></a>
<a id="a1"></a>
</body>
</html>


接下来我们继续 看看jQuery还有哪哪些选择器(下面 写的是代码片段,直接放到上面完整的HTML中就可以 使用)。

//我们尝试 选择一下 HTML页面中的DIV元素标签
alert($('div').length);


这里页面弹出的应该是‘1’,因为页面中只有一个div标签


下面我们在尝试使用一下jQuery中的class选择器 来匹配一下HTML页面中的P元素标签

alert($('.p1').length);

这里页面弹出的应该是‘1’,因为页面中只有一个class类名为P1的P标签,是不是和CSS的原则器如出一辙?


我们可以看到 HTML代码底部右两个A标签,但此时 我们只想匹配 class类名为P2的A标签,但有一个P标签的class类名也是P2,这时候应该怎么办呢?

alert($('a.p2').length);

通过这种方法 就可以实现了,首先在$()函数中,写入A标签,然后再写入类名 就可以了。

最后我们在来看看jQuery何如根据HTML元素的ID来进行匹配选择。我们就匹配 HTML代码底部 id为a1的a标签吧。

alert($('#a1').length);

jQuery的核心选择器,与CSS中的选择器基本没有什么区别,当然这只是jQuery选择中的冰山一角。