jQuery的选择器—基本选择器

初学jQuery，为了更好的系统学习好jQuery，今天特意把自己学习心得归纳一下，贴上来与初学者共进退，今天我主要总结的是jQuery的基本选择器。
jQuery的基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它主要是通过元素的ID,CLASS,元素的标签ELEMENT等来查找HTML中的DOM元素。在网页中，每一个id名称只能使用一次，class允许重复使用。在jQury应用中，可以使用这些基本选择器来完成绝大多数的工作，下面我们主要来看看其具体的实现过程。为了更好的学习，我们先在这里列出一个HTML标签代码：

<div id="mydiv">
    <div class="mini">我是一个名为mini的div标签</div>
    <div class="mini">我是一个名为mini的div标签</div>
    <div class="mini">我是一个名为mini的div标签</div>
    <p>我是一个段落p标签</p>
    <span>我是一个行内span标签</span>
<div>

 
接着我们分别来看看这几种基本选择器的应用
一、ID选择器
选择器：#id
描述：根据给定的id匹配一个元素
返回：单个元素
示例：

<script type="text/javascript">
    $(document).ready(function(){
        //id选择器
        $("#mydiv").css("background","#f96");
     });
</script>

 
功能：改变id为mydiv的元素的背景色
二、class选择器
选择器：.class
描述：返回给定的类名匹配的元素
返回： 集合元素
示例：

<script type="text/javascript">
    $(document).ready(function(){
        //class选择器
        $(".mini").css("background","#f96");
     });
</script>

 
功能：改变class为mini的所有元素的背景色
三、标签element
选择器：element
描述：根据给定的元素名匹配元素
返回：集合元素
示例：

<script type="text/javascript">
    $(document).ready(function(){
        //element选择器
        $("div").css("background","#f96");
     });
</script>

 
功能：改变元素名是<div>的所有元素的背景色
四、所有元素*
选择器：*
描述：改变匹配的所有html标签元素
返回值：集合元素
示例：

<script type="text/javascript">
    $(document).ready(function(){
        //*选择器
        $("*").css("background","#f96");
     });
</script>

 
功能：改变所有html元素标签的背景色
五、selector1、selector2、....selectorN
选择器：selector,selector2,...selectorN
描述：将每一个选择器匹配到的元素合并后一起返回
返回：集合元素
示例：

<script type="text/javascript">
    $(document).ready(function(){
        //selector1,selector2,...selectorN选择器
        $(".mini,p").css("background","#f96");
     });
</script>

 
功能：改变class名为mini和段落p元素的背景色
上面列出的就是我们在jQuery最基本，最常用的选择器，希望此篇对初学者有一定的帮助，我们在后面还会继续发布jQuery的其他选择器的方法：层次选择器，感兴趣的朋友可以观注我的网站更新。
下一节：《jQuery的选择器——层次选择器》
第三节：《jQuery的选择器——基本过滤选择器》
第四节：《jQuery的选择器——内容过滤选择器》
如需转载请注明出处：W3CPLUS