• jQuery入门

    目录

    1、什么是jquery？

    2、jquery下载安装

    2.1、方式一官网下载 

    2.2、方式二引入谷歌和微软服务器的jQuery

    3、jQuery语法

    3.1、元素选择器

    3.2、属性选择器 

    3.3、CSS选择器

    3.4、事件函数

    3.5、hide()隐藏函数

    4、jQuery效果

    4.1、隐藏/显示

    4.2、淡入/淡出

    4.3、滑动

    4.4、动画

    4.5、stop函数停止动画

    4.6、函数链接

     

    前言：学习jQuery之前，必须先学习HTML+CSS+JS，后学jQuery才会更加简单。

    1、什么是jquery？

    jQuery 是一个 JavaScript 库。

    jQuery 极大地简化了 JavaScript 编程。

    jQuery 学习很容易。

    2、jquery下载安装

    jQuery的安装有二种方式，一种就是从官方网站进行下载，这里我提供一个1.8.3版本的jQuery文件，请自行提取。

    有两个版本的 jQuery 可供下载：

    Production version - 用于实际的网站中，已被精简和压缩，以后部署服务器用的都是精简版本。

    Development version - 用于测试和开发（未压缩，是可读的代码），开发练习使用这个就可以了。

    2.1、方式一官网下载 

    链接：https://pan.baidu.com/s/1p_-XkROq65rSKpPS745HRg 
    提取码：bs8c

    如果不想用这个版本，也可自习到官网下载，这里提供官网地址：Download jQuery | jQuery

    下载完之后，把jQuery文件放到项目的js包下

    在html中引入jQuery文件，这里使用script标签，src属性填写jQuery文件存放路径。 （注意：我这里是js包与html文件是同级关系，所以js前面不用写/）。

    1. <head>
    2. 	<meta charset="utf-8">
    3. 	<title>title>
    4. 	<script src="js/jquery-1.8.3.js">script>
    5. head>

    2.2、方式二引入谷歌和微软服务器的jQuery

    如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它，这里是谷歌服务器里面的jQuery，可以直接引入，不用再下载jQuery文件。

    谷歌：

    1. <head>
    2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
    3. script>
    4. head>

    微软：

    1. <head>
    2. <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
    3. script>
    4. head>

    3、jQuery语法

    3.1、元素选择器

    $(this).hide()

    演示 jQuery hide() 函数，隐藏当前的 HTML 元素。

    $("#test").hide()

    演示 jQuery hide() 函数，隐藏 id="test" 的元素。

    $("p").hide()

    演示 jQuery hide() 函数，隐藏所有

    元素。

    $(".test").hide()

    演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

    3.2、属性选择器 

    jQuery 使用 XPath 表达式来选择带有给定属性的元素。

    $("[href]") 选取所有带有 href 属性的元素。

    $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

    $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

    $("[href$='.txt']") 选取所有 href 值以 ".txt" 结尾的元素。

    3.3、CSS选择器

    jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<script src="js/jquery-1.8.3.js">script>
    8. 	<body>
    9. 		<p id="one">我要变绿p>
    10. 		<p id="two">我要变蓝p>
    11. 		<p id="three">我要变黄p>
    12. 		<button id="green">点我变绿button>
    13. 		<button id="blue">点我变蓝button>
    14. 		<button id="yellow">点我变黄button>
    15. 	body>
    16. 	<script>
    17. 		$(document).ready(function(){
    18. 			$("#green").click(function(){
    19. 				$("#one").css("background-color","green");
    20. 			});
    21. 			$("#blue").click(function(){
    22. 				$("#two").css("background-color","blue");
    23. 			});
    24. 			$("#yellow").click(function(){
    25. 				$("#three").css("background-color","yellow");
    26. 			});
    27. 		});
    28. 	script>
    29. html>

    3.4、事件函数

    事件函数指的是：当按钮的点击事件被触发时会调用一个函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

    事件函数说明
    $(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）
    $(selector).click(function)触发或将函数绑定到被选元素的点击事件
    $(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件
    $(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件
    $(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件

    3.5、hide()隐藏函数

    hide()隐藏函数相当于js中的display:none，指的是让元素隐藏功能。

    文档就绪函数

    1. $(document).ready(function(){
    2.  
    3.   // jQuery functions go here
    4.  
    5. });
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6.         <script src="js/jquery-1.8.3.js">script>
    7. 	head>
    8. 	<script>
    9. 		$(document).ready(function(){
    10. 			//p标签点击事件函数
    11. 			$("p").click(function(){
    12. 				//隐藏当前元素
    13. 				$(this).hide();
    14. 			});
    15. 		});
    16. 	script>
    17. 	<body>
    18. 		<p>点我消失p>
    19. 		<p>点我消失p>
    20. 		<p>点我消失p>
    21. 	body>
    22. html>

    4、jQuery效果

    4.1、隐藏/显示

    函数说明
    JQuery hide()隐藏
    JQuery show()显示

    jQuery toggle()

    		切换 hide() 和 show() 方法

    hide()和show()以及toggle()是可以进行填写毫秒值来延迟隐藏/显示效果的。 

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<script src="js/jquery-1.8.3.js">script>
    8. 	<body>
    9. 		<p id="p1">如果点击“隐藏”按钮，我就会消失。p>
    10. 		<button id="hide" type="button">隐藏button>
    11. 		<button id="show" type="button">显示button>
    12. 		<button type="button" id="button">切换button>
    13. 		<p>这是一个段落。p>
    14. 		<p>这是另一个段落。p>
    15. 	body>
    16. 	<script>
    17. 		// 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
    18. 		
    19. 		// 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
    20. 		$(document).ready(function(){
    21. 			$("#hide").click(function(){
    22. 				$("p").hide(1000);//hide和show里可以添加毫秒值  会有延迟显现/消失效果
    23. 			});
    24. 			$("#show").click(function(){
    25. 				$("p").show(1000);//hide和show里可以添加毫秒值  会有延迟显现/消失效果
    26. 			});
    27. 			$("#button").click(function(){
    28. 				$("p").toggle(1000);//toggle就是hide和show的整合，可以添加毫秒值 会有延迟显现/消失效果
    29. 			});
    30. 		});
    31. 		
    32. 	script>
    33. html>

    4.2、淡入/淡出

    函数说明
    fadeIn()淡入已隐藏的元素
    fadeOut()用于淡出可见元素
    fadeToggle可以在 fadeIn() 与 fadeOut() 方法之间进行切换
    fadeTo()方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<script src="js/jquery-1.8.3.js">script>
    8. 	<body>
    9. 		<p>演示带有不同参数的 fadeIn() 方法。p>
    10. 		<button id="fadeIn">点击这里，使三个矩形淡入button>
    11. 		<button id="fadeOut">点击这里，使三个矩形淡出button>
    12. 		<button id="fadeToggle">点击这里，使三个矩形淡入淡出button>
    13. 		<button id="fadeTo">点击这里，使三个矩形淡出透明度button>
    14. 		<br><br>
    15. 		<div id="div1" style="width:80px;height:80px;display:none;background-color:red;">div>
    16. 		<br>
    17. 		<div id="div2" style="width:80px;height:80px;display:none;background-color:green;">div>
    18. 		<br>
    19. 		<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;">div>
    20. 	body>
    21. 	<script>
    22. 		// 	可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    23. 		// 	可选的 callback 参数是 fading 完成后所执行的函数名称。
    24.  
    25. 		     //fadeIn  淡入
    26. 		$(document).ready(function() {
    27. 			$("#fadeIn").click(function() {
    28. 				$("#div1").fadeIn();
    29. 				$("#div2").fadeIn("slow");
    30. 				$("#div3").fadeIn(2000);
    31. 			});
    32. 			 //fadeOut 淡出
    33. 			$("#fadeOut").click(function(){
    34. 				$("#div1").fadeOut();
    35. 				$("#div2").fadeOut("slow");
    36. 				$("#div3").fadeOut(2000);
    37. 			});
    38. 			  //fadeToggle()淡入淡出
    39. 			$("#fadeToggle").click(function(){
    40. 				$("#div1").fadeToggle();
    41. 				$("#div2").fadeToggle("slow");
    42. 				$("#div3").fadeToggle(2000);
    43. 			});
    44. 			//fadeTo()函数 后面可以填写透明度
    45. 			$("#fadeTo").click(function(){
    46. 				$("#div1").fadeTo("slow",0.2);
    47. 				$("#div2").fadeTo("slow",0.4);
    48. 				$("#div3").fadeTo(2000,0.7);
    49. 			});
    50. 		});
    51. 	script>
    52. html>

    4.3、滑动

    函数说明
    slideDown()用于向下滑动元素
    slideUp()用于向上滑动元素
    slideToggle()可以在 slideDown() 与 slideUp() 方法之间进行切换
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			.panel,
    8. 			.flip {
    9. 				width: 500px;
    10. 				margin: 0 auto;
    11. 				padding: 5px;
    12. 				text-align: center;
    13. 				background: #e5eecc;
    14. 				border: solid 1px #c3c3c3;
    15. 			}
    16.  
    17. 			.panel {
    18. 				height: 120px;
    19. 				display: none;
    20. 			}
    21. 		style>
    22. 	head>
    23. 	<script src="js/jquery-1.8.3.js">script>
    24. 	<script>
    25. 		
    26.          $(document).ready(function(){
    27. 		    // jQuery slideDown() 方法用于向下滑动元素。
    28. 			// $(".flip").click(function(){
    29.             //   $(".panel").slideDown("slow");
    30. 			// });
    31. 			// jQuery slideUp() 方法用于向上滑动元素。
    32. 			// $(".flip").click(function(){
    33. 			// 	$(".panel").slideUp("slow");
    34. 			// });
    35. 			// jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
    36. 			$(".flip").click(function(){
    37. 				$(".panel").slideToggle("slow");
    38. 			});
    39. 		 });
    40. 	script>
    41. 	<body>
    42. 		<div class="panel">
    43. 			<p>欢迎光临本网站p>
    44. 	        <p>请您先进行注册p>
    45. 		div>
    46. 		<p class="flip">展开/收起p>
    47. 	body>
    48. html>

    4.4、动画

    animate函数

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<script src="js/jquery-1.8.3.js">script>
    8. 	<script>
    9. 		$(document).ready(function(){
    10. 			// 也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
    11. 			$("button").click(function(){
    12. 				$("div").animate(
    13. 				{left:'400px',
    14. 				 opacity:'0.5',
    15. 				 // 您可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
    16. 				 height:'toggle',
    17. 				 width:'+=150px'
    18. 				},1000);
    19. 			});
    20. 		});
    21. 	script>
    22. 	<body>
    23. 		<button>开始动画button>
    24. 		<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。p>
    25. 		<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    26. 		div>
    27. 	body>
    28. html>

    动画的排队执行

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<script src="js/jquery-1.8.3.js">script>
    8. 	<script> 
    9. 	$(document).ready(function(){
    10. 	  $("button").click(function(){
    11. 	    //把元素div赋值到一个变量
    12. 	    var div=$("div");
    13. 	    div.animate({height:'300px',opacity:'0.4'},"slow");
    14. 	    div.animate({width:'300px',opacity:'0.8'},"slow");
    15. 	    div.animate({height:'100px',opacity:'0.4'},"slow");
    16. 	    div.animate({width:'100px',opacity:'0.8'},"slow");
    17. 	  });
    18. 	});
    19. 	script> 
    20. 	<body>
    21. 		<button>开始动画button>
    22. 		<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。p>
    23. 		<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    24. 		div>
    25. 	body>
    26. html>

    动画右移字体变大

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<script src="js/jquery-1.8.3.js">script>
    8. 	<script> 
    9. 	$(document).ready(function(){
    10. 	  $("button").click(function(){
    11. 	    var div=$("div");  
    12. 	    div.animate({left:'100px'},"slow");
    13. 	    div.animate({fontSize:'3em'},"slow");
    14. 	  });
    15. 	});
    16. 	script> 
    17. 	<body>
    18. 		<button>开始动画button>
    19. 		<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。p>
    20. 		<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLOdiv>
    21. 	body>
    22. html>

    4.5、stop函数停止动画

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style type="text/css"> 
    7. 		#panel,#flip
    8. 		{
    9. 		padding:5px;
    10. 		text-align:center;
    11. 		background-color:#e5eecc;
    12. 		border:solid 1px #c3c3c3;
    13. 		}
    14. 		#panel
    15. 		{
    16. 		padding:50px;
    17. 		display:none;
    18. 		}
    19. 		style>
    20. 	head>
    21. 	<script src="js/jquery-1.8.3.js">script>
    22. 	<script>
    23. 		// stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
    24. 		$(document).ready(function(){
    25. 			$("#flip").click(function(){
    26. 				$("#panel").slideDown(5000);
    27. 			});
    28. 			//停止滑动
    29. 			$("#stop").click(function(){
    30. 				$("#panel").stop();
    31. 			});
    32. 		});
    33. 		
    34. 	script>
    35. 	<body>
    36. 		<button id="stop">停止滑动button>
    37. 		<div id="flip">点击这里，向下滑动面板div>
    38. 		<div id="panel">Hello world!div>
    39. 	body>
    40. html>

    4.6、函数链接

    一次写一条 jQuery 语句（一条接着另一条）很麻烦，不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="js/jquery-1.8.3.js">script>
    7. 	head>
    8. 	
    9. 	<script>
    10. 		$(document).ready(function(){
    11. 			$("button").click(function(){
    12. 				$("#p1").css("color","red").slideDown(1000).slideUp(1000);
    13. 			});
    14. 		});
    15. 	script>
    16. 	<body>
    17. 		<p id="p1">jQuery 乐趣十足！p>
    18. 		<button>点击这里button>
    19. 	body>
    20. html>
  • 相关阅读:
    最新uniapp开发微信小程序商城搭建教程（附源码）
    vue中使用video.js，且可以截图、录制和下载视频
    java计算机毕业设计校园办公管理系统源代码+数据库+系统+lw文档
    看图说话：对脏读、不可重复度、幻读进行总结
    系统安全分析与设计＞网络攻击
    如何在阿里云快速配置自动定时重启ECS云服务器?
    vue3为什么用proxy替代object.defineProperty
    大数据Hadoop之——Hadoop 3.3.4 HA（高可用）原理与实现（QJM）
    为什么估计的参数具有渐进高斯性？M-estimateor的渐进高斯性推导
    测试C语言static关键字的作用
  • 原文地址：https://blog.csdn.net/select_myname/article/details/126297033