jquery入门(一)

    技术2022-05-20  32

    JQuery中基本选择器的使用方法

    这是我在学习IT技术中首次接触JQuery,对于JQuery的理解我做了如下总结:

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

    2JQuery初步学习:

    (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对象的方法,但两者之间是可以转换的。其转换方式如下:

       1DOM对象转换成Jquery对象的方式

         对于一个DOM对象只需要使用$(DOM对象)即可转换成一个Jquery对象

         例:var $document=$(document);

       2Jquery对象转换成DOM对象的方式

    第一种:可以采用Jqueryget(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属性最后得到的结果是一样的。

    3Jquery中的基本选择器

    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对象的方式

           1Jquery对象返回的是一个数组对象可以采用如下方式转换

             var domObject = $("#thed")[0];

           */

       alert(($("#thed")[0]).innerHTML);

       //class匹配选择器Jquery对象

       alert($(".rdc"));

       /**

            2Jquery对象转换成DOM对象可以采用Jqueryget(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>

                                goodwell                         </td>

                             <td>

                                goodwell@qq.com

                             </td>

                         </tr>

                             <td>

                                1002

                             </td>

                             <td>

                                x_j

                             </td>

                             <td>

                                goodwell@qq.com

                             </td>

                         </tr>

                      </tbody>

                  </table>

               </div>

      </div> 

    </body>


    最新回复(0)