Jquery详解（一）

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即可。

jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。

 

一、下面就写一个最简单的Jquery案例：

<!-- 第一步：引入jquery文件 -->

      <script type="text/javascript" src="./js/jquery-1.4.4.js"></script>

 

    <script type="text/javascript">

       /**

          讲解第一种:DOM对象转换成Jquery对象的方式

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

            var document = window.document;//DOM对象

            实现转换方式如下：

            var $document=$(document);//$()从哪里来 到底从哪里来？

 

       */

       /**Jquery的页面载入事件处理方式 */

       $(document).ready(function (){  //加载html 立即加载

           alert("第一个Jquery的案例")

       });   

      

       /**理解：

               1、Jquery的引入方式

               2、$的由来

               3、DOM对象与Jquery对象转换

               4、理解匿名函数的处理*/

</script>

 

二、下面介绍一下基本选择器：

<1>：Jquery中的基本选择器

    1、id选择器

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

    2、class选择器

        alert($(".rdc").innerHTML);

    3、元素选择器器

             alert($("tr"));

    4、*

             alert($("*"));

    5、并列选择器 用英文的逗号区分

             alert($("tr,tr.rdc")[$("tr,tr.rdc").length-1].innerHTML)

<2>：重点介绍了Jquery对象转换成DOM对象的方法

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

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

    2、可以采用Jquery中get(index)方法获取

get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象

<3>：重点介绍Jquery对象中的get(index)方法,size()方法,length属性

 

        alert(($("tr")[$("tr").size()-1]).innerHTML);

      alert(($("tr")[$("tr").length-1]).innerHTML);

 

三、

      层次元素关系

               1、祖先关系   空格符号

                                  var $frmipts = $("div input");

               2、父子关系   大于符号

                                  var $ipt = $("form>input");

               3、紧跟的关系  +符号

                                  var $lipts=$("label+input");

               4、紧跟后的所有兄弟关系  ~符号

                                  var $fipts = $("form~input");

                                  $fipts.css("background-color","yellow");

           CSS样式

               1、css("");带有一个参数是获取其属性的值

               2、css("","");为其对象设置一个指定的属性和属性值

                                  var $fipts = $("form~input");

                                  $fipts.css("background-color","yellow");

               3、css(properties);把一个“名/值对”对象设置为所有匹配元素的样式属性 {"":"","":""...};

 

四、

      简单选择器

              1、：first 匹配的第一个

                                  var $tr1 = $(".rdc:first");

              2、：last 匹配的最后一个

                                  var $ltr = $(".rdc:last");

              3、：lt(index) 小于某个的

                                  $("tr:lt(1)").css("background-color","green");

              4、：gt(index) 大于某个的;

                                  $("tr:gt(1)").css("background-color","green");

              5、：eq(index) 等于某个  相当于过滤器中的.eq(index)

                                  $("tr:eq(1)").css("background-color","green");

              6、：even 奇数行 

                                  $("tr:even").css("background-color","green");

              7、：odd  偶数行

                                  $("tr:odd").css("background-color","green");

              8、：header 匹配h1,h2 h3 等标题

                                  alert($(":header").html());

              9、：not 除去匹配的(剩下的)

                                  $("tr:not(:last)").css("background-color","red");

          过滤器：

                .eq(index)匹配某个

          属性中html代码

             .html()返回整个html文本

                                  alert($tr1.html());

          属性的文本

             .text();返回这个html代码中的文本内容 如果是多个就组合文本内容并返回

                    alert($tr1.text());