jQuery前端框架 - 一小时了解与使用

文章目录

前言
一、jQuery的引入
- 1. 网页引入
- 2. 本地文件
二. jQuery选择器
- 1. 常用的三种选择器
- 拓展：
- 2. a标签超链接
三. jQuery操作样式
四. jQuery动画
- 1. jQuery动画 - animate()方法
- 2. jQuery animate() - 操作多个属性
- 3. jQuery animate() - 使用相对值
- 4. jQuery animate() - 使用预定义的值
- 5. jQuery animate() - 使用队列功能

前言

jQuery简介：

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库
在我们开始学习之前，有几个问题希望大家明白

1.什么是jQuery？
jQuery是JS写的插件库，说白了，就是一个JS文件。jQuery 极大地简化了JS编程。所以jQuery 相对JS来说，学习起来会很容易。
2.jQuery和JS的区别是什么？
凡是用jQuery能实现的，JS都能实现，JS能实现的，jQuery却不一定能实现。
3.jQuery的宗旨是：”Write less, do more”，“写的更少，做的更多”。

一、jQuery的引入

jQuery的引入有两种，一个是从网页直接引入，还有一个就是从本地文件引入。

1. 网页引入

网址：http://code.jquery.com/jquery-latest.js

<!--网址引入-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(function () {
        alert(123);
    });
</script>

打开网址直接进行引用

2. 本地文件

打开网址，全选复制，新建一个js文件，粘贴进去，然后再引入，同样可以实现。

<!--本地引入-->
<script src="jQuery.js"></script>
<script>
    $(function () {
        alert(456);
    });
</script>

建立了一个名字为jQuery的JS文件进行引用

相对来说，方法二更快一些，也更稳定

二. jQuery选择器

jQuery 选择器允许对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。

1. 常用的三种选择器

元素选择器
id选择器
class选择器（类选择器）

<p id="p1" class="p2">我是一个段落</p>
<script src="jq.js"></script>
<script>
    $("p").click(function () {			// 元素选择器
        alert("出来");
    });
    $("#p1").click(function () {		// #id 选择器
        alert("出来");
    });
    $(".p2").click(function () {		// .class 选择器
        alert("出来");
    });
</script>

补充解释：
- 元素选择器：jQuery 元素选择器基于元素名选取元素。
- #id 选择器: jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
- .class 选择器：jQuery 类选择器可以通过指定的 class 查找元素。

拓展：

语法								描述
$("*")						选取所有元素
$(this)						选取当前 HTML 元素
$("p.intro")				选取 class 为 intro 的 <p> 元素
$("p:first")				选取第一个 <p> 元素
$("ul li:first")			选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")		选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")					选取带有 href 属性的元素
$("a[target='_blank']")		选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")				选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")				选取偶数位置的 <tr> 元素
$("tr:odd")					选取奇数位置的 <tr> 元素

补充语法：

ready(): 在整个文档加载结束后进行触发
hide(): 隐藏html文档元素

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
	$(document).ready(function(){
		$("button").click(function(){
			$("*").hide();
		});
	});
	</script>
	<body>
		<h1 class="class1">这是标题</h1>
		<p>
		    <ul>
		        <li>北京</li>
		        <li>上海</li>
		        <li>广州</li>
		    </ul>
		</p>
		<p class="p2">
		    <ul>
		        <li>深圳</li>
		        <li>长沙</li>
		        <li>武汉</li>
		    </ul>
		</p>
		<p><a href="www.google.com" target="_blank">google</a></p>
		<p><a href="www.baidu.com" target="_parent">百度</a></p>
		<button>按钮</button>
		<input type="button" value="按钮2">
	</body>
</html>

补充解释：
_blank：在新窗口中打开被链接文档。
_parent：在父框架集中打开被链接文档。

2. a标签超链接

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。

代码

 <html lang="en">
 	<head>
 		<meta charset="UTF-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>Document</title>
 	</head>
 	<body>
 		<table border="1">
 			<tr><th>姓名</th><th>年龄</th></tr>
 			<tr><td>顾安</td><td>18</td></tr>
 			<tr><td>夏洛</td><td>19</td></tr>
 			<tr><td>木木</td><td>20</td></tr>
 			<tr><td>大海</td><td>21</td></tr>
 			<tr><td>惊蛰</td><td>22</td></tr>
 		</table>
 	</body>
 	<script src="./jquery.js"></script>
 	<script>
 	$(document).ready(function(){
 		// 选取偶数位置的 <tr> 元素
 		$("tr:even").css("background-color","red");
 	});
 	</script>
 </html>

补充解释：
创建一个表格，并选取偶数位置的 < tr> 元素，将其背景颜色变为红色
该代码块使用了本地引入

一般建议使用本地引入
如果网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
也就是说，把它们放到一个单独的文件中会更好，通过 src 属性来引用文件

三. jQuery操作样式

滚动条事件
overflow 属性：规定当内容溢出元素框时发生的事情
scroll: 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 100px;
				
				/* overflow 属性规定当内容溢出元素框时发生的事情 */
				/* scroll: 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 */
				overflow: scroll;
			}
		</style>
	</head>
	<body>
		<div>
			text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.
			<br /><br />
			text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.
		</div>
		<p>滚动了 <span>0</span> 次。</p>
		<button>触发窗口的 scroll 事件</button>
	</body>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
		var x = 0;
		$(document).ready(function () {
			$('div').scroll(function () {
				$('span').text(x += 1);
			});
			
			$('button').click(function () {
				$('div').scroll();
			});
		});
	</script>
</html>

效果图

四. jQuery动画

1. jQuery动画 - animate()方法

jQuery animate() 方法用于创建自定义动画。
语法：
1.$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
2.可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
3.可选的 callback 参数是动画完成后所执行的函数名称。

简单应用：
将 < div> 元素移动到左边，直到 left 属性等于 250 像素为止：
代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style type="text/css">
			div {
				background: #98bf21;
				height: 100px;
				width: 100px;
				/* 绝对定位 */
				/* 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留 */
				position: relative;
			}
		</style>
	</head>
	<body>
		<button>开始动画</button>
		<div>我是一个div标签</div>
	</body>
	<script src="./jquery.js"></script>
		<script>
            // 移动
			$(document).ready(function(){
				$("button").click(function(){
					$("div").animate({left:'250px'});
			  });
			});
	</script>
</html>

补充解释：

position: relative 绝对定位
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留
默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

2. jQuery animate() - 操作多个属性

提问：可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
生成动画的过程中可同时使用多个属性：

代码

 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8">
 		<title>Title</title>
 		<style type="text/css">
 			div {
 				background: #98bf21;
 				height: 100px;
 				width: 100px;
 				/* 绝对定位 */
 				/* 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留 */
 				position: relative;
 			}
 		</style>
 	</head>
 	<body>
 		<button>开始动画</button>
 		<div>我是一个div标签</div>
 	</body>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        // 移动 淡化颜色且放大
        $(document).ready(function(){
				$("button").click(function(){
					$("div").animate({
						left:'250px',
			            opacity:'0.5',
			            height:'150px',
			            width:'150px'
			        });
			    });
			});
	</script> 
 </html>

补充解释：
对div标签进行移动淡化颜色且放大

3. jQuery animate() - 使用相对值

可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

代码

    <script>
        // 移动并放大
        $(document).ready(function(){
				$("button").click(function(){
					$("div").animate({
						left:'250px',
			            height:'+=150px',
			            width:'+=150px'
			        });
			    });
			});
    </script>

4. jQuery animate() - 使用预定义的值

可以把属性的动画值设置为 “show”、“hide” 或 “toggle”：

代码

 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8">
 		<title>Title</title>
 		<style type="text/css">
 			div {
 				background: #98bf21;
 				height: 100px;
 				width: 100px;
 				/* 绝对定位 */
 				/* 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留 */
 				position: relative;
 			}
 		</style>
 	</head>
 	<body>
 		<button>开始动画</button>
 		<div>我是一个div标签</div>
 	</body>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        // 先进行hide消失
        $(document).ready(function(){
				$("button").click(function(){
					$("div").animate({
						height:'hide'
			        });
			    });
			});
		// 然后会再次出现
		$(document).ready(function(){
					$("button").click(function(){
						$("div").animate({
							height:'show'
				        });
				    });
				});
		// 最后可以重复消失出现
		$(document).ready(function(){
				$("button").click(function(){
					$("div").animate({
						height:'toggle'
			        });
			    });
			});
    </script>
 </html>

补充解释：
hide()方法：表示jQuery对象隐藏
show()方法：表示jQuery对象显示
toggle()：表示用在显示和隐藏元素间切换

5. jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

在彼此之后执行不同的动画，那么我们要利用队列功能：
代码

<script>
    $(document).ready(function(){
				$("button").click(function(){
					var div=$("div");
			        div.animate({height:'300px', opacity:'0.4'}, "slow");
			        div.animate({width:'300px', opacity:'0.8'}, "slow");
			        div.animate({height:'100px', opacity:'0.4'}, "slow");
			        div.animate({width:'100px', opacity:'0.8'}, "slow");
			    });
			});
</script>

相当于自动按序进行代码运行