经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
前端-jQuery
来源：cnblogs　　作者：lsf123456　　时间：2019/8/2 8:48:57　　对本文有异议

一、定义

1. 什么是jQuery

<1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

2. 什么是jQuery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery里的方法: $(“#test”).html();

  1. $("#test").html()    
  2.        //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 
  3.  
  4.        // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 
  5.  
  6.        //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
  7.  
  8.        //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 
  9.  
  10. var $variable = jQuery 对象
  11. var variable = DOM 对象
  12.  
  13. $variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

jquery的基础语法：$(selector).action()

二、选择器

1. 基本选择器

$("*")  选择所有元素

$("#id")   id选择器

$(".class")  class选择器

$("element")  标签选择器

$(".class,p,div")  组合选择器

2. 层级选择器

$(".outer div")  后代选择器

$(".outer>div")  子代选择器

$(".outer+div")  选择后一个兄弟元素

$(".outer~div")  选择后面的所有兄弟元素

3. 属性选择器

$("[name='aaa']")

$("[name='aaa'][id='div1']")  筛选多个属性

4. 表单选择器

$(":text")  注意只适用于input标签 

  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <meta charset="UTF-8">
  5.  5         <title>Title</title>
  6.  6     </head>
  7.  7     <body>
  8.  8         <p>hello</p>
  9.  9         <div id="div1" class="outer" name="aaa">outer
  10. 10             <div class="inner">inner
  11. 11                 <p>p2</p>
  12. 12             </div>
  13. 13             <p>p1</p>
  14. 14         </div>
  15. 15         <div>div1</div>
  16. 16         <a href="">aaa</a>
  17. 17         <div>div2</div>
  18. 18         <input type="text" value="123456"/>
  19. 19         
  20. 20         <script src="js/jquery-3.4.1.js"></script>
  21. 21         <script>
  22. 22 //            //基本选择器
  23. 23 //            $("*").css("color","red")
  24. 24 //            $("#div1").css("color","aqua")
  25. 25 //            $(".inner").css("color","beige")
  26. 26 //            $("p").css("color","brown")
  27. 27 //            $(".inner,p,div").css("color","black")
  28. 28             
  29. 29 //            //层级选择器
  30. 30 //            $(".outer div").css("color","red")
  31. 31 //            $(".outer>div").css("color","red")
  32. 32 //            $(".outer+div").css("color","red")
  33. 33 //            $(".outer~div").css("color","red")
  34. 34             
  35. 35             //属性选择器
  36. 36 //            $("[id='div1']").css("color","red")
  37. 37 //            $("[name='aaa'][id='div1']").css("color","red") //筛选多个属性
  38. 38             
  39. 39             //表单选择器
  40. 40             $(":text").css("color","red")
  41. 41         </script>
  42. 42     </body>
  43. 43 </html>
示例

三、筛选器

1. 基本筛选器

$("li:first")  $("li:last")

$("li:eq(2)") 

$("li:even")  $("li:odd")

$("li:gt(1)")  $("li:lt(1)")

2. 过滤筛选器

$("li").eq(2) 

$("li").first() 

3. 查找筛选器

$("div").children(".test")

$("div").find(".test") 

$(".test").next()

$(".test").nextAll()

$(".test").nextUntil() 

$("div").prev()

$("div").prevAll()

$("div").prevUntil() 

$(".test").parent()

$(".test").parents()

$(".test").parentUntil() 

$("div").siblings()

  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <meta charset="UTF-8">
  5.  5         <title>Title</title>
  6.  6     </head>
  7.  7     <body>
  8.  8         <p>hello</p>
  9.  9         <div id="div1" class="outer" name="aaa">outer
  10. 10             <div class="inner">inner
  11. 11                 <p id="p2">p2</p>
  12. 12             </div>
  13. 13             <p>p1</p>
  14. 14         </div>
  15. 15         <div>div1</div>
  16. 16         <a href="">aaa</a>
  17. 17         <div>div2</div>
  18. 18         <p id="p1">pppp</p>
  19. 19         <ul>
  20. 20             <li id="li1">1111</li>
  21. 21             <li>2222</li>
  22. 22             <li>3333</li>
  23. 23             <li>4444</li>
  24. 24             <li>5555</li>
  25. 25         </ul>
  26. 26         
  27. 27         
  28. 28         <script src="js/jquery-3.4.1.js"></script>
  29. 29         <script type="text/javascript">
  30. 30 //            //基本筛选器
  31. 31 //            $("li:first").css("color","red") //选择第一个li
  32. 32 //            $("li:last").css("color","red") //选择最后一个li
  33. 33 //            $("li:eq(2)").css("color","red") //选择第2个li，从0开始计数
  34. 34 //            $("li:even").css("color","red") //选择偶数行的li，从0开始计数
  35. 35 //            $("li:odd").css("color","red") //选择奇数行的li，从0开始计数
  36. 36 //            $("li:gt(2)").css("color","red") //选择行数大于2的li，从0开始计数
  37. 37 //            $("li:lt(2)").css("color","red") //选择行数小于2的li，从0开始计数
  38. 38 
  39. 39 //            //过滤筛选器
  40. 40 //            $("li").eq(2).css("color","red")
  41. 41 //            $("li").first().css("color","red")
  42. 42             
  43. 43 //            //查找筛选器
  44. 44 //            $(".outer").children("p").css("color","red") //查找子代
  45. 45 //            $(".outer").find("p").css("color","red") //查找后代
  46. 46 
  47. 47 //            $(".outer").next().css("color","red") //查找后一个兄弟标签
  48. 48 //            $(".outer").nextAll().css("color","red") //查找后面所有兄弟标签
  49. 49 //            $(".outer").nextUntil("#p1").css("color","red") //查找后面所有兄弟标签，直到p1(不包含p1)
  50. 50 
  51. 51 //            $("li").eq(2).prev().css("color","red") //查找前一个兄弟标签
  52. 52 //            $("li").eq(2).prevAll().css("color","red") //查找前面所有兄弟标签
  53. 53 //            $("li").eq(2).prevUntil("#li1").css("color","red") //查找前面所有兄弟标签，直到li1(不包含li1)
  54. 54                 
  55. 55 //            $("#p2").parent().css("color","red") //查找父代
  56. 56 //            $("#p2").parents().css("color","red") //查找所有祖先
  57. 57 //            $("#p2").parentsUntil(".outer").css("color","red") //查找所有祖先，直到".outer"，(不包含".outer")
  58. 58 
  59. 59 //            $(".outer").siblings().css("color","red") //查找所有兄弟标签
  60. 60         </script>
  61. 61     </body>
  62. 62 </html>
示例

四、操作元素

1. 属性操作

  1. --------------------------属性
  2. $("").attr();   $("").attr("class") 显示class属性的值    $("").attr("class","a") 修改class属性
  3. $("").removeAttr();
  4. $("").prop();
  5. $("").removeProp();
  6. --------------------------CSS类
  7. $("").addClass(class|fn)
  8. $("").removeClass([class|fn])
  9. --------------------------HTML代码/文本/值
  10. $("").html([val|fn])
  11. $("").text([val|fn])
  12. $("").val([val|fn|arr])
  13. ---------------------------
  14. $("").css("color","red")
  1. <input id="chk1" type="checkbox" />是否可见
  2. <input id="chk2" type="checkbox" checked="checked" />是否可见
  3.  
  4.  
  5. <script>
  6.  
  7. //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
  8. //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
  9. //像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
  10. //需要使用prop方法去操作才能获得正确的结果。
  11.  
  12.  
  13. //    $("#chk1").attr("checked")
  14. //    undefined
  15. //    $("#chk1").prop("checked")
  16. //    false
  17.  
  18. //  ---------手动选中的时候attr()获得到没有意义的undefined-----------
  19. //    $("#chk1").attr("checked")
  20. //    undefined
  21. //    $("#chk1").prop("checked")
  22. //    true
  23.  
  24.     console.log($("#chk1").prop("checked"));//false
  25.     console.log($("#chk2").prop("checked"));//true
  26.     console.log($("#chk1").attr("checked"));//undefined
  27.     console.log($("#chk2").attr("checked"));//checked
  28. </script>
  29.  
  30. attr和prop
  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <meta charset="UTF-8">
  5.  5         <title>Title</title>
  6.  6     </head>
  7.  7     <body>
  8.  8         <button onclick="selectall()">全选</button>
  9.  9         <button onclick="reverse()">反选</button>
  10. 10         <button onclick="cancel()">取消</button>
  11. 11         <table>
  12. 12             <tr>
  13. 13                 <td><input type="checkbox" /></td>
  14. 14                 <td>111</td>
  15. 15             </tr>
  16. 16             <tr>
  17. 17                 <td><input type="checkbox" /></td>
  18. 18                 <td>222</td>
  19. 19             </tr>
  20. 20             <tr>
  21. 21                 <td><input type="checkbox" /></td>
  22. 22                 <td>333</td>
  23. 23             </tr>
  24. 24         </table>
  25. 25         
  26. 26         <script src="js/jquery-3.4.1.js"></script>
  27. 27         <script>
  28. 28             function selectall(){
  29. 29                 $(":checkbox").each(function(){
  30. 30                     $(this).prop("checked",true);
  31. 31                 })
  32. 32             }
  33. 33             function cancel(){
  34. 34                 $(":checkbox").each(function(){
  35. 35                     $(this).prop("checked",false);
  36. 36                 })
  37. 37             }
  38. 38             function reverse(){
  39. 39                 $(":checkbox").each(function(){
  40. 40                     if($(this).prop("checked")){
  41. 41                         $(this).prop("checked",false);
  42. 42                     }
  43. 43                     else{
  44. 44                         $(this).prop("checked",true);
  45. 45                     }
  46. 46                 })
  47. 47             }
  48. 48         </script>
  49. 49     </body>
  50. 50 </html>
全反选

 jquery循环的方法

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<p>1111</p>
  9. 		<p>2222</p>
  10. 		<p>3333</p>
  11. 		<p>4444</p>
  12. 		
  13. 		<script src="js/jquery-3.4.1.js"></script>
  14. 		<script>
  15. 			li=[11,22,33];
  16. 			//方式一：
  17. 			$.each(li,function(x,y){
  18. 				console.log(x,y);//x为索引，y为值
  19. 			})
  20. 			//方式二：
  21. 			$("p").each(function(){
  22. 				console.log($(this).html())
  23. 			})
  24. 		</script>
  25. 	</body>
  26. </html>

2. 文档处理

  1. //创建一个标签对象
  2.     $("<p>")
  3.  
  4. //内部插入
  5.     $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
  6.     $("").appendTo(content)       ----->$("p").appendTo("div");
  7.     $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
  8.     $("").prependTo(content)      ----->$("p").prependTo("#foo");
  9.  
  10. //外部插入
  11.     $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
  12.     $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
  13.     $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
  14.     $("").insertBefore(content)   ----->$("p").insertBefore("#foo");
  15.  
  16. //替换
  17.     $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
  18.  
  19. //删除
  20.     $("").empty()
  21.     $("").remove([expr])
  22.  
  23. //复制
  24.     $("").clone([Even[,deepEven]])
  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <meta charset="UTF-8">
  5.  5         <title></title>
  6.  6     </head>
  7.  7     <body>
  8.  8         <a href="">click</a>
  9.  9         <div class="c1">
  10. 10             <p>PPP</p>
  11. 11         </div>
  12. 12         <button>add</button>
  13. 13         
  14. 14         <script src="js/jquery-3.4.1.js"></script>
  15. 15         <script type="text/javascript">
  16. 16             $("button").click(function(){
  17. 17 //                $(".c1").append("<h1>hello</h1>")
  18. 18                 var $ele=$("<h1>");
  19. 19                 $ele.html("hello");
  20. 20 //                //内部插入
  21. 21 //                $(".c1").append($ele)
  22. 22 //                $ele.appendTo(".c1")
  23. 23 //                $(".c1").prepend($ele)
  24. 24 //                $ele.prependTo(".c1")
  25. 25 
  26. 26 //                //外部插入
  27. 27 //                $(".c1").after($ele)
  28. 28 //                $ele.insertAfter(".c1")
  29. 29 //                $(".c1").before($ele)
  30. 30 //                $ele.insertBefore(".c1")
  31. 31                 
  32. 32 //                //替换
  33. 33 //                $(".c1").replaceWith($ele)
  34. 34                 
  35. 35 //                //删除
  36. 36 //                $(".c1").empty()  //清空".c1"的内容
  37. 37 //                $(".c1").remove()  //删除".c1"标签
  38. 38             })
  39. 39         </script>
  40. 40     </body>
  41. 41 </html>
示例
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <div class="outer">
  9.             <div class="item">
  10.                 <button onclick="add(this)">+</button>
  11.                 <input type="text" />
  12.             </div>
  13.         </div>
  14.         
  15.         <script src="js/jquery-3.4.1.js"></script>
  16.         <script>
  17.             function add(self){
  18.                 //var $clone_obj=$(.item).clone();
  19.                 if($(self).html()=="+"){
  20.                     var $clone_obj=$(self).parent().clone()
  21.                     $(".outer").append($clone_obj)
  22.                     $clone_obj.children("button").html("-")
  23.                 }
  24.                 else{
  25.                     $(self).parent().remove()
  26.                 }
  27.             }
  28.         </script>
  29.     </body>
  30. </html>
复制

3. css操作

  1. CSS
  2.         $("").css(name|pro|[,val|fn])
  3.     位置
  4.         $("").offset([coordinates])
  5.         $("").position()
  6.         $("").scrollTop([val])
  7.         $("").scrollLeft([val])
  8.     尺寸
  9.         $("").height([val|fn])
  10.         $("").width([val|fn])
  11.         $("").innerHeight()
  12.         $("").innerWidth()
  13.         $("").outerHeight([soptions])
  14.         $("").outerWidth([options])
  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <meta charset="UTF-8">
  5.  5         <title>Title</title>
  6.  6         <style>
  7.  7             *{
  8.  8                 margin: 0;
  9.  9                 padding: 0;
  10. 10             }
  11. 11             .div1,.div2{
  12. 12                 width: 200px;
  13. 13                 height: 200px;                
  14. 14             }
  15. 15             .div1{
  16. 16                 border: 3px solid red;
  17. 17                 padding: 20px;
  18. 18                 margin: 10px;
  19. 19                 background-color: aqua;
  20. 20             }
  21. 21             .div2{
  22. 22                 background-color: cadetblue;
  23. 23             }
  24. 24             .outer{
  25. 25                 position: relative;
  26. 26             }
  27. 27         </style>
  28. 28     </head>
  29. 29     <body>
  30. 30         <div class="div1"></div>
  31. 31         <div class=outer>
  32. 32             <div class="div2"></div>
  33. 33         </div>
  34. 34         
  35. 35         <script src="js/jquery-3.4.1.js"></script>
  36. 36         <script>
  37. 37             //offset() 相对于视口的偏移量
  38. 38             console.log($(".div1").offset().top) //0
  39. 39             console.log($(".div1").offset().left) //0
  40. 40             console.log($(".div2").offset().top) //264.79998779296875
  41. 41             console.log($(".div2").offset().left) //0
  42. 42             
  43. 43             //position() 相对于已经定位的父标签的偏移量
  44. 44             console.log($(".div1").position().top) //0
  45. 45             console.log($(".div1").position().left) //0
  46. 46             console.log($(".div2").position().top) //0
  47. 47             console.log($(".div2").position().left) //0
  48. 48             
  49. 49             //height() width() 获取标签的width、heigth；加入参数表示修改
  50. 50             console.log($(".div1").height()) //200
  51. 51 //            $(".div1").width("500px")
  52. 52             //innerHeight() outerHeight()
  53. 53             console.log($(".div1").innerHeight()) //240 (包括padding)
  54. 54             console.log($(".div1").outerHeight()) //244.8 (包括border)
  55. 55             console.log($(".div1").outerHeight(true)) //264.8(包括magin)
  56. 56         </script>
  57. 57     </body>
  58. 58 </html>
示例
  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <meta charset="UTF-8">
  5.  5         <title>Title</title>
  6.  6         <style>
  7.  7             *{
  8.  8                 margin: 0;
  9.  9                 padding: 0;
  10. 10             }
  11. 11             .div1,.div2{
  12. 12                 width: 200px;
  13. 13                 height: 1000px;                
  14. 14             }
  15. 15             .div1{
  16. 16                 border: 3px solid red;
  17. 17                 padding: 20px;
  18. 18                 margin: 10px;
  19. 19                 background-color: aqua;
  20. 20             }
  21. 21             .div2{
  22. 22                 background-color: cadetblue;
  23. 23             }
  24. 24             .top{
  25. 25                 position: fixed;
  26. 26                 right: 20px;
  27. 27                 bottom: 20px;
  28. 28                 width: 90px;
  29. 29                 height: 50px;
  30. 30                 background-color: antiquewhite;
  31. 31                 text-align: center;
  32. 32                 line-height: 50px;
  33. 33             }
  34. 34             .hide{
  35. 35                 display: none;
  36. 36             }
  37. 37         </style>
  38. 38     </head>
  39. 39     <body>
  40. 40         <div class="div1"></div>
  41. 41         <div class="div2"></div>
  42. 42         <div class="top hide">返回顶部</div>
  43. 43     </body>
  44. 44     <script src="js/jquery-3.4.1.js"></script>
  45. 45     <script>
  46. 46         window.onscroll=function(){
  47. 47 //            console.log($(window).scrollTop());
  48. 48             if($(window).scrollTop()>50){
  49. 49                 $(".top").removeClass("hide")
  50. 50             }
  51. 51             else{
  52. 52                 $(".top").addClass("hide")
  53. 53             }
  54. 54         }
  55. 55         $(".top").click(function(){
  56. 56             $(window).scrollTop("0")
  57. 57         })
  58. 58     </script>
  59. 59 </html>
返回顶部

五、事件

1. 事件绑定

  1.     <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<ul>
  9. 			<li>111</li>
  10. 			<li>222</li>
  11. 			<li>333</li>
  12. 			<li>444</li>
  13. 		</ul>
  14. 		<button>click</button>
  15. 		
  16. 		
  17. 		<script src="js/jquery-3.4.1.js"></script>
  18. 		<script type="text/javascript">
  19. //			//方式一
  20. //			$("ul li").click(function(){  //jquery会自动遍历取得的所有标签
  21. //				(123)
  22. //			})
  23. //			
  24. //			//方式二
  25. //			$("ul li").bind("click",function(){
  26. //				alert(123)
  27. //			})
  28. //			//解除绑定
  29. //			$("ul li").unbind("click")
  30. //
  31. 			//方式三(事件委托)
  32. 			$("ul").on("click","li",function(){
  33. 				alert(123)
  34. 			})
  35. 			//用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，
  36. 			//然后动态添加li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件
  37. 			$("button").click(function(){
  38. 				var $ele=$("<li>")
  39. 				var len=$("ul li").length
  40. 				$ele.html((len+1)*111)
  41. 				$("ul").append($ele)
  42. 			})
  43. 		</script>
  44. 	</body>
  45. </html>
  1. [data]参数的调用:
  2.          function myHandler(event) {
  3.          alert(event.data.foo);
  4.          }
  5.          $("li").on("click", {foo: "bar"}, myHandler)

2. 页面载入

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<ul>
  9. 			<li>111</li>
  10. 			<li>222</li>
  11. 			<li>333</li>
  12. 			<li>444</li>
  13. 		</ul>
  14. 		<button>click</button>
  15. 		
  16. 		
  17. 		<script src="js/jquery-3.4.1.js"></script>
  18. 		<script type="text/javascript">
  19. //			//页面载入
  20. //			//方式一
  21. //			$(document).ready(function(){
  22. //				$("ul li").html("hello")
  23. //			})
  24. 			
  25. 			//方式二
  26. 			$(function(){
  27. 				$("ul li").html("hello")
  28. 			})
  29. 		</script>
  30. 	</body>
  31. </html>

六、动画效果

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5     <title>Title</title>
  6.  6     <script src="jquery-2.1.4.min.js"></script>
  7.  7     <script>
  8.  8 
  9.  9 $(document).ready(function() {
  10. 10     $("#hide").click(function () {
  11. 11         $("p").hide(1000);
  12. 12     });
  13. 13     $("#show").click(function () {
  14. 14         $("p").show(1000);
  15. 15     });
  16. 16 
  17. 17 //用于切换被选元素的 hide() 与 show() 方法。
  18. 18     $("#toggle").click(function () {
  19. 19         $("p").toggle();
  20. 20     });
  21. 21 })
  22. 22 
  23. 23     </script>
  24. 24     <link type="text/css" rel="stylesheet" href="style.css">
  25. 25 </head>
  26. 26 <body>
  27. 27 
  28. 28 
  29. 29     <p>hello</p>
  30. 30     <button id="hide">隐藏</button>
  31. 31     <button id="show">显示</button>
  32. 32     <button id="toggle">切换</button>
  33. 33 
  34. 34 </body>
  35. 35 </html>
显示隐藏
  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5     <title>Title</title>
  6.  6     <script src="jquery-2.1.4.min.js"></script>
  7.  7     <script>
  8.  8     $(document).ready(function(){
  9.  9      $("#slideDown").click(function(){
  10. 10          $("#content").slideDown(1000);
  11. 11      });
  12. 12       $("#slideUp").click(function(){
  13. 13          $("#content").slideUp(1000);
  14. 14      });
  15. 15       $("#slideToggle").click(function(){
  16. 16          $("#content").slideToggle(1000);
  17. 17      })
  18. 18   });
  19. 19     </script>
  20. 20     <style>
  21. 21 
  22. 22         #content{
  23. 23             text-align: center;
  24. 24             background-color: lightblue;
  25. 25             border:solid 1px red;
  26. 26             display: none;
  27. 27             padding: 50px;
  28. 28         }
  29. 29     </style>
  30. 30 </head>
  31. 31 <body>
  32. 32 
  33. 33     <div id="slideDown">出现</div>
  34. 34     <div id="slideUp">隐藏</div>
  35. 35     <div id="slideToggle">toggle</div>
  36. 36 
  37. 37     <div id="content">helloworld</div>
  38. 38 
  39. 39 </body>
  40. 40 </html>
滑动
  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5     <title>Title</title>
  6.  6     <script src="jquery-2.1.4.min.js"></script>
  7.  7     <script>
  8.  8     $(document).ready(function(){
  9.  9    $("#in").click(function(){
  10. 10        $("#id1").fadeIn(1000);
  11. 11 
  12. 12 
  13. 13    });
  14. 14     $("#out").click(function(){
  15. 15        $("#id1").fadeOut(1000);
  16. 16 
  17. 17    });
  18. 18     $("#toggle").click(function(){
  19. 19        $("#id1").fadeToggle(1000);
  20. 20 
  21. 21 
  22. 22    });
  23. 23     $("#fadeto").click(function(){
  24. 24        $("#id1").fadeTo(1000,0.4);
  25. 25 
  26. 26    });
  27. 27 });
  28. 28 
  29. 29 
  30. 30 
  31. 31     </script>
  32. 32 
  33. 33 </head>
  34. 34 <body>
  35. 35       <button id="in">fadein</button>
  36. 36       <button id="out">fadeout</button>
  37. 37       <button id="toggle">fadetoggle</button>
  38. 38       <button id="fadeto">fadeto</button>
  39. 39 
  40. 40       <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
  41. 41 
  42. 42 </body>
  43. 43 </html>
淡入淡出

七、扩展与插件

1. 编写JQuery插件

  1. <script>
  2.     
  3. $.extend(object)      //为JQuery 添加一个静态方法。
  4. $.fn.extend(object)   //为JQuery实例添加一个方法。
  5.  
  6.  
  7.     jQuery.extend({
  8.           min: function(a, b) { return a < b ? a : b; },
  9.           max: function(a, b) { return a > b ? a : b; }
  10.         });
  11.     console.log($.min(3,4));
  12.  
  13. //-----------------------------------------------------------------------
  14.  
  15. $.fn.extend({
  16.     "print":function(){
  17.         for (var i=0;i<this.length;i++){
  18.             console.log($(this)[i].innerHTML)
  19.         }
  20.  
  21.     }
  22. });
  23.  
  24. $("p").print();
  25. </script>

2. 定义作用域

定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。

  1. (function(a,b){return a+b})(3,5)
  2.  
  3.        (function ($) { })(jQuery);
  4. //相当于
  5.         var fn = function ($) { };
  6.         fn(jQuery);

3. 默认参数

定义了jQuery插件之后，如果希望某些参数具有默认值，那么可以以这种方式来指定。

  1. /step01 定义JQuery的作用域
  2. (function ($) {
  3.     //step03-a 插件的默认值属性
  4.     var defaults = {
  5.         prevId: 'prevBtn',
  6.         prevText: 'Previous',
  7.         nextId: 'nextBtn',
  8.         nextText: 'Next'
  9.         //……
  10.     };
  11.     //step06-a 在插件里定义方法
  12.     var showLink = function (obj) {
  13.         $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
  14.     }
  15.  
  16.     //step02 插件的扩展方法名称
  17.     $.fn.easySlider = function (options) {
  18.         //step03-b 合并用户自定义属性，默认属性
  19.         var options = $.extend(defaults, options);
  20.         //step4 支持JQuery选择器
  21.         //step5 支持链式调用
  22.         return this.each(function () {
  23.             //step06-b 在插件里定义方法
  24.             showLink(this);
  25.         });
  26.     }
  27. })(jQuery);

 

原文链接：http://www.cnblogs.com/lsf123456/p/11276805.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号