python全棧學習--Day53(jQuery的介紹,jQuery的選擇器,jQuery動畫效果)
js總結
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
js:
1.ECMAScript5 ES5語法
2.DOM
CRUD
獲取 3種方式 id tag className
//面向對象 對象 ： 屬性和方法 某個對象中
function $(id){
return document.getElementById(id) }
事件操作
3.BOM user-Agent location.pathname location.href
|
一、jQuery的介紹
1.為什麽要使用jQuery
在用js寫代碼時，會遇到一些問題：
-
window.onload 事件有事件覆蓋的問題，因此只能寫一個事件。
-
代碼容錯性差。
-
瀏覽器兼容性問題。
-
書寫很繁瑣，代碼量多。
-
代碼很亂，各個頁面到處都是。
-
動畫效果很難實現。
關於window.onload，舉一個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
alert(1);
}
window.onload = function () {
alert(2);
}
</script>
</body>
</html>
網頁訪問：
發現1被覆蓋了！
jQuery的出現，可以解決以上問題。
什麽是 jQuery
jQuery 是 js 的一個庫，封裝了我們開發過程中常用的一些功能，方便我們調用，提高開發效率。
js庫是把我們常用的功能放到一個單獨的文件中，我們用的時候，直接引用到頁面裏即可。
關於jQuery的相關資料：
-
官網：http://jquery.com/
-
官網API文檔：http://api.jquery.com/
-
漢化API文檔：http://www.css88.com/jqapi-1.9/
打開官網網址，看圖標下面的英文說明
意思是寫少量代碼，實現更多的功能
j表示 JavaScript
query 表示查詢
在前端裏面，一個js文件，就是一個模塊，這樣更容易維護。
但是導入模塊的時候，代碼比較長。
| 1 |
<script type="text/javascript" src="js/index.js"></script>
|
在python中，導入一個模塊，直接import加模塊名就可以了。
ECMAScript第五個版本，簡稱es5，目前的瀏覽器都支持。在es6中，有import。但是目前的瀏覽器不識別這個import，這是硬傷！
為了解決這個問題，出現了一個插件bebel，它能將es6的代碼轉換為es5，這樣瀏覽器就能識別了，官方鏈接：
http://babeljs.io/
中文版官方鏈接
https://www.babeljs.cn/
打開網頁，點擊試用
左邊是es6語法，右邊會自動轉換為es5語法
回顧之前js學的面向對象，新建文件index.js，內容如下：
| 1 2 3 4 5 6 7 8 9 |
function Student() {
this.name = ‘easy‘;
this.age = 20;
}
Student.prototype.alertName = function(){
alert(this.name);
};
var stu1 = new Student(); //原型的模式創建對象
window.$ = window.jQuery = stu1; //window.$和window.jQuery的值為stu1
|
導入index.js文件，使用console查看變量
View Code
網頁查看console
其實jquery是基於原生js，封裝了大量的方法，方便開發者使用。
打開官方網址，目前最新版本是3.3.1，點擊下載
點擊生產環境，就直接打開一個js頁面，裏面的代碼是看不懂的。它經過壓縮了！
開發環境是可以看，它沒有壓縮。壓縮是根據分號進行的。所以寫js代碼的時候，結尾一定要加分號。
開發環境，打開網址後，沒有下載按鈕，怎麽下載呢？很簡單，將鼠標放到內容區域，右鍵另存為，就可以下載了。
文件名帶min的，表示是進過壓縮的。它把多余的空格都刪除了，整個文件只有一行代碼。
下載開發環境的js，簡單的看一下 源碼
搜索getElementById
這裏面的this，就是jquery對象。
學習jQuery，主要是學什麽
初期，主要學習如何使用jQuery操作DOM，其實就是學習jQuery封裝好的那些功API。
這些API的共同特點是：幾乎全都是方法。所以，在使用jQuery的API時，都是方法調用，也就是說要加小括號()，小括號裏面是相應的參數，參數不同，功能不同。
jQuery的第一個代碼
用原生js來實現下面代碼效果：
python全棧學習--Day53(jQuery的介紹,jQuery的選擇器,jQuery動畫效果)