原创：Jquery入门详解

                                                                             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) 关于 j query 对象的主要方法

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")

<!-- 引入 js 类库文件 -->

< 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

 

 

更多学习资源请访问这里