資料 鏈接：https://pan.baidu.com/s/1aHUnfPcs1VJAas5zj5abQA 提取碼：b1hb 包括本章節需要的js庫文件，以及JQuery的api文檔 什麼JQuery jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的Ja ...
資料
鏈接：https://pan.baidu.com/s/1aHUnfPcs1VJAas5zj5abQA
提取碼：b1hb
包括本章節需要的js庫文件，以及JQuery的api文檔
什麼JQuery
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery相容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
JQuery的作用
- 寫更少的代碼,做更多的事情: write Less ,Do more
- 將我們頁面的JS代碼和HTML頁面代碼進行分離
JQ的入門
導入js庫文件
<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頁面代碼進行分離
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>
