jQuery基础知识与动画

来源：互联网发布：手机耗电检测软件编辑：程序博客网时间：2024/06/05 10:04

jQuery基础知识

1.1基本概念

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

jQuery每个版本又有两个小版本：压缩版和未压缩版，压缩版文件较小，但没有排版和注释，所以不便于阅读；而未压缩版文件较大，有排版和注释，便于阅读。

jQuery实际上就是一个js文件，加载到页面就可以直接使用了。

<scriptsrc="../jquery-3.2.1.min.js"></script>

菜鸟教程 CDN:

百度 CDN:

<scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

又拍云 CDN:

<scriptsrc="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>

新浪 CDN:

<scriptsrc="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

使用CDN的好处：

（1）省事

（2）速度更快

1.2语法

$(选择器).action();

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

选择器：按照一定的规则选择DOM元素，非常类似与CSS选择器

action：对选中元素执行的操作

案例：单击段落颜色变红

方案一：

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

</head>

<body>

<p>第一个段落</p>

<p>第二个段落</p>

<p>第三个段落</p>

<p>第四个段落</p>

</body>

varparas = document.getElementsByTagName("p");

for(vari in paras){

paras[i].addEventListener("click",red);

}

functionred(){

this.style.color = "red";

}

</script>

方案二：

$(“p”).click(red);

function red(){

this.style.color = "red";

}

</script>

jQuery的一行代码

$(“p”).click(red);

相当于JS的若干行代码

var paras =document.getElementsByTagName("p");

for(var i in paras){

paras[i].addEventListener("click",red);

}

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

1.3选择器

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

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

（2）id选择器

$(“#p1”):表示选择id=“p1”的元素

（3）class选择器

$(“.top2”):表示选择class=“top2”的所有元素

（4）后代选择器

$(“div p”):表示选择div元素中的所有p元素

（5）$(“p:first”):表示选择p标签的第一个元素，相当于css中的伪类选择器

（6）$(“p[name]”):表示选中所有具有name属性的段落

（7）$(“p[name=second]”):表示选中所有name为second的段落

（8）$(“tr:even”):表示选择表格的奇数行

1.4事件

jQuery中注册事件的方法也是调用jQuery对象的方法，比如单击事件

$(“#div1”).click();

鼠标移入事件

$(“#div1”).mouseenter()

而且方法名就是js中的事件名

之前，我们所有的JS代码是放在<body>之后的，如果放在<body>之前呢？

实验证明，如果放在body之前，在获取元素时得到的结果为空，因为在执行此代码时，文档还没有加载完成，也就是说元素都还不存在。

那怎么解决呢？

将代码放在$(document).ready(function(){……})中，也就是在文档加载完成之后才会去执行此代码。

<html>

<head>

#div1{

width:100px;

height:100px;

background-color: blue;

}

</style>

</head>

$(document).ready(function(){

$("#div1").mouseenter(function(){

$(this).css("background-color","skyblue");

});

</script>

<body>

</body>

</html>

动画

2.1显示/隐藏

hide():隐藏

将高度、宽度、透明度变为0，display由“block”变为“none”

show():显示

将高度、宽度、透明度变为初始的值，display由“none”变为“block”

toggle():切换

如果display为none的时候，点击一下就变为了block，反之变成none

<head>

#div1{

width:100px;

height: 100px;

background-color: skyblue;

}

</style>

</head>

<body>

<divid="div1"></div>

</body>

$("#btnHide").click(function(){

$("#div1").hide(5000);

});

$("#btnShow").click(function(){

$("#div1").show(5000);

});

$("#btnToggle").click(function(){

$("#div1").toggle(2000);

});

</script>

2.2淡入/淡出

fadeIn():淡入

将隐藏的元素的透明度由0变为1，display由none变为block

fadeOut():淡出

将某个元素的透明度由1变为0，display由block变为none

fadeToggle():透明度切换

可以将某个元素的透明度由0变为1，也可以由1变为0

fadeTo():设置为某个特定的透明度

将某个元素的透明度由0设为某个特定的值（0~1），也可以由1变为设定的那个透明度。

<head>

#div1{

width: 200px;

height: 200px;

background-color: deepskyblue;

display:none;

}

</style>

</head>

<body>

</body>

$("#btnFadeIn").click(function(){

$("#div1").fadeIn(3000);

});

$("#btnFadeOut").click(function(){

$("#div1").fadeOut(3000);

});

$("#btnFadeToggle").click(function(){

$("#div1").fadeToggle(3000);

});

$("#btnFadeTo").click(function(){

$("#div1").fadeTo(3000,0.2);

});

</script>

2.3上滑/下滑

slideUp():上滑

将某个元素的高度由设定的值变为0，然后隐藏它

slideDown():下滑

先显示某个元素，然后将它的高度由0变为初始值

slideToggle():上滑与下滑的切换

如果元素是隐藏的话，则让它显示，并把它的高度增加，如果元素是显示的话，就把高度减为0，再隐藏它。

<head>

#div1{

width: 200px;

height: 200px;

background-color: deepskyblue;

display:none;

}

</style>

</head>

<body>

</body>

$("#btnSlideDown").click(function(){

$("#div1").slideDown(3000);

});

$("#btnSlideUp").click(function(){

$("#div1").slideUp(3000);

});

$("#btnSlideToggle").click(function(){

$("#div1").slideToggle(3000);

});

</script>

2.4动画

移动一个块到某个位置

<head>

#div1{

width:200px;

height:200px;

background-color: blue;

position:absolute;

/*display:none;*/

}

</style>

</head>

<body>

<divid="div1"></div>

</body>

$("button").click(function(){

$("#div1").animate({

left:'250px',

top:'250px'

});

</script>

同时使用多个属性实现动画效果

$("button").click(function(){

$("#div1").animate({

left:'300px',

width:'+=100px',

height:'+=100px',

opacity:'0.5'

});

改变预定义值来实现内容所需的显示或隐藏

$("button").click(function(){

$("#div1").animate({

width:'toggle',

height:'toggle'

});

animate()中有三个参数：

第一个参数是需要改变的样式

第二个参数是显示的速度（slow/fast/指定毫秒数）

第三个参数是回调函数

Var div = $(“#div1”);

$("#start").click(function(){

div.animate({width:'300px'});

div.animate({height:'300px'});

div.animate({width:'200px'});

div.animate({height:'200px'});

});

$("#stop").click(function(){

$("#div1").stop();

});

这里定义的是多个动画，宽和高变化到某个值后恢复到初始值，也可以用链的方式将动画连起来。

阅读全文

0 0