Jquery入门详解

RedArmyChen · 发表于 2013-1-29 10:53:26

JQuery入门介绍
1、JQuery概述：Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。其宗旨是写更少的代码,做更多的事情。
2．JQuery初步学习：

(1) Jquery对象的引入方式：<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>(2) 加载页面（有两种方式加载）：Jquery的页面载入事件处理方式$(document).ready(function(){ });// 加载html 立即加载或 $(function(){ }); (3) DOM对象与JQuery对象之间进行相互转化DOM对象是不能使用Jquery中的方法的. JQuery中的对象也不能使用DOM对象的方法，但两者之间是可以转换的。其转换方式如下： 1．DOM对象转换成Jquery对象的方式对于一个DOM对象只需要使用$(DOM对象)即可转换成一个Jquery对象例：var $document=$(document); 2．Jquery对象转换成DOM对象的方式第一种：可以采用Jquery中get(index)方法获取get(index)----取得其中一个匹配的元素。 index表示取得第几个匹配的元素。它返回的是一个DOM对象例：var domObject = $(".rdc").get(0); 第二种：Jquery对象返回的是一个数组对象可以采用如下方式转换，var domObject = $("#thed")[index]; index是数组对象的下标例：var domObject = $("#hed")[0];(4) 关于jquery对象的主要方法get(index)方法, Jquery对象转换成DOM对象 size()方法,获取query对象的长度例：alert(($("tr")[$("tr").size()-1]).innerHTML);length属性例： alert(($("tr")[$("tr").length-1]).innerHTML);注：使用size()方法与length属性最后得到的结果是一样的。3、Jquery中的基本选择器id选择器 ID匹配的选择器Jquery对象例：$("#thed")class选择器 class匹配选择器Jquery对象例：$(".thed")元素选择器根据给定的元素名称获取Jquery对象例：$("tr")* 匹配所有的元素的Jquery对象例：$("*")并列选择器匹配所有选择器的Jquery组合对象，用英文的逗号区分例：$("tr,tr.rdc")<script type="text/javascript" src="js/jquery-1.4.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ //ID匹配的选择器Jquery对象 //alert($("#thed")); /**转换成DOM对象的方式 1、Jquery对象返回的是一个数组对象可以采用如下方式转换 var domObject = $("#thed")[0]; */ alert(($("#thed")[0]).innerHTML); //class匹配选择器Jquery对象 alert($(".rdc")); /** 2、Jquery对象转换成DOM对象可以采用Jquery中get(index)方法获取 get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象 */ var domObject=$(".rdc").get(0); alert(domObject.innerHTML); //匹配所有的元素的Jquery对象 alert($("*")); alert($("*").get(0).innerHTML); //根据给定的元素名称获取Jquery对象 alert($("tr")); /**采用第一种方式把$("tr")转换成DOM对象*/ alert(($("tr")[$("tr").size()-1]).innerHTML); alert(($("tr")[$("tr").length-1]).innerHTML); //匹配所有选择器的Jquery组合对象 alert($("tr,tr.rdc")); alert(($("tr,tr.rdc")[$("tr,tr.rdc").length-1]).innerHTML); }) </script>案例解析：此javacript中介绍了将jquery对象与dom对象之间的转换；使用了get(index) size()方法以及length属性附带body代码： <body> <div> <div> <h1> 选择器的使用方式</h1> </div> <div><table border="1px" cellpadding="0" cellspacing="0"><thead><tr id="thed"><th>序号</th><th>名称</th><th>邮箱</th></tr></thead><tbody id="tbdy"><tr class="rdc"><td>1001</td><td>redarmy_chen</td><td>redarmy_chen@qq.com</td></tr><td>1002</td><td>x_j</td><td>redarmy_chen@qq.com</td></tr></tbody></table></div> </div> </body>上内容归redarmy_chen总结创建,如需转载请添加出处，如有疑问请发送到redarmy_chen@qq.com

		自动登录	找回密码
密码			立即注册