jQuery

一.jquery对象 与 dom对象 的相互转换：

   1.将dom对象转换为jquery对象:
                     var div = document.getElementById("div1");
                     var $div = $(div);
            
   2.将jquery 对象转换为dom对象:
                    var Jobj = $("#div1");
                    var div1 = Jobj[0]; //Job.get(0);
                    alert(div1.innerHTML);

   3.解释jquer对象的结构:
         var Jobj = $("div");//获得了所有的div，并将它们添加到jquery对象的dom数组中
            alert(Jobj.get(1).innerHTML);//将jquery 对象里的第二个dom对象读取出来，因为获得dom对象，所有可以用dom的属性

   总结：jquery对象就相当于一个盒子（数组）把dom对象存放进去；

二.基本选择器 ：

  1.$("#id") : id选择器,document.getElementById("id");

  2.$("div") :元素选择器 document.getElementByTagName("div");

  3.$(".myClass") : 类选择器,返回所有class="myClass"的元素

  4.$("*") : 返回所有元素,多用于结合上下文搜索

  5.$("div,span,p.myClass") : 多条件选择器,返回所有查到的元素


三.层次选择器（如后代元素,子元素,相邻元素，兄弟元素等）：

   1.后代选择器（ancestor descendant）：在给定的祖先元素下匹配所有后代元素：

        var Jobj = $("#fatherDiv div"); //拿到id为fatherDiv 下的子div，（先id选择器，再元素选择器）

   2.子代选择器（parent > child）：在给定的父元素下匹配所有 子 元素： 

        var Jobj = $("#fatherDiv > div");

   3.prev + next ：匹配所有紧接在prev后的next元素

        var Jobj = $("#fatherDiv + div");//只能匹配到fatherDiv 紧挨着的 一个div元素 
        var Jobj = $("#fatherDiv + *");//不限制类型，能匹配到所得id为fatherDiv 的紧挨着的元素

   4.prev ~ siblins：匹配 prev之后的所有siblings元素 （匹配的是 同辈的元素）：

               var Jobj = $("#fatherDiv ~ div") ;(注意~的全角半角问题)

四.$就是函数，它就是jQuery函数（   $()就是jQuery()  ）：

    $("div")跟jQuery("div")是一个东西，$只是别名；
    
    $(function() {  }); 就是  $(document).ready(function() {});的简写；

    ready是当dom树加载完毕执行，window.onload 是当dom树 跟外部文件都加载完 才执行；

五.事件绑定

        为id为btnChangeDiv 的按钮 绑定onclick事件：

        $("#btnChangeDiv").click(function() {
            $("div").html("我们都是div");
        });

    click()：为按钮注册点击事件；

    leave()：鼠标离开事件;

    focus(): 控件获得焦点事件；

    blur()：控件失去焦点事件；
    
    就是把原来的事件的on去掉，我们也可以模拟来调用点击事件：

    $("#btnChangeDiv").click();//模拟点击了，它就会直接执行上面所绑定的方法；

六.JQuery提供的函数

    1.1 $.map(array,fn):用来将一个数组，转成另一个数组。

        解释：对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组；

    map帮我们循环一个数组，并且帮我们遍历数组的每一个元素的同时还执行一个匿名方法，

    将被遍历的那个元素传进来，方法将执行后的结果，再返回到一个新 的数组里面；

    map内部实现：

            function myMap(arr, fun) {
                var newArr = new Array(arr.length);
                for (var i = 0; i < arr.length; i++) {
                    newArr[i] = fun(arr[i]);
                }
                return newArr;
            }

            var arr = [3, 5, 9];
            var newArr = myMap(arr, function(item) { return item * 2 });
            alert(newArr);

    1.2  回调函数：用户定义，系统调用；myMap方法就相当于是系统函数，第二个参数是由方法调用者来写的；（委托）
        
    1.3  js里方法（function）就相当于是类型的对象：

    var chang =  function(item) { return item * 2 };//这个匿名方法相当于一个类型的对象，=右边相当是实例化一个对象，把对象赋给chang ， 把chang传过去；
    
    myMap(arr,chang);


    2.1  $.each(array,fn)：对数组arry每个元素调用fn函数进行处理，没有返回值。
    
            var arr = [3, 5, 9];
            $.each(arr, function(item) { alert("each中："+item) ; return item * 2 });//item 为 数组的下标；
            
            我们猜 each 内部原理：
    
            function myEach(arr, fun) {
                for (var i = 0; i < arr.length; i++) {
                    fun(i, arr[i]);
                }
            }
    
        但是当我们使用json格式的对象时，它就会出错，而each不会，所以我们猜它应该是使用for in来实现的：

        function myEach(arr, fun) {
                for (var item in arr) {
                    fun(item, arr[item]);
                }
            }    

        再后来，我们传this的时候，还是跟each不一样
        
        function myEach(arr, fun) {
                for (var item in arr) {
                    fun.call(arr[item],item, arr[item]);//call改变函数的作用域，也就是改变这个函数的this对象，改变成第一个参数
                }
            }

     2.2 call的用法：调用一个对象的一个方法，以另一个对象替换当前对象。 

        obj1.method1.call(obj2,argument1,argument2) 

        如上，call的作用就是把obj1的方法放到obj2上使用，后面的argument1..这些做为参数传入．

        举一个具体的例子 ：

            function Sub(a, b) {
                alert(a - b);
            }
            function Add(a, b) {
                alert(a + b);
            }
            Add.call(Sub, 3, 1); 

        这个例子中的意思就是用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4); 

        // 注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。 

        第二个例子：    

        function Class1() {
                this.name = "calss1";
                this.showName = function() {
                    alert(this.name);
                }
            }
            function Class2() {
                this.name = "class2";
            }

            var c1 = new Class1();
            var c2 = new Class2();
            c1.showName.call(c2); //结果为 class2

            //注意,call 的意思是把 c1 的方法放到c2上执行，原来c2是没有showNam() 方法，

            //现在是把c1 的showNam()方法放到 c2 上来执行，所以this.name 应该是 class2，

            //执行的结果就是 ：alert（"class2"）; 

        第三个例子：

            //用 call 来实现继承 
            function Class1() {
                this.showTxt = function(txt) {
                    alert(txt);
                }
            }
            function Class2() {
                Class1.call(this);
            }

            var c2 = new Class2();
            c2.showTxt("cc");

            //这样 Class2 就继承Class1了，Class1.call(this) 的 意思就是使用 Class1 对象代替this对象，

        //那么 Class2 中不就有Class1 的所有属性和方法了吗，

            //c2 对象就能够直接调用Class1 的方法以及属性了，

            //执行结果就是：alert（“cc”）; 
    
        第三个例子：
    
             实现多重继承


            function Class10() {
                this.showSub = function(a, b) {
                    alert(a - b);
                }
            }

            function Class11() {
                this.showAdd = function(a, b) {
                    alert(a + b);
                }
            }


            function Class2() {
                Class10.call(this);
                Class11.call(this);
            } 

       很简单，使用两个 call 就实现多重继承了 

       当然，js的继承还有其他方法，例如使用原型链，这个不属于本文的范畴，只是在此说明call 的用法 

       说了call ，当然还有 apply，这两个方法基本上是一个意思 

       区别在于 call 的第二个参数可以是任意类型，而apply的第二个参数必须是数组


       //function匿名函数，是浏览器在堆里开辟一块空间，它相当于函数对象，是引用类型



       总结：$.map适用于数组，$.each适用于对象（dic<key,value>键值对）；


七.jQuery修改样式 ( $().css ):

            var Jdiv = $("#div1");//获得一个jquery对象
        
        1.为css传一个值，是获得指定的 样式值

               var col = Jdiv.css("color");
                alert(col); //#000000,默认是黑色的

            2.设置样式值

        Jdiv.css("color", "blue");

        2.1    
        var Jdiv = $("div");// 适用元素选择器，获得多个div

         Jdiv.css("color", "#ff6600");

        为什么所有的div样式都会变呢？
        
           因为 在使用 $("div")时，把 所有div对象 都存入jquery对象里，

           在设置样式时，循环jquery对象数组里的每个dom对象为它们设置样式；

       3.一次设置多个样式的值

         var Jdiv = $("div");

       3.1 可以传入json格式的数组； 

         Jdiv.css({ "color": "#ff6600", "fontSize": "77px" });

       3.2 也可以用链式编程的方式：

         Jdiv.css("color", "blue").css("fontSize", "77px");
        
         为什么可以呢？

             答：因为css方法会返回一个jquery对象，所以可以继续.

                 var jDiv2 = Jdiv.css("color", "blue").css("fontSize", "77px");

         jDiv2.slideUp("slow");//就像这样，我们还可以给继续.下去

八设置元素的value属性值

    $("#txtName").val();//获得id为txtName的文本框的值；

    $("#txtName").val("还可以设置值哈");//给 文本框设置值；

九 JQuery的Dom操作

    innerHTML->html()

    innerText->text()//innerText不兼容火狐，但text()兼容；

    innerHTML 与 innerText ：它们的区别是 一个解析html代码，一个不解析html；

        $("#div1").text("<div> 小丫，是男的？ </div>"); //<div> 小丫，是男的？ </div>

            $("#div1").html("<div> 小丫，是男的？ </div>"); //小丫，是男的？ 

    attr :

        1.1 设置属性

         var Jdiv = $("div");

             Jdiv.attr("xiJP", "22222222");

             Jdiv.attr("title", "ddddddd");//给div设置属性

           attr也可以通过json的方式设置多个属性

        1.2 取属性值    

        Jdiv.attr("title");//拿div的属性值；

        问题来了，拿div的属性值的时候，我们拿的是哪个div的属性值呢？

        Jdiv.eq(1).attr("title", "ddddddd");

            Jdiv.eq(0).attr("title", "sssssss");

        alert(Jdiv.attr("title"));//结果为sssssss 

        结论：通过结果我们知道，attr("")取属性值的时候，拿的是jquery对象 数组里的第一个dom对象的属性值

        上面的eq是什么意思？ 

        我们可以看出来，它的作用是通过下标来取jquery数组里的dom对象，那么返回的应该是dom对象才对啊~

        为什么还可以.attr("","")来取设置属性呢？

        答：eq()相当拿索引，它拿的是dom对象，然后再包装成jquery对象，所以它返回的还是jquery对象
              
            1.3 移除属性

         Jdiv.removeAttr("name");
            

十. JQuery的隐式迭代


    $("#buCunZaiDeId").html("给不存在的对象设置值，就是不报错");

    给一个不存在的对象设置属性值，为什么不会报错？

    答：因为 这个东东 $("#buCunZaiDeId") ，它去拿这个buCunZaiDeId的ID时还是会生成jquery对象，

        只是这个jquery对象 数组里面有没有元素的问题，找到了就有元素进来，找不到就没有元素进来，
        
            现在调用jquery对象的html方法，这个html也是去循环数组 ，当发现这个数组的长度是0的时候，就不会执行html方法了；所以不会报错；

    所以一般情况我们要判断一下，应该这样写：

    var IsExist = $("#buCunZaiDeId");
    
    if(IsExist.length > 0){
          IsExist.html("给不存在的对象设置值，就是不报错");
    }

    

十一.节点遍历

    1.1 next()：方法用于获取节点之后的挨着的第一个兄弟元素（拿一个）：

        var Jdiv = $("#div1");
         
        var JnextNode = Jdiv.next("div");// 必须是div1后紧挨的元素，还必须是div，如果紧挨着的没有div就返回undefined

        alert(JnextNode.attr("id"));//div2

    1.2 nextAll()：方法用于获取节点之后的所有兄弟元素 （所有的兄弟元素）    

        var JnextNode = $("#div1").nextAll("input");

            $.map(JnextNode, function(item) {
                alert(item.id);//拿的是div1后的 input （平级的）;
            })
        
            
        var JnextAllNode = $("#div1").nextAll();    

        $.map(JnextNode, function(item) {
                     alert(item.id);//拿的是div1后的元素（平级的）;
                })

    2.1 prev(): 兄弟中之前的一个元素

    2.2 prevAll():兄弟中之前的所有元素


    3 siblings():方法用于获取所有同辈元素(前后都拿到)

    实例1 ：选中的p标签变色：

        var Jclick = $("p").click(function() {

        //被点击调用时，this就是被点击的dom元素，通过使用$() 将其包装成一个jquery对象

                $(this).css("color", "#ff6600").siblings("p").css("color", "blue");

            });

    实例2 ：评分控件

            <head>
                <title>评分控件</title>

                <script src="JS/jquery-1.6.min.js" type="text/javascript"></script>
                <script type="text/javascript">
                    $(function() {
                        $("#tbList").css({ "width": "300px", "height": "50px", "border": "1px solid #000000" }); //给table设置样式
                        $("#tbList td").css({ "border": "1px solid #000000" }); //给td设置样式
                        $.each($("#tbList td"), function(index, item) {
                            $(item).html(index + 1); //给td标签里的添加内容（1,2,3....）
                        });

                        //方法一：
                        $("#tbList td").click(function() {
                            $(this).css("backgroundColor", "red").prevAll("td").css("backgroundColor", "red"); //单击的td及它前面的所有样式都设置成红色
                            $(this).nextAll("td").css("backgroundColor", "white"); //它之后的所有td 样式都变成白色
                        });

                        //方法二：
                        var isClick = false; //是否点击
                        $("#tbList td").hover(
                            function() {
                                $(this).css("backgroundColor", "red").prevAll("td").css("backgroundColor", "red"); //鼠标移上 的及它前面的所有样式都设置成红色
                                $(this).nextAll("td").css("backgroundColor", "white"); //鼠标移上 之后的所有td 样式都变成白色
                            },
                            function() {
                                if (!isClick) {
                                    $("#tbList td").css("backgroundColor", "white"); //鼠标移走后都设为 白色
                                }
                            }
                        );

                        $("#tbList td").click(function() {
                            isClick = true;
                        });
                    });
                </script>
            </head>
            <body>
                <table id ="tbList">
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </body>

十二：

:gt 选择器选取 index 值高于指定数的元素。
　　index 值从 0 开始。

　　选择前 3 个之后的所有 <tr> 元素：$("tr:gt(2)")
　　一般去除表头的 要后面的tr ：$("tr:gt(0)")

.children(selector)：

　　 找到类名为 "selected" 的所有 div 的子元素，并将其设置为蓝色：

    $("div").children(".selected").css("color", "blue");

.find(selector): 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

　　 搜索所有段落中的后代 span 元素，并将其颜色设置为红色：

　 $("p").find("span").css('color','red');

.find() 和 .children() 方法类似，不过后者只沿着 DOM 树向下遍历单一层级。