目前网络上有大量开源的 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(){
});
常用的效果:
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);