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()中有三个参数:
第一个是行为动作,第二个是时间,第三个是回调函数