jQuery

     目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

1、调用jQuery库

<script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

2、函数在ready下进行

$(document).ready(function(){
 $("button").click(function(){  //所有的按钮点击触发

   $("p").hide(1000); //在1s内，所有的p隐藏 ；

 });

});

3、常用的几种触发事件

双击事件：$("p").dblclick(function(){}）；

获取焦点：$("input").focus(function(){}）；

失去焦点：$("input").blur(function(){}）；

鼠标悬停：$("input").hover()(function(){}）；

隐藏显现:   $("p").toggle();

4、动画效果

淡入： $("#div3").fadeIn(3000);//3000代表淡入的时间

淡出： $("#div3").fadeOut(3000);//3000代表淡出的时间

淡入淡出：$("#div3").fadeToggle(3000);//3000代表淡入淡出的时间

颜色变淡：  $("#div1").fadeTo("slow",0.15); //“slow”表示变淡，0.15代表变淡的程度越小越淡

向下滑动：$("#panel").slideDown(3000);//需要给id威panel 这个css属性display:none;代表一开始是不显示的。

向上滑动： $("#panel").slideUp(3000);

上下滑动： $("#panel").slideToggle(3000);

向左滑动：$("div").animate({left:'250px'});//left代表方向，250px代表距离

动画效果：$("div").animate({//里面可以加css的各种属性变化
                      left:'250px',
                      opacity:'0.5',//颜色变淡
                      height:'150px',
                      width:'150px'

                });

动画队列：$("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},3000); //第一个执行,3000代表时间
    div.animate({width:'300px',opacity:'0.8'});
    div.animate({height:'100px',opacity:'0.4'});
    div.animate({width:'100px',opacity:'0.8'});
  });

停止动画： $("#panel").stop();//停止当前动画，如果有下一个动画将执行下一个

                  $("div").stop(true);//停止所有动画队列里的动画

                  $("div").stop(true,ture);//停止所有动画，但直接变成动画后的样子

回调函数：在动画完成后添加触发事情，

            $("p").hide(3000,function(){

                 alert("段落现在被隐藏了");
             });

常用的效果：

animate() 	对被选元素应用"自定义"的动画
clearQueue() 	对被选元素移除所有排队函数（仍未运行的）
delay() 	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue() 	移除下一个排队函数，然后执行函数
fadeIn() 	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut() 	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo() 	把被选元素逐渐改变至给定的不透明度
fadeToggle() 	在 fadeIn() 和 fadeOut() 方法之间进行切换
finish() 	对被选元素停止、移除并完成所有排队动画
hide() 	隐藏被选元素
queue() 	显示被选元素的排队函数
show() 	显示被选元素
slideDown() 	通过调整高度来滑动显示被选元素
slideToggle() 	slideUp() 和 slideDown() 方法之间的切换
slideUp() 	通过调整高度来滑动隐藏被选元素
stop() 	停止被选元素上当前正在运行的动画
toggle() 	hide() 和 show() 方法之间的切换

5、获取元素

获取文本：$("#test").text() //（）这里面可以写上值，即可设置值，也可写上回调函数，下同；

获取html：$("#test").html()

获取文本框里的值：$("#test").val()

获取超链接里的地址：$("#runoob").attr("href")

6、添加（删除）元素

在被选元素的结尾插入内容：$("p").append("Some appended text.");

在被选元素的开头插入内容：$("p").prepend("<b>在开头追加文本</b>。 ");

在被选元素之后插入内容：$("img").after("<i>之后</i>");

在被选元素之前插入内容 ：$("img").before("<b>之前</b>");

删除元素：$("#div1").remove();//删除元素本身

                 $("#div1").empty();//删除元素里的子元素，本身不删

7、操作css

向不同的元素添加 class 属性：$("h1,h2,p").addClass("blue"); //也可以是多个类；

删除class属性：$("h1,h2,p").removeClass("blue");

添加删除class属性：$("h1,h2,p").toggleClass("blue");

直接操作css：$("p").css("background-color","yellow");//也可以设置多个css属性 （{"x":"x"，"x":"x"}）

8、设置尺寸

获取宽度：$("#div1").width()  //（）里面可以设置宽度的值，下同；

获取高度：$("#div1").height();

9、AJAX

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

//必需的 URL 参数规定您希望加载的 URL。

//可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

//可选的 callback 参数是 load() 方法完成后所执行的函数名称。

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

$.get(URL,callback);

$.post(URL,data,callback);