这一节将汇总前面的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 '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;100px;position:absolute;"> 25 </div> 26 27 </body> 28 </html>
(未完待续...)