认识jquery
来源：互联网 发布：杨洋星兵报到知乎 编辑：程序博客网 时间：2024/05/16 11:00
1.3.2 编写简单的代码----导航栏转自：www.cnblogs.com/lwcompany/archive/2011/07/29/2121164.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>1-3_2 </title> <style type="text/css"> #menu { width:300px; } .has_children{ background : #555; color :#fff; cursor:pointer; } .highlight{ color : #fff; background : green; } div{ padding:0; } div a{ background : #888; display : none; float:left; width:300px; } </style> <!-- 引入 jQuery --> <script src="../jquery-1.3.2.js" type="text/javascript"></script> <script type="text/javascript"> //等待dom元素加载完毕. $(document).ready(function(){ $(".has_children").click(function(){ $(this).addClass("highlight")//为当前元素增加hightlight类 .children("a").show().end() //将子节点的<a>元素显示出来并 //重新定位到上次操作的元素 .siblings().removeClass("highlight")//获取元素的兄弟元素，并去掉它们hithlight类 .children("a").hide(); //将兄第元素下的<a>元素隐藏 }); });</script> </head> <body> <div id="menu"> <div class="has_children"> <span>第1章-认识jQuery</span> <a>1.1-JavaScript和JavaScript库</a> <a>1.2-加入jQuery</a> <a>1.3-编写简单jQuery代码</a> <a>1.4-jQuery对象和DOM对象</a> <a>1.5-解决jQuery和其它库的冲突</a> <a>1.6-jQuery开发工具和插件</a> <a>1.7-小结</a> </div> <div class="has_children"> <span>第2章-jQuery选择器</span> <a>2.1-jQuery选择器是什么</a> <a>2.2-jQuery选择器的优势</a> <a>2.3-jQuery选择器</a> <a>2.4-应用jQuery改写示例</a> <a>2.5-选择器中的一些注意事项</a> <a>2.6-案例研究——类似淘宝网品牌列表的效果</a> <a>2.7-还有其它选择器么？</a> <a>2.8-小结</a> </div> <div class="has_children"> <span>第3章-jQuery中的DOM操作</span> <a>3.1-DOM操作的分类</a> <a>3.2-jQuery中的DOM操作</a> <a>3.3-案例研究——某网站超链接和图片提示效果</a> <a>3.4-小结</a> </div> </div> </body> </html> ?1 1.4 jQuery对象和DOM对象 ?1 1.4.1 DOM对象和jQuery对象简介 ?1 1.DOM对象 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <h3>例子</h3> <p title="选择你最喜欢的水果.">你最喜欢的水果是</p> <ul> <li>苹果</li> <li>橘子</li> <li>菠萝</li> </ul> </body> </html> ?1 可以把上面的HTML结构描述为一棵DOM树 ?1 ?1 ?1 ?1 ?1 <A href="http://images.cnblogs.com/cnblogs_com/lwcompany/201108/201108121429534675.png"><IMG style="BACKGROUND-IMAGE: none; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px" title=dom树形简图2 border=0 alt=dom树形简图2 src="http://images.cnblogs.com/cnblogs_com/lwcompany/201108/201108121429572850.png" width=340 height=168></A> 在这棵DOM树中，<h3>、<p>、<ul>能及<ul>的3个<li>子结点都是是dom元素结点，可以通过javascript中的getElementsByTagName或者getElementById来获取元素节点。像这样得到的DOM元素就是DOM对象。dom对象可以使用javascript中的方法，示例如下?12 var domObj= document.getElementById("id");//获得DOM对象 var ObjHTHML= domObj.innerHtml; //使用javascript中的方法-innerHTML ?1 2.jQuery对象 ?1 jQuery对象是通过jQUERY包装DOM对象后产生的对象。 ?1 JQUERY对象是JQuery独有的。如果一个对象是jQuery对象。那么就可以使用jQuery里的方法。例如： ?1 $(“#foo”).html();//获得id为foo的元素内的html代码.html()是jQuery里的方法 这段代码等同于?1 document.getElemmentById("foo").innerHTML; 在JQuery对象中无法使用DOM对角的任何方法 ?1 1.4.2 JQuery对象和DOM对象的相互转换 ?1 ?1 如果获取的对象JQuery对象，那么在变量前面加上$,例如： ?1 var $varibale= jQuery对象; ?1 如果获取是DOM对象，则定义如下<PRE class="brush: php; auto-links: true; collapse: false; first-line: 1; gutter: true; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: true;">var varible=DOM对象;</PRE> ?1 1.jQuery对象转成DOM对象 ?1 jQuery对象不能使用DOM中的方法，但如果对JQuery对象所提供的 ?1 方法不熟悉，或者JQuery没有封装想要的方法，不得不使用DOM对象 ?1 的时候,有以下两种处理方法. ?1 [index]和get(index) ?1 1. jquery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象 ?123 var $cr=$("#cr"); //JQuery对象 var cr =$cr[0]; //DOM对象 alert(cr.checked) //检测这个checkbox是否被选中了 ?1 2.是jquery本身提供的，通过get(index)方法得到相应的DOM对象。 ?123 var $cr=$("#cr"); //JQUERY对象 var cr=$cr.get(0);//DOM对象 alert(cr.checked) //检测这个checkbox是否被选中了 ?1 ?1 1.4.3 实例研究 ?1 下面举个例子，来加深对jQuery对象和DOM对象的理解 ?1 某个注册页面，用户必须选中页面下方的”同意并接受注册协议复选框，否则不能提交”。 ?1 ?1 <A href="http://images.cnblogs.com/cnblogs_com/lwcompany/201108/201108121430029323.png"><IMG style="BACKGROUND-IMAGE: none; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px" title=image border=0 alt=image src="http://images.cnblogs.com/cnblogs_com/lwcompany/201108/201108121430033095.png" width=327 height=240></A> ?1 ?1 <input type="checkbox" id="cr"/><label for="cr">我已经阅读了上面制度.</label> ?1 然后编写javaScript部分.通过$(“#cr”)获取复选框元素，然后通过判断复选框是否选中，来执行下一步操作。 //等待dom元素加载完毕. $(document).ready(function(){ var $cr = $("#cr"); //jQuery对象 $cr.click(function(){ if($cr.is(":checked")){ //jQuery方式判断 alert("感谢你的支持!你可以继续操作！"); } }) }); 1.5解决jQuery和其它库的冲突。
