jQuery第一天笔记

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>