jquery选择器操作一

1.jquery符号说明：

 1）  $（）用来制造jquery对象，转换为jquery对象后才能对其进行jquery操作；反之如果取得的是dom对象应该用dom对象操作的方法，而不能使用jquery对象的操作方法

 2） jquery对象和dom对象转化：jquery通过选择器$("条件")来获取对象、dom通过w3c规定的方法获取对象

<script type="text/javascript">var domObj = document.getElementsByTagName("h3")[0]; // Dom对象var $jQueryObj = $(domObj);  //jQuery对象alert("DOM对象："+domObj.innerHTML);//弹出‘例子’alert("jQuery对象："+$jQueryObj.html());//弹出‘例子’</script><h3>例子</h3>

将dom对象加上$就可转化为jquery对象：jqueryObejct = $(dom)；

将jquery对象转化为dom对象：i.var domObject = $jqueryObejct【0】

                                                       ii.var domObject = $jqueryObejct.get【0】

2.jquery选择器分类及其说明：

jquery选择器写法简洁、支持css选择器、强大的事件处理机制

1）基本选择器

2）层次选择器

说明：$("prev + next") 等价于 $("prev").next("next")

           $("prev ~ siblings") 等价于 $("prev").nextAll("siblings")

3）基本过滤选择器

4）内容过滤选择器

5）可见性过滤选择器

可见性过滤选择器需要注意的是，选取hidden标签的时候，不仅包括样式属性display为none的元素，也包括表单隐藏域<input hidden="hidden">，以及visibility：hiiden的元素

本节测试代码：

例子一：body code:

<div id="divId">id为divId的div元素</div><div class="one">class为one的div元素</div><div class="two"><p>class为two的子元素p</p><a>class为two的子元素a</a></div>

js code:

//输出id为divId的文本内容alert($("#divId").text());//class为one的div元素背景色改为#295$(".one").css("background-color","#295");//输出a标签的文本内容alert($("a").text());//所有的div背景色改为#259$("*").css("background-color","#259");//输出class为one,id为divId的文本内容alert($(".one,#divId").text());

例子二：

css code：

<style type="text/css">    div,span,p {width:140px;height:140px;margin:5px;background:#aaa;border:#000 1px solid;float:left;font-size:17px;font-family:Verdana;}div.mini { width:55px;height:55px;background-color: #aaa;font-size:12px;}div.hide { display:none;}</style>

body code:

<button id="reset">手动重置页面元素</button><input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /><h3>基本选择器.</h3><!-- 控制按钮 --><input type="button" value="选择 id为 one 的元素." id="btn1"/>  <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/><input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/><input type="button" value="选择 所有的元素." id="btn4"/><input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/><br /><br /><!-- 测试的元素 --><div class="one" id="one" >id为one,class为one的div<div class="mini">class为mini</div></div><div class="one"  id="two" title="test" >id为two,class为one,title为test的div.<div class="mini"  title="other">class为mini,title为other</div><div class="mini"  title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"  title="tesst">class为mini,title为tesst</div></div><div style="display:none;"  class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"/></div><span id="mover">正在执行动画的span元素.</span>

js code:

$("#reset").click(function(){$("*").removeAttr("style");});//给id为mover的元素添加动画.function animateIt() {$("#mover").slideToggle("slow", animateIt);}animateIt();$("input[type=button]").click(function(){if($("#isreset").is(":checked")){$("#reset").click();}});//btn1 选择 id为 one 的元素$("#btn1").click(function(){$("#one").css("background-color","#f00");});//btn2 选择 class 为 mini 的所有元素$("#btn2").click(function(){$(".mini").css("background-color","#0f0");});//btn3 选择 元素名是 div 的所有元素$("#btn3").click(function(){$("div").css("background-color","#00f");});//btn4 选择 所有的元素$("#btn4").click(function(){$("*").css("background-color","#59f");});//btn5 选择 所有的span元素和id为two的元素$("#btn5").click(function(){$("span,#two").css("background-color","#59f");});