这一节将汇总前面的JQuery的基础实例
1.选择器
1.$("this").hide()
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
6 </script>
7 <script type="text/javascript">
8 $(function(){
9 $("button").click(function(){
10 $("this").hide(); //this关键字隐藏当前对象
11 });
12 });
13 </script>
14 </head>
15 <body>
16
17 <button>点击我</button>
18
19 </body>
20 </html>
2.分别通过元素，类和id实现函数
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
6 </script>
7 <script type="text/javascript">
8 $(function(){
9 $(".button1").click(function(){
10 $("p").hide(); //会隐藏所有p元素的内容，哪怕p元素含有类或者id
11 });
12 $(".button2").click(function(){
13 $(".p1").hide();
14 });
15 $(".button3").click(function(){
16 $("#p1").hide();
17 });
18 });
19 </script>
20 </head>
21 <body>
22 <p>this is a sentence</p>
23 <h1 class="p1">this is a sentence</p>
24 <h2 id="p1">this is a sentence</p>
25 <button class="button1">通过元素</button>
26 <button class="button2">通过类</button>
27 <button class="button3">通过id</button>
28 </body>
29 </html>
2.JQuery事件
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
6 </script>
7 <script type="text/javascript">
8 $(function(){
9 $(".link_p1").click(function(){ //点击消失事件
10 $("#p1").hide();
11 });
12 $(".link_p2").dblclick(function(){ //双击消失事件
13 $("#p2").hide();
14 });
15 $("#p3").mouseenter(function(){ //鼠标进入事件
16 alert("您进入了");
17 });
18 $("#p3").mouseleave(function(){ //鼠标离开事件 ps：hover实现的是mouseenter和mouseleave方法的集合
19 alert("您离开了");
20 });
21 $("#p4").mousedown(function(){ //鼠标按下事件
22 alert("您按下了");
23 });
24 $("#p4").mouseuo(function(){ //鼠标按起事件
25 alert("您按起了");
26 });
27
28
29
30 });
31 </script>
32 </head>
33 <body>
34 <p id="p1">点击事件，点击之后消失</p>
35 <p id="p2">双击事件，双击之后消失</p>
36 <p id="p3">实现鼠标进入，离开的弹窗事件</p>
37 <p id="p4">实现鼠标按下，按起的弹窗事件</p>
38
39 <button class="link_p1">点击之后，id为p1的段落消失</button>
40 <button class="link_p2">双击之后，id为p2的段落消失</button>
41
42 </body>
43 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>W3Cschool教程(w3cschool.cn)</title>
6 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
7 </script>
8 <script>
9 $(document).ready(function(){
10 $("input").focus(function(){ //聚焦事件
11 $(this).css("background-color","#cccccc");
12 });
13 $("input").blur(function(){ //分散事件
14 $(this).css("background-color","#000000");
15 });
16 });
17 </script>
18 </head>
19 <body>
20
21 Name: <input type="text" name="fullname"><br>
22 Email: <input type="text" name="email">
23
24 </body>
25 </html>
3.隐藏和显示事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$("p").hide();
});
$(".show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<input type="text" id="text"><br>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button class="hide">隐藏</button>
<button class="show">显示</button>
</body>
</html>
toggle（）实现隐藏和显示
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
6 </script>
7 <script>
8 $(document).ready(function(){
9 $("button").click(function(){
10 $("p").toggle("slow");
11 });
12 });
13 </script>
14 </head>
15 <body>
16
17 <button>隐藏/显示</button>
18 <p>这是一个文本段落。</p>
19 <p>这是另外一个文本段落。</p>
20 </body>
21 </html>
4.淡入和淡出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".show").click(function(){
$("p").fadeIn(); //其中的参数:speed,easing,callback 其中fadeTo方法与这两个方法类似，其作用是实现元素的样式的改变
});
$(".hide").click(function(){
$("p").fadeOut(); //toggle()方法实现淡入和淡出的集合
});
});
</script>
<style type="text/css">
p{
display: none;
}
</style>
</head>
<body>
<p>这句话会淡入和淡出</p>
<button class="show">点击淡入</button>
<button class="hide">点击淡出</button>
</body>
</html>
5.下拉和回收
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
6 </script>
7 <script>
8 $(document).ready(function(){
9 $(".drow_down").click(function(){
10 $(".p2").slideDown(); //实现下拉
11 });
12 $(".shrink").click(function(){
13 $(".p2").slideUp(); //实现收缩
14 });
15
16 });
17 </script>
18
19 <style type="text/css">
20 .p2{
21 display: none;
22 }
23 </style>
24 </style>
25 </head>
26 <body>
27
28 <p class="p1">这句话1</p>
29 <p class="p2">这句话2</p>
30 <button class="drow_down">点击下拉</button>
31 <button class="shrink">点击收缩</button>
32
33 </body>
34 </html>
6.动画的实现
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
6 </script>
7 <script>
8 $(document).ready(function(){
9 $("button").click(function(){
10 $("div").animate({left:‘250px‘, //值部分需要‘’，且使用逗号分开
11 opacity: ‘0.5‘,
12 width:‘400px‘,
13 height: ‘+=150px‘, //自增部分
14 });
15
16 });
17 });
18 </script>
19 </head>
20
21 <body>
22 <button>开始动画</button>
23 <p> 我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
24 <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
25 </div>
26
27 </body>
28 </html>
(未完待续...)
时间： 2024-08-26 05:18:38