jQuery

1.基本概念

jQuery是一个js的库，能帮我们轻松实现一些原本可能比较麻烦的功能。

jQuery有两个版本，压缩版，未压缩版。压缩版小，但是没有排版和注释，不便于阅读。
未压缩的大，有排版和注释。

<script src="../jquery.js"></script>

<script src="../jquery.js"></script>

也可以通过CDN（内容分发网络）来引用jQuery。

菜鸟网的cdn，百度的cdn

好处：省事，速度更快

2.语法

$(选择器).action();

$:定义了这个是jQuery的代码

选择器:按照一定的规则选择DOM元素，类似于CSS选择器。

Action:对选中元素的操作

案例:所有段落随机变色

$("p").click(red);function red(){    this.style.color = "red";}

$("p").click(red);
function red(){
    this.style.color = "red";
}

所以说jQuery简化了程序员的工作

3.选择器

（1）元素选择器：根据标签名来获取元素

$(“p”):获取所有的段落

（2）Id选择器：根据id获取元素

$(“#p1”):表示选择

（3）class选择器：根据class获取元素

$(“.class”):选择器

（4）后代选择器

$(“div p”)：选择div的后代所有的p

（5）伪类选择器

$(“p:first”)：选择p的第一元素

（6）属性选择器

$(“p[name]”):选择p标签中具有name属性的段落

（7）根据属性值选择

$(“p[name = second]”):选择p标签中name属性为second的所有段落

4.事件

jQuery中注册事件的方法也是调用对象的方法。

鼠标移入事件

$(“#p1”).mouseenter();

之前，我们把所有的js代码放在body之后，如果放在body之前呢？

实验证明，放在body之前获取的元素为空，因为在执行时，文档还没有加载完成，也就是说元素不存在。因为js是解释性语言。

怎么解决?

使用$("document").ready(function(){......})可以解决此问题。

 

动画

1.显示、隐藏

Hide（）:隐藏

将宽，高，透明度变为0；display设置为none

Show（）:显示

将宽，高，透明度变为初始的样式；display设置为block（默认样式）

Toggle（）：hide+show

隐藏、显示的切换

三个函数的参数是一个，是“fast”“slow”和time，也可以不写

2.淡入、淡出

FadeIn（）：淡入，透明度和display变换，都回到初值

FadeOut（）：淡出，透明度和display变换，透明度回0，display回none

FadeToggle（）：淡入/淡出的切换，透明度和display变换

fadeTo（）：淡入，透明度到达指定值。这个值会取代原本的透明度。

前面三个函数的参数是一个，是“fast”“slow”和time，也可以不写

第4个有两个参数，前面一个是时间，后面一个是指定的透明度，这个数值可以是比初值还大的数。如果这个值大于等于1，那么指定的透明度就是1.

3.上滑、下滑

slideUp（）：上滑，也可以叫收缩。只改变高度和display。

slideDown（）：下滑。改变高度和display。回到初值

slideToggle（）：上滑/下滑的切换。

4.动画

移动一个块到另一个位置。

p.animate({left:"300px",top:"300px"},1000);

同时使用多个动画效果

p.animate({    left:"300px",    top:"300px",    width:"-=100px",    height:"-=100px",    opacity:"-=0.9"},1000);

这里的-=是在原有的基础上减多少

可以结合前三个动画效果

p.animate({    height:"toggle"},1000)

Animate()中有三个参数：

第一个是行为动作，第二个是时间，第三个是回调函数