jQuery框架准备学习

1、JavaScript编程的劣势

选择元素麻烦，全线兼容的方法只有 getElementById() 和 getElementsByTagName() 两个。其他的方法是不都兼容的。getElementsByClassName() 通过类名选择元素，IE9开始兼容。
样式操作麻烦，得到原生样式，需要我们自己造的轮子，例如：fetchComputedStyle()
动画麻烦，也需要我们自己造轮子animate();
批量控制麻烦，大量出现的for循环语句；排他操作麻烦
HTML节点操作麻烦

由元素可以写出来的函数，函数封装即轮子与轮子的集合就是框架（jQuery）

2、jQuery网站使用

官网：www.jquery.com

jQuery

口号：写更少的代码，做更多的事情

官方的自我介绍：

What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jQuery是什么?
　　jQuery是一个快速,小,功能丰富的JavaScript库。它使诸如HTML文档遍历和操作,事件处理、动画和Ajax更简单和易于使用的API,跨越多种浏览器。结合的通用性和可扩展性,jQuery已经改变了数百万人的方式编写JavaScript。

jQuery 有两条个本：「1.X」「2.X」

jQuery 「2.X」 has the same API as jQuery 「1.X」, but does not support Internet Explorer 6, 7, or 8.

jQuery「2.X」和「1.X」的功能完全一致，API完全一致，但是「2.X」不兼容IE6、7、8。

下载的时候有两个选择：

版本

3、jQuery的整体感知

1. 选择问题轻松解决

$()函数就是 jQuery 的核心函数，query就是检查的意思，也就是说jQuery的核心招牌功能就是选择元素：

$("#box ul li.box span").css("background-color","red");

语法：$(“选择器”)
选择的就是所有符合条件的元素，而不是一个。
$可以用jQuery来代替，$ 和jQuery是同一个函数：

jQuery("#box ul li.haha span").css("background-color","red");
比 document.getElmentById() 方便！
jQuery选择的元素，所有浏览器兼容！

2. 样式问题轻松解决

得到样式（得到计算后的样式）：
$(".box").css("width");
通过$()函数选择出来的东西，都是jQuery对象，所有的jQuery对象，都可以继续打点调用css函数，css函数已经封装了计算后的样式。

设置样式：

$("box").css("width",100);// 单个样式设置
//多个样式设置使用 json
 $(".box").css({
  "width":700,
  "height" : 300,
  "opacity" : 0.4
 });

语法
$(“选择器”).css(JSON);

3. 动画的问题轻松解决

jQuery内部含有一个运动框架，animate
$(".box").animate({"left":900},4000,function(){
alert("运动完成");
});

4. 批量添加监听、节点关系

所有的li都有监听了：
$(".circles ol li").mouseenter(function(){ //自己变红，自己的兄弟恢复为橙色$ (this).css("background-color","red").siblings().css("background-color","orange");
});
siblings()表示兄弟节点。//兄弟姐妹

4、$()函数

jQuery对象不是原生JS对象
$()函数，是招牌功能，能够根据CSS选择元素。

比如：
$("#box")
选择页面上id为box的盒子。

注意，选择出来的东西，是一个类数组对象，是****jQuery****自己的对象，这个****jQuery****对象后面不能跟着原生JS 的语法：
~~$("#box").style.backgroundColor = "red";~~

因为.style.backgroundColor是原生JS语法，$()原则的对象是jQuery对象，不能跟着原生。

所以，如果想把jQuery对象，转为原生JS对象，要加[0]就行了：

$("#box")[0].style.backgroundColor = "red";

5、引号问题

$("选择器")
注意引号不能丢！！在jQuery世界中，只有三个东西不能加引号，其他必须加引号：

    $(this)
    $(document)
    $(window)

6、筛选器

这些都是关于序号的：

    $("p")          所有的p
    $("p:first")    第一个p
    $("p:last")     最后一个p
    $("p:eq(3)")    下标为3的p
    $("p:lt(3)")    下标小于3的p
    $("p:gt(3)")    下标大于3的p
    $("p:odd")      下标是奇数的p
    $("p:even")     下标是偶数的p

特别的，eq equle 可以单独提炼为方法，可以连续打点：
$("p").eq(3).animate({"width":400},1000);
等价于
$("p:eq(3)").animate({"width":400},1000);
提炼出来的好处是，可以用变量
var a = 3;
$("p").eq(a).animate({"width":400},1000);

7、CSS函数

css函数可以读样式，可以设样式。
读样式，可以读取计算后样式，写一个参数，是不是驼峰，无所谓，但是必须加引号：
$("p:first").css("background-color");
$("p:first").css("backgroundColor");

设置样式，设置样式，有两种语法，**如果你只想设置一个样式，逗号隔开 k 和 v ：
$("p:odd").css("backgroundColor","blue");
如果想设置很多样式，就写JSON:
$("p:odd").css(JSON);
所有的数值，不需要单位：

 $("p:lt(4)").css({
  "width" : 20,
  "height" : 20,
  "backgroundColor" : "red"
 })

当然，你也可以这样，不厌其烦的用逗号：
$("p:lt(4)").css("width",20);
$("p:lt(4)").css("height",20);
$("p:lt(4)").css("backgroundColor","red");
特别的，还支持+=写法：
$("p:eq(5)").css("width","+=20px");

8、animate函数

动画

animate缓冲，jQuery需要插件来完成。
jQuery默认不是匀速，是 easeInOut (先快后慢）

和我们封装的框架不一样，jQuery默认有一个处理机制，叫做动画排队。当一个元素接收到了两个animate命令之后，后面的animate会排队：
$("p").animate({"left":1000},2000);
$("p").animate({"top":400},2000);
先2000毫秒横着跑，然后2000毫秒竖着跑。动画总时长4000。

如果想让元素斜着跑，就是同时变化left和top，就写在同一个JSON里面：
$("p").animate({"left":1000,"top":400},2000);

不同的元素，不排队，是同时的。

8.事件监听

jQuery颠覆了我们的行文习惯：

    $(".box1").click(function(){
        //点击box1之后做的事情
    });

事件名一律不写on。特别的，鼠标进入改成了mouseenter，鼠标离开改为了mouseleave。

jQuery的哲学就是DOM编程领域的霸主，操作DOM节点、绑定监听、运动、css样式、Ajax等等都有封装。