- JQuery简介
- JQuery常用方法
- JQuery中的插件
JQuery简介
JQuery 的发展历史
http://blog.csdn.net/zuoninger/article/details/18594241
image.png
John Resig jQuery的第一创始人
jQuery是一个快速、小型的、特性很多的JS库，它把很多事儿都变得简单。jQuery是免费的、开源的。
JQuery常用方法
选择器
$()函数就是jQuery的核心函数，query就是选择的意思
$(“选择器”)
//常见几种方式
$("#id")
$(".class")
$("p")
$("*")
下面是整个页面加载完成的三种写法：
document.onload = 函数
$(document).ready(函数)
$(函数)
元素CSS属性获取
CSS（）
- 元素尺寸
- 元素位置
- 元素颜色背景，只要是CSS样式就ok
// 获取
$("#div1").css("width")
// 修改样式
$("#div1").css("width", 200)
$("#div1").css("width", "200px")
$("#div1").css({"width": 200})
动画方法
- animate
$("p").animate(JS对象, 动画时间, 回调函数/动画类型)
$(".aaa").animate({"left":400,"width":300,"height":300},1000,function(){
$(this).css("background","red")
})
move();
function move(){
$(".bbb").animate({"left":400},1000,"easeInOutElastic",function(){
$(".bbb").animate({"left":0},1000,"easeInOutElastic",move)
})
}
JQuery中的插件
jQuery插件的使用只能在引用jQuery库之后调用插件中的封装函数，先有jQuery库才有的插件，相信大家都懂
下面就是正确使用插件的方法，哈哈
<script type="text/javascript" src="/jQuery/js/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script>
//$("p").css({"color":"red"})
//var a = $(".aaa").css("width")
//console.log(a)
$(".aaa").animate({"left":400,"width":300,"height":300},1000,function(){
$(this).css("background","red")
})
move();
function move(){
$(".bbb").animate({"left":400},1000,"easeInOutElastic",function(){
$(".bbb").animate({"left":0},1000,"easeInOutElastic",move)
})
}
</script>
