您的位置：首页 > Web前端 > JQuery

【3】jQuery学习——入门jQuery选择器之基本选择器

2012-07-27 13:54 363 查看

在开篇之前，要唠叨唠叨，我们在学jq的时间中有一半时间是在练习如何快速、准确的获取到自己的要添加效果的元素标签名。

还有就是我们无论何时，都要记住的一点，就是通过jQuery选择器获取的jQuery对象任何时候都是一组元素。

现在我们就了解下基本选择器有那几个？

通用选择器：*
id选择器：  #element
类选择器：  .element
标签选择器：element

当然这里还有另外2个，但是感觉是层级对象的获取，那我们就在这里一并说下，注意括号里面的逗号和空格：

$("#a,.b,p")    //表示获得ID是a的元素和使用了类样式b的元素以及所有的p元素
$("#a .b p")    //表示获得了ID是a的元素所包含的使用了类样式的b元素中的所有的p元素

好了，下面我们就来仔细了解下这些选择器吧

*$("")**	这个获取的是HTML文档中的所有的元素
$("#cssid")	选择id值等于”cssid”的元素，注意:在一个html文档中id是唯一的，也即id为 “cssid”不能出现两次（虽然即使出现了两次浏览器也可以解释，但是这是不规范的）。这个ID选择器获取jQuery对象也是个元素集合，但是只有一个元素。将这个jQuery对象转化为DOM对象也可以这样$(“#cssid”)[0]
$(".myClass")	获取的是HTML文档中所有的class为“myClass”的元素集合
$("标签名")	例如$(“div”)获取的就是HTML文档中的所有的div元素的jQuery对象集合
$("selector1,selector2,selector3…selectorN")	这种选择器叫做组选择器。例如：$(“span,#two”)选取所有的span标签元素和id=two的元素。上面我说的那两个像层级对象获取就是这个的表现。

ps.上面的就是基本选择器，是不是够基本，当然，到了后面选择器会越来越多，记起来会很麻烦，所以这个都要去练习，就像老师说的：“好记性不如烂笔头”，多练吧。

同时文章参考梦三秋和w3cfuns网站

===========================================================================

这里是做了w3cfuns网站的作业，嘿嘿，效果还不错。

【1】id选择器

层级对象的获取

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>层级对象的获取</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
alert("例题说明：请在有色的区域上进行点击。")
$("#a").click(function(){
alert("你在<div id=\"a\"></div>区域上点击了\n\njQuery根据ID选择器获得元素的方法$(\"#a\")或者$(\"#main #a\")");
})
$("#main #a .b").click(function(){
alert("你在<div class=\"b\"></div>区域上点击了\n\njQuery获得元素的方法有多种:\n$(\".b\")\n$(\"#a .b\")\n$(\"#main #a .b\")");
})
$("#main #a .b p").click(function(){
alert("你在<p></p>区域上点击了\n\njQuery获得元素的方法有多种:\n$(\"p\")\n$(\".b p\")\n$(\"#a .b p\")\n$(\"#main #a .b p\")");
})
})
</script>
<style type="text/css">
*{margin:0; padding:0;}/*为了方便所以使用了*选择器，一般情况不建议，因为css2.0中标签就多达84个，会影响页面的加载速度。*/
p,#a,.b{cursor:pointer;}
#main,#a,.b,p{margin:0 auto;}
#main{width:600px; height:350px; border:1px #000 solid;}
#a{height:300px; background:#0c0;}
#main #a .b{width:100px; height:100px;background:#0f0;}
#main #a .b p{width:50px; height:50px;background:#000;}
</style>

</head>

<body>
<div id="main">
<div id="a">
<div class="b">
<p></p>
</div>
</div>
</div>
</body>
</html>

这里要说下，如果你点击过层级对象的获取的代码，你就会发现一个很有趣的时候，弹窗不止弹了一次，这是产生冒泡了，现在这个我们不要去管，等以后会说。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航