目录
1、jQuery简介
jQuery是一个JavaScript函数库（write less,do more），它极大地简化了JavaScript编程。jQuery库可以通过一行简单拿的标记被添加到网页中。
jQuery库有以下功能：
HTML元素选取、HTML元素操作、CSS操作、HTML事件函数、JavaScript特效和动画、HTML DOM遍历和修改、AJAX、Utilities，除此之外，jQuery还提供了大量的插件。
2、下载jQuery
jQuery (click me ,download)
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：
<script src="jquery-3.4.1.js"></script>hint: 将下载的文件，放在网页的同一目录下，就可以使用jQuery了。
或者：采用 Staticfile CDN ，直接引用jQuery。
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>或者：采用 百度CDN ，直接引用jQuery。
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>3、jQuery选择器
jQuery选择器允许对HTML元素组或者单个元素进行操作。他是基于元素的id、类、类型、属性、属性值等“查找”HTML元素的，此外，他还有一些自定义的选择器。jQuery中所有的选择器都是以美元符号开头：$()。
$(this).hide() 隐藏当前HTML元素
$("p").hide() 隐藏所有<p>元素
$("_test").hide() 隐藏所有class = "test"元素
$("#test").hide() 隐藏id= "test"元素
$("*") 选取所有元素
$("p:first") 选取第一个 <p>元素
$("[href]") 选取带有href 属性的元素
文档就绪事件：：：这是为了防止文档在完全加载之前就运行jQuery代码，即在DOM加载完成后才可以对DOM进行操作。
$(document).ready(function(){
// 开始写 jQuery 代码...
});
// 简洁写法
$(function(){
// 开始写 jQuery 代码...
});提示：如果您的网站有很多页面，并且希望jQuery易于维护，那么可以将jQuery放到独立的.js文件中。通过src属性来引用文件。
<head>
<script src="jquery-3.4.1.js">
</script>
</head>4、jQuery事件
jQuery是为事件处理特别设计的。事件处理程序指的是当HTML中发生某些事件时所调用的方法。
focus() ：当元素获得焦点时，发生focus事件。当通过鼠标点击选中元素或者通过Tab键定位到元素时，该元素就会获得焦点。
blur(): 当元素失去焦点时，发生blur事件。blur() 方法触发blur事件，或规定发生blur事件时运行的函数。
5、jQuery效果
1）隐藏和显示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed:规定了隐藏/显示的速度，可以取 slow ,fast,或毫秒。
可选的callback参数是隐藏/显示完成后所执行的函数名称。
jQuery toggle():切换hide()和slow()方法。即显示被隐藏的元素，隐藏被显示的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js">
</script>
<script>
$(function(){
$("p").click(function(){
$(this).hide();
});
/**
* 点击【click me,then hide】按钮时，div隐藏
*/
$(" .myDiv .hide").click(function(){
$(this).parents(".myDiv").hide("slow");
});
/**
* 鼠标离开h1时，div隐藏
*/
$("h1").mouseleave(function(){
$(".myDiv").hide("slow");
});
/**
* 鼠标进入 h1 元素时，div显示
*/
$("h1").mouseenter(function(){
$(".myDiv").show("slow");
});
/**
* 点击【HIDE & SHOW】button ，显示和隐藏 p元素
*/
$("button").click(function () {
$("p").toggle();
});
});
</script>
<style>
div.myDiv{
background-color: antiquewhite;
padding: 4px;
border: solid 1px #34ddff;
}
</style>
</head>
<body>
<button>HIDE & SHOW</button>
<h1>简单隐藏</h1>
<p>if you click me, i will disapper~~~</p>
<p> click me ,again....</p>
<h1>文本隐藏</h1>
<div class="myDiv">
<button class="hide">click me,then hide</button>
<p>MyTest<br>sample hide && text hide Example~~~~~~~
</p>
</div>
</body>
</html>
2）淡入淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo() ：该方法允许渐变为给定的不透明度(0-1)。
语法：$(selector).fadeTo(speed,opacity,callback);
必需的speed参数规定效果的时长。 slow,fast，毫秒数
必需的opacity参数将淡入淡出设置为给定的不透明度。
可选的callback参数是该函数完成后所执行的函数名称。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Test</title>
<script src="jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut("slow");
$("#div2").fadeOut(3000);
$("#div3").fadeIn(2000);
$("#div4").fadeIn(5000);
$("#div1").fadeToggle(5000);
$("#div2").fadeToggle(6000);
$("#div3").fadeToggle(7000);
$("#div4").fadeToggle(8000);
$("#div2").fadeTo(2000,0.8) ;
$("#div3").fadeTo(2000,0.7) ;
$("#div4").fadeTo(2000,0.6) ;
$("#div5").fadeTo(2000,0.2) ;
});
});
</script>
</head>
<body>
<p>jQuery Test</p>
<button>Click Me</button>
<br><br>
<div id="div1" style="width: 100px;height: 100px;background-color: red"></div><br>
<div id="div2" style="width: 100px;height: 100px;background-color: yellow"></div><br>
<div id="div3" style="width: 100px;height: 100px;display:none;background-color: palevioletred"></div><br>
<div id="div4" style="width: 100px;height: 100px;display:none;background-color: green"></div><br>
<div id="div5" style="width: 200px;height: 200px; background-color: slateblue;"></div>
</body>
</html>
3）滑动
slideDown()
slideUp()
slideToggle()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Test</title>
<script src="jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
/**
* click button ,淡入淡出效果
*/
$("button").click(function(){
$("#div1").fadeOut("slow");
$("#div2").fadeOut(3000);
$("#div3").fadeIn(2000);
$("#div4").fadeIn(5000);
$("#div1").fadeToggle(5000);
$("#div2").fadeToggle(6000);
$("#div3").fadeToggle(7000);
$("#div4").fadeToggle(8000);
$("#div2").fadeTo(2000,0.8) ;
$("#div3").fadeTo(2000,0.7) ;
$("#div4").fadeTo(2000,0.6) ;
$("#div5").fadeTo(2000,0.2) ;
});
/**
* click,slidedown
*/
$("#slide").click(function(){
$("#myDiv").slideDown(3000);
});
/**
* click,slideup
*/
$("#slide").click(function(){
$("#myDiv").slideUp(5000);
});
/**
* click,slideToggle
*/
$("#slide").click(function(){
$("#myDiv").slideToggle(5000);
});
});
</script>
<style>
#myDiv,#slide{
padding: 5px;
text-align: center;
background-color: gray;
border: solid 2px #34ddff;
}
#myDiv{
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="slide">click me ,show style</div>
<div id="myDiv">
<p>jQuery Test</p>
<button>Click Me</button>
<br><br>
<div id="div1" style="width: 100px;height: 100px;background-color: red"></div><br>
<div id="div2" style="width: 100px;height: 100px;background-color: yellow"></div><br>
<div id="div3" style="width: 100px;height: 100px;display:none;background-color: palevioletred"></div><br>
<div id="div4" style="width: 100px;height: 100px;display:none;background-color: green"></div><br>
<div id="div5" style="width: 200px;height: 200px; background-color: slateblue;"></div>
</div>
</body>
</html>
4）动画
animate() 方法用于创建自定义动画。
语法：$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
5）停止动画
stop() 方法用于停止动画效果。该方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。
语法：$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
6）jQuery链
链chaining：通过jQuery，把动作方法链接在一起。chaining允许在一条语句中运行多个jQuery方法（相同元素上）。
扫一扫
365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
