学习jQuery；

jquery初学

1. jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

2. 用jQuery做开发时，使用1.9之类的版本库。

3. 它的引入方式和外部js引入方式一致。

4. $为jQuery的顶级变量。

5. 使用jQuery获取dom元素：
   jquery获取的dom对象都是集合型；
   获取dom元素对象的方法：

       console.log($("*")); 指获取所有对象元素
       console.log($("button"));tagName获取dom元素
       console.log($("#btn"));id获取dom元素
       console.log($(".btnlist"));class获取dom元素
       console.log($("body>button"));>获取dom元素
       console.log($("body button"));空格获取dom元素
   
       console.log($("body>button#btn"));混合使用获取dom元素
       console.log($("#btn,#btn1"));
   
      获取当前元素的子元素  第一个或者最后一个元素
       console.log($("ul>li:first"));
       console.log($("ul>li:last"));
       console.log($("ul>li:last-child"));
       console.log($("ul>li:first-child"));
       :not  除了谁  获取其他的
       console.log($("ul>li:not(#li4)"));
       :even  偶数获取元素
       console.log($("ul>li:even"));
       :odd  奇数获取
       console.log($("ul>li:odd"));
       :eq  根据索引来获取元素
       console.log($("li:eq(0)"));
       :lt   :gt   获取小于或者大于
       console.log($("li:lt(3)"));
       console.log($("li:gt(3)"));
       :focus  获取获得焦点元素  :header 获取h标签
       :has  获取当前的元素里面必须的有谁
       console.log($("ul:has(#li4)"));
       :parent  获取的元素必须有子集  元素 或者文本
       console.log($("li#li4:parent"));
   
       属性选择器
       console.log($("li[id][class]"));
       console.log($("li[id='li4']"));
       :nth-child(3)  根据序号获取元素
       console.log($("ul>li:nth-child(3)"));
       :checked  匹配checkbox  radio  被选择元素
       console.log($("input:checked")
   

   6. 使用jquery操作dom元素属性和方法：
      (1. jquery可以进行隐式迭代，可以操作一堆dom元素；
      (2. innerhtml、innertext可设置元素的文本值和HTML值；

   $("button.btn").html("<span>html</span>");
   console.log($("button.btn").html());
   

   (3. eq(index) 根据索引来获取元素；

   for (var i = 0; i < $("button.btn").length; i++) {
           console.log($("button.btn").eq(i).html());
       }
   

   (4. val 获取或设置元素值；

   console.log($("input").val());
       $("input").val("321")
   

   (5. addclass 给元素添加类；
   removeclass 给元素移除类；

    $("input").addClass("txt txt1");
    $("input").removeClass("txt1")
   

   (6. attr 设备属性；

    $("input").attr("id", "user");
    console.log($("input").attr("id"));
    $("input").attr("data-user", "maodou");
    console.log($("input").attr("data-user"))
   

   一次性设置多个属性：

   $("input").attr({   
           id: "username",
           "data-list": "list"
       });
   

   (7. prop 设置属性的获取；

   console.log($("input[type=checkbox]").prop("checked"));
   $("input[type=checkbox]").prop("checked", function (index, value) {
            console.log(index);
            return !value;
        });
   
   

   (8. css() 设置或者获取元素的样式 可设一个或者多个；
   （9. offset 获取当前的偏移量 它的返回值是对象；
   scrolltop 当前元素相对滚动条到顶部的距离；
   scrollleft 当前元素相对滚动条fa到左边的距离；

6. jquery筛选；
   （1）eq() 按照所有来过滤元素；
   （2）first(）last() 获取当前元素里面子集元素的第一个和最后一个；
   （3）hasClass() 检查当前元素有没有固定的类；返回值为true和false;
   （4）filter() 过滤元素；
   (5) map 将一个集合元素转化为内一个元素集合；

var a=[1,2,3];
        console.log(a.map(function (value, index) {
        return value * value
        }));

(6) jquery 里面的map 返回的值为jquery key:value 通过get() 转化为集合

console.log($("input").map(function (index, obj) {
        return $(this).val();
        }).get().join(""));

(7) has 找当前匹配元素谁具有这个元素；
（8） not(selector) 当前匹配元素中除去特定元素 获取其余的元素
（9）slice 选取jquery集合里面的一部分；

console.log($("button").slice(0, 2));

(10) find() 查找元素 元素匹配器;
(11) next() 下一个元素
prev() 上一个元素
(12) parent 找当前元素的直接父容器
parents 找当前元素所有的父容器
(13) siblings() 找同胞兄弟元素

8. jquery里特定的方法；
   a: each 集合遍历 参数是索引；
   b: get(index) 根据索引获取指定对象 不加参数获取整个集合；
   c: index() 获取当前元素的索引值；