jQuery学习教程(二):选择器1
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:admin 阅读 621
选择器(一)1、基本选择器从最开始看到jQuery这样的选择器就让我想起了CSS的选择器,简直是同出一辙啊,CSS的选择器语法个人觉得相当的经典,那么jQuery借鉴CSS也就没有多少疑问了。其中h

选择器(一)

1、基本选择器

从最开始看到jQuery这样的选择器就让我想起了CSS的选择器,简直是同出一辙啊,CSS的选择器语法个人觉得相当的经典,那么jQuery借鉴CSS也就没有多少疑问了。

其中h1为选择器,color:red与background:#d00与声明,两者结合也即{}内称为声明块;color与background称为属性;red与#d00称为值。

其中选择器类别可分为以下类别:

标签选择器:p{CSS rules}

id选择器:#ID{CSS rules}

类选择器:.Class{CSS rules}

群组选择器:h1,h2,h3,h4,h5,h6{CSS rules}

后代选择器:div p{CSS rules}

通配选择器:*{CSS rules}

伪类选择器:a:link,a:visited{CSS rules}

另还有不常使用的多类选择器、属性选择器、部分属性选择器、相邻兄弟选择器、子选择器等,详细可参与《CSS权威手册》这本书或者http://www.w3.org/TR/CSS2/selector.html

相对应,理解jQuery中$("#ID")就不是难事了。
jQuery中基本选择器包括*,class,element,id及这种群组方式selector1,selector2,…

使用这种$的优势在于:一是写法简洁,二是支持CSS1到CSS3选择器
再就是防止document.getElementById("#id")对象不存在,造成浏览器左下角的黄色感叹号,例网页开始存在id为t1的对象,某一天突然移除而js没有做相应的处理这样就会出现js错误;使用jQuery的$你无需考虑这种问题;
当然,还要注意$()选择器返回的是对象数组,因此要判断网页中是否存在某个元素,不能使用

  if($("#t1")){       //   }  

 

 

而要使用

  if($("#t1").length>0){//或者if($("#t1")[0]){        //   }  

 

 

还是看下综合实例

  <style   type="text/css">      .normalStyle{     background:#C3D9FF;     }     .alterStyle{     background:#DDF8CC;     }     .h{     background:#fcc;     border:solid 1px #d00;       }     .button{     background:#FAFAA0;     border:solid 1px #996699;       padding:4px;     }     </style>     <script type="text/javascript" src="jQuery-1.3.2.min.js"></script>      <script type="text/javascript">      $(function(){       $("li").addClass("normalStyle")       $(".alter").addClass("alterStyle");       $("h1,h2,h3").addClass("h");       $("#btn").addClass("button");       });     </script>     </head>     <body>     <ul>     <li>选项一</li>       <li class="alter">选项二</li>      <li>选项三</li>       <li class="alter">选项四</li>      </ul>     <h1>标题一</h1>       <h2>标题二</h2>       <h3>标题三</h3>       <button id="btn">按钮</button>  

  

 

 

2、层次选择器

不用说,层次选择器的思想来自CSS;实际上稍微拓展了

$("div span")//选择<div>里所有<span>元素
$("div>span")//选择<div>元素下元素名为<span>的元素
$('prev+next')//选择紧接在prev元素后的next元素
$('prev~siblings')//选择prev元素之后的所有sibling元素

例:

  <script type="text/javascript">        $(function(){         $("ul li").css("color","#f00");         $("div>span").css("color","#008000");       $("div+span").css("color","#d00");       $("div~span").css("background","#ffc");       });  <script>  <body>       <div>            <span>文字一</span>        </div>       <span>文字二</span>         <span>文字三</span>         <ul>            <li>选项一</li>             <li>选项二</li>             <li>选择三</li>        </ul>  </body>  

  

 

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2