JQuery入門+js庫文件分享

時間 2020-05-06

原文原文鏈接

資料

連接：https://pan.baidu.com/s/1aHUnfPcs1VJAas5zj5abQA
提取碼：b1hbjavascript

包括本章節須要的js庫文件，以及JQuery的api文檔css

什麼JQuery

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype以後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，作更多的事情。它封裝JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操做、事件處理、動畫設計和Ajax交互。html

jQuery的核心特性能夠總結爲：具備獨特的鏈式語法和短小清晰的多功能接口；具備高效靈活的css選擇器，而且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各類主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等java

JQuery的做用

寫更少的代碼,作更多的事情: write Less ,Do more
將咱們頁面的JS代碼和HTML頁面代碼進行分離

JQ的入門

導入js庫文件jquery

<script type="text/javascript" src="js/jquery-1.11.0.js"></script>

<script>
			//js文檔加載完成的事件
			window.onload = function(){
				alert("window.onload   111");
			}
			
			window.onload = function(){
				alert("window.onload   222");
			}
			
			/*文檔加載完成的事件*/
			jQuery(document).ready(function(){
			 	alert("jQuery(document).ready(function()");
			});
			/*
			 	jQuery  簡寫成 $
			 */
			$(document).ready(function(){
			 	alert("$(document).ready(function()");
			});
			
			/*
				最簡單的寫法 
			*/
			$(function(){
				alert("$(function(){");
			});
			
		</script>

實驗發現只輸出了window.onload 222和JQuery的三個輸出，說明js的第二個輸出方法替換了以前的輸出，而JQuery沒有設計模式

JQ中根據ID查找元素

全都是根據選擇器去找的
#ID{}
.類名{}
$("#ID的名稱")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		
		<script>
			//文檔加載順序
			$(function(){
				$("#div1").html("李四");
				
//				div1.innerHTML = "王五"; 
			});
//			alert($("#div1"));
			
		</script>
	</head>
	<body>
		<div id="div1">張三</div>
	</body>
</html>

JQ和JS之間的轉換

JQ對象,只能調用JQ的屬性和方法
JS對象只能調用JS的屬性和方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			function changeJS(){
				var div = document.getElementById("div1");
//				div.innerHTML = "JS成功修改了內容"

				//將JS對象轉成JQ對象
				$(div).html("轉成JQ對象來修改內容")
			}
			
			$(function(){
				//給按鈕綁定事件
				$("#btn2").click(function(){
					//找到div1
//					$("#div1").html("JQ方式成功修改了內容");

					//將JQ對象轉成JS對象來調用
					var $div = $("#div1");
//		            第一種方法		
//                  var jsDiv = $div.get(0);
					var jsDiv = $div[0];
					jsDiv.innerHTML="jq轉成JS對象成功";
				});
			});
			
			
		</script>
	</head>
	<body>
		<input type="button" value="JS修改div內容" onclick="changeJS()" />
		<input type="button" value="JQ方式修改div內容" id="btn2" />
		<div id="div1">
			這裏的內容一會要被JS/JQ代碼修改掉
		</div>
		<div id="div1">
			這裏的內容一會要被JS/JQ代碼修改掉1111
		</div>
	</body>
</html>

JQ的開發步驟

將咱們頁面的JS代碼和HTML頁面代碼進行分離api

1. 導入JQ相關的文件
2.  文檔加載完成事件: $(function)  : 頁面初始化的操做: 綁定事件, 啓動頁面定時器
3. 肯定相關操做的事件
4. 事件觸發函數
5. 函數裏面再去操做相關的元素

JQ中的動畫效果

顯示和隱藏 img.style.display瀏覽器

show()
hide()
slideUp
slideDown
fadeIn
fadeOut
animate : 自定義動畫

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		
		<!--
			1. 導入JQ相關的文件
			2.  文檔加載完成事件: $(function)  : 頁面初始化的操做: 綁定事件, 啓動頁面定時器
			3. 肯定相關操做的事件
			4. 事件觸發函數
			5. 函數裏面再去操做相關的元素
		-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			$(function(){
				
				//顯示頁面圖片
				//給按鈕綁定事件
				$("#btn1").click(function(){
//					$("#img1").show();
//                  滑動
//					$("#img1").slideDown();
//                   淡入淡出
//					$("#img1").fadeIn(5000);

					$("#img1").animate({ width:"800px",opacity:"1"},5000);
					
				});
				
				//隱藏頁面圖片
				$("#btn2").click(function(){
					//得到img
//					$("#img1").hide(10000);
//					$("#img1").slideUp(500);
//					$("#img1").fadeOut(5000);
					$("#img1").animate({ width:"1366px",opacity:"0.2"},5000);
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="顯示" id="btn1" /> 
		<input type="button" value="隱藏" id="btn2"/> <br />
		<img src="../../img/333.png" id="img1" width="500px" />
	</body>
</html>