初学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元素的背景色