jQuery学习总结

jQuery：

          流行的js 类库.

          市场用得比较多两个框架： jQuery 比较适合做一些互联网 的应用（12306.com,蘑菇街，美丽说，聚美）

                                                      extjs 比较适合做后台管理系统（电商（订单管理），银行，电信）

          在写jQuery代码时，不光可以使用jQuery的API，还能使用传统JS的API。

 

1. jQuery的优势：

   

        

主要功能：javascript开发人员查找元素、操作DOM、处理事件、执行动画和开发Ajax的操作。



jQuery 优势：(宗旨：write less ，do more 写更少的代码，做更多的事情)



bs 架构：性能



1：轻量级 （js 库非常小）



2：强大的选择器（获取页面上面的dom 元素，操作dom 必须先得到dom）

     DOM获取：

          var username = document.getElementById("username"); alert(username.value);

     jQuery获取：

          var $username = $("#username");   alert($username.val());

3：出色的DOM操作的封装



4：可靠的事件处理机制(对事件进行了一个封装)

     

5：完善的Ajax（底层封装xmlhttprequest）



6：不污染顶级变量（在jquery 里面只有一个对象  jQuery  == $）



7:出色的浏览器兼容性



8:链式操作方式($("#ddd").addClass().removeClass())



9:隐式迭代 (显示迭代:迭代一个数组)

     显示迭代（for(var i=0;i<array.length;i++){



             }）

     隐身迭代屏蔽掉for操作



10：行为层与结构层的分离



11：丰富的插件支持，后期扩展非常方便



12：完善的文档

2.使用步骤：   

         引用第三方js库文件 : <script  type="text/javascript"  src="js/jquery-1.4.2.js"></script>

         

         页面加载完毕执行：

               JS：

                    window.οnlοad=function(){   }

               JQ：

                    $(document).ready(function(){                  

                    })

 

                    $(function(){

                    })

 

3.DOM对象与JQuery对象：

dom对象：dom对象是浏览器自带对象,dom 对象只能调用dom 里面的属性和方法,不能直接调用jQuery对象里面的属性和方法.



jquery对象：jquery 对象是通过jQuery 包装页面上的DOM对象后 而产生的一个新的对象，jquery 对象是jQuery 独有的，不能直接调

                   用dom对象里面的属性和方法，jQuery 对象是一个数组。



jQuery 对象与dom 对象时可以相互转换的，转换之后它们可以相互调用。

                   

               DOM获取：

               var username = document.getElementById("username"); alert(username.value);

            DOM对象转换成jQuery对象：$(DOM对象)

                    var $username = $(username);



               jQuery获取 ：var $username = $("#username");  alert($username.val());

            jQuery对象转换成DOM对象：

                1.jQuery对象是一个数组对象：jQuery对象[索引值] [下标，从0开始]

                         var username = $username[0];  alert(username.value);

                2.jQuery提供了get(index)方法

                         var username = $username.get(0);  alert(username.value);

   js对象和jQuery对象的区别:

   （1）js对象的三种基本定位方式

       （A）通过ID属性：document.getElementById()

       （B）通过NAME属性：document.getElementsByName()

       （C）通过标签名：document.getElementsByTagName()

   （2）jQuery对象的三种基本定位方式

       （A）通过ID属性：$("#id属性值")

       （B）通过标签名：$("标签名")

       （C）通过CLASS属性：$(".样式名")

   （3）js对象出错的显示

        没有合理的提示信息

        例如：alert(document.getElementById("usernameIDD").value)

   （4）jQuery对象出错的显示

        有合理的提示信息，例如：undefined

        例如：alert($("#usernameIDD").val())   

 

4.Jquery九大选择器

          目的：通过九类选择器，能定位web页面（HTML/JSP/XML）中的任何标签。

                    项目中，通常是多种选择器一起使用。

           1：基本选择器   

     //1)查找ID为"div1ID"的元素，并添加样式。-ID选择器



         $("#button").click(function(){



            $("#div1ID ").css("background","red");



          });

       

    //2)查找元素名是div的所有元素-标签选择器

        $("div").css("background","green");

       

    //3)选择class为.myClass样式的所有元素-.class选择器

        $(".myClass ").css("background","yellow");

    

    //4)查找所有DIV,SPAN,P元素的个数

        alert( $("div,span,p").size() );

       

    //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数-组合选择器

        alert( $('#div1ID,.myClass,p').size() );



    //6)选择所有的元素-*

        $("*").css("background","blue");

           2：层级选择器               

         //1)找到表单form里所有的input元素的个数

           alert( $("form input").size() );

       

         //2)找到表单form里所有的子级input元素个数

           alert( $("form > input").size() );

        

         //3)选择id为one 的同级下一个div元素的value属性值

            alert( $("#one + div").val() );

        

         //4)选择id为id的元素后边的所有同级的div兄弟元素个数

           alert( $("#id ~ div").size() );



         //5) 选择id为id的元素的所有同级的div兄弟元素

             $("#button").click(function(){

                  //只有当前的这个方法返回的是jQuery 对象才能进行链式操作...

                 $("#id").siblings("div").css("background","blue");



             });

           3：基本过滤选择器              

         //1)查找UL中第一个元素的内容

             alert( $("ul li:first").text() );



        //2)查找UL中最后个元素的内容

             alert( $("ul li:last").text() );

          

        //3)选择class不为one的所有div元素

               $("div:not('.one')").css("background","green");

              

              查找所有未选中的input为checkbox的元素个