01-jQuery簡介&集成

JS的問題

onload事件

只能綁定一個函數、會產生事件覆蓋

問題1

容錯性差, 如果一行代碼報錯，則會影響到後續代碼的執行

問題2

api比較繁雜，同樣的是選擇DOM節點，但是需要根據tagName, 或者ID, 或者className，來使用不同的函數才能獲取

問題3

代碼的兼容性差，有時候，需要適配很多瀏覽器

問題4

一個特別簡單的小功能，比如說緩動動畫，都必須使用很多代碼實現，使得更多的精力無法專注在業務實現上

問題5

操作多個節點對象，必須使用循環語句，逐一設置

問題6

如果給某個dom對象設置屬性值，必須一個一個設置

概念

jQuery是一款優秀的javaScript函數庫
jQuery已經集成了JavaScript、CSS、DOM和Ajax於一體的強大功能
jQuery的主旨:write less, do more.

作者

姓名：John Resig

簡介

第一次編程大概是在初中，14、15歲
🤔2006年8月發佈jQuery (22歲)
2007年2月加入Mozilla
2011年5月，John Resig離職Mozilla，加入在線教育集團Khan Academy。在那裏，他仍繼續從事jQuery相關工作，同時負責該組織的開源項目及未來的iPad應用的開發。

特點

輕量級
強大的選擇器
出色的Dom封裝
可靠的事件處理
瀏覽器兼容性強
鏈式操作方式
隱式迭代
插件豐富

功能

HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函數
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
Utilities

集成方式

本地集成

下載jQuery庫
下載地址

本地引入地址

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

遠程集成

使用 Google 的 CDN

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

使用 Microsoft 的 CDN

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-3.3.1.min.js"></script>

小經驗

通過 Google CDN 來獲得最新可用的版本
① 如果從版本字符串的末尾刪除一個數字，谷歌會返回版本系列中最新的可用版本
例如 1.1.1→修改成1.1→可能返回1.1.0 ---- 1.1.9
① 如果只剩第一個數字，那麼谷歌會返回 1 系列中最新的可用
例如 1.1.1→修改成1→可能返回1.1.0 ---- 1.9.9
使用谷歌或微軟的 jQuery優勢
加載速度比較快
優先加載本地緩存
其次加載臨時網絡資源

02-jQuery代碼風格

代碼風格

在jQuery程序中,不管是頁面元素的選擇、內置的功能函數的調用,都是美元符號“$”來起始的。而這個“$”就是jQuery當中最重要且獨有的 jQuery 函數

基本語法格式

$(selector).action()

美元符號定義 jQuery
選擇符（selector）查詢HTML 元素
this
標籤名稱
.類名
#id
jQuery 的 action() 執行對元素的操作

$(function () {});

執行一個匿名函數
jQuery(function () {});

示例

$(’#idName’).hide(); 讓指定的jQuery對象, 執行某個函數
```
jQuery('#idName').hide(); 
```
選擇指定ID的DOM元素
```
$('#idName');
jQuery('#idName'); 
```

注意:

jQuery是對JS的封裝庫, 本質就是JS, 所以, 可以正常寫JS代碼

03-jQuery加載模式對比

javaScript

window.onload

執行時機

所有的DOM節點加載完畢之後調用, 包括資源加載, 比如圖片

執行次數

此處是 = 賦值, 所有後面的會覆蓋前面的函數內容, 調用多次, 只會執行一次

簡寫方案

無

jQuery

$(document).ready()

執行時機

所有的DOM節點加載完畢之後調用, 不包括資源加載;
開發實際應用: 做圖片輪播器時, 沒有必要等待所有的圖片加載完成纔開始滾動

執行次數

可以執行多次,第N次都不會被上一次覆蓋
ready函數, 會把內部接收到的函數保存到一個數組裏面, 等後期統一執行, 所以, 調用多次, 就有多次執行

簡寫方案

$(function () { 

});

代碼驗證

驗證執行時機

通過img標籤, 加載圖片

驗證執行次數

04-webstorm定義活動模板

快捷鍵

快速運行到默認瀏覽器
default

活動模板

live
作用: 可以通過一個快捷字符串的輸入, 來產生一個代碼片段
設置修改項：$變量名$

使用方式

縮寫串：tab鍵

05-jQuery解決衝突noConflict

場景

當jQuery內部的$被其他函數庫覆蓋
當其他函數庫的$被jQuery覆蓋

目的

保證兩個庫的$都能使用

解決方案

當jQuery內部的$被其他函數庫覆蓋

jQuery相關代碼, 把所有的$換成jQuery

如果出現大批量的$, 也可以藉助匿名函數包裹執行, 執行時傳遞jQuery對象, 內部正常使用$

(function ($) {
    $('#btn1').on('click', function () {
        $('#div1').hide();
    });

    $('#btn2').on('click', function () {
        $('#div2').css('background', 'green');
        $('#div3').css('background', 'blue');
    });
})(jQuery);

當其他函數庫的$被jQuery覆蓋

必須在使用其他函數庫$之前, 讓jQuery 讓渡變量$ 的控制權
noConflict() 方法讓渡變量$的 jQuery 控制權。
也可以在釋放對$變量控制的同時, 賦值給其他變量
```
szjQ = $.noConflict();
```
使用時以 szjQ 代替原本的jQuery

06-jQuery對象與js對象轉換

概念

jQuery 對象是通過 jQuery 包裝DOM 對象後產生的對象
js對象就是DOM對象

轉換原因

jQuery庫提供的方法, 只能是jQuery對象調用,
JS對象的一些方法, 只能是JS對象可以調用
兩者不可以互相調用對方的方法

轉換場景

jQuery就是JS的一個擴展庫，工具庫，提供很多方便快捷的方法，所以將JS對象轉換爲jQuery對象後，能更方便地操作這個對象。
但是jQuery對象也不是萬能的，有一些JS對象有的功能，jQuery對象並沒有提供，所以需要轉換回JS對象，才能進行操作。
另外一種情況可能是，使用某些第三方庫，接口函數只能接受JS對象或者jQuery對象，那麼你就需要在這兩者之間進行轉換。

轉換方式

JS對象->jQuery對象

$(JS對象)

jQuery對象->JS對象

jQuery對象.get(0)
jQuery對象[0]

原理圖解

案例演示

隱藏DIV

jQuery
```
hide()
```
js
```
style.display = 'none';
```

07-jQuery操作css-添加&刪除&切換類

addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操作

案例演示
開關燈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 275px;
            height: 340px;
            background: url("source/images/off.png");
            -webkit-background-size: cover;
            background-size: cover;
        }

        .selected{
            background-image: url("source/images/on.png");
        }
    </style>
</head>
<body>

<div></div>

<p></p>
<p></p>
<button id="on">開燈</button>
<button id="off">關燈</button>
<button id="auto">自動開關</button>

<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        $('#on').click(function () {
            $('div').addClass('selected');
        });

        $('#off').click(function () {
            $('div').removeClass('selected');
        });

        $('#auto').click(function () {
            $('div').toggleClass('selected');
        });
    });
</script>
</body>
</html>


# 08-jQuery操作css-css()
## 返回 CSS 屬性
	

```javascript
css("propertyname");

設置 CSS 屬性

css("propertyname","value");

設置多個 CSS 屬性

css({"propertyname":"value","propertyname":"value",...});

案例演示

獲取div寬高背景顏色
設置div寬高背景顏色
鏈式調用
可以無限的.方法
原理：方法內部返回的就是調用對象本身
設置多個css屬性

09-jQuery操作css-尺寸

width()：設置或返回元素的寬度（不包括內邊距、邊框或外邊距）
height()：設置或返回元素的高度（不包括內邊距、邊框或外邊距）
innerWidth()：返回元素的寬度（包括內邊距）
innerHeight()：返回元素的高度（包括內邊距）
outerWidth()：返回元素的寬度（包括內邊距和邊框）
outerHeight()：返回元素的高度（包括內邊距和邊框）
outerWidth(true)：返回元素的寬度（包括內邊距、邊框和外邊距）
outerHeight(true)：返回元素的高度（包括內邊距、邊框和外邊距）
案例演示
創建一個div, 設置內邊距, 外邊距, 邊框; 分別打印以上屬性

10-jQuery操作html-獲取&設置

獲得內容

text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值

設置內容

text(參數) - 設置或返回所選元素的文本內容
html(參數) - 設置或返回所選元素的內容（包括 HTML 標記）
val(參數) - 設置或返回表單字段的值
回調函數❤
回調函數由兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函數新值返回您希望使用的字符串。
示例
```
text(function(i,origText){
  return "Old text: " + origText + " New text: Hello world!
  (index: " + i + ")";
})
```

獲取屬性

attr()

設置屬性

設置單個屬性：attr(屬性名, 值)
設置多個屬性：attr({屬性名1:值1, 屬性名2:值2})
回調函數❤
回調函數由兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函數新值返回您希望使用的字符串。
示例
```
attr("href", function(i,origValue){
  return origValue + "/jquery";
});
```

案例演示

div內容
a標籤href和target
測試時, 可以分別寫在不同的函數當中

11-jQuery選擇器

簡介

jQuery 最核心的組成部分就是:選擇器引擎。
它完全繼承了 CSS 的風格,可以對 DOM 元素的標籤名、屬性名、狀態等進行快速準確的選擇,並且不必擔心瀏覽器的兼容性,寫法更加簡潔。
jQuery 選擇器實現了 CSS1~CSS3 的大部分規則之外,還實現了一些自定義的選擇器,用於各種特殊狀態的選擇。

經驗

jQuery對象執行某個方法, 會遍歷jQuery對象, DOM數組中的每個對象執行這個方法
但是可以通過索引進行獲取 eq(index)

12-jQuery實現撩課風雲榜-(界面搭建)

參數記錄

整體寬度320
主題顏色:#F23D7C
主題字體大小:20;
圖片大小:80 * 110
內容字體大小12px
段落寬度:210 行高18

13-jQuery實現撩課風雲榜-(處理業務)

添加標籤li的移入移出事件
事件執行邏輯
顯示當前li, 隱藏兄弟li

事件代碼

$(this).addClass("current").siblings().removeClass("current")

jQuery講解

01-jQuery簡介&集成

JS的問題

onload事件

問題1

問題2

問題3

問題4

問題5

問題6

概念

作者

姓名：John Resig

簡介

特點

功能

集成方式

本地集成

遠程集成

小經驗

02-jQuery代碼風格

代碼風格

基本語法格式

$(selector).action()

$(function () {});

示例

注意:

03-jQuery加載模式對比

javaScript

執行時機

執行次數

簡寫方案

jQuery

執行時機

執行次數

簡寫方案

代碼驗證

驗證執行時機

驗證執行次數

04-webstorm定義活動模板

快捷鍵

活動模板

使用方式

05-jQuery解決衝突noConflict

場景

目的

解決方案

當jQuery內部的$被其他函數庫覆蓋

當其他函數庫的$被jQuery覆蓋

06-jQuery對象與js對象轉換

概念

轉換原因

轉換場景

轉換方式

JS對象->jQuery對象

jQuery對象->JS對象

原理圖解

案例演示

隱藏DIV

07-jQuery操作css-添加&刪除&切換類

設置 CSS 屬性

設置多個 CSS 屬性

案例演示

09-jQuery操作css-尺寸

10-jQuery操作html-獲取&設置

獲得內容

設置內容

獲取屬性

設置屬性

案例演示

11-jQuery選擇器

簡介

分類

經驗

12-jQuery實現撩課風雲榜-(界面搭建)

參數記錄

13-jQuery實現撩課風雲榜-(處理業務)

14-jQuery鼠標移入，移出事件

mouseenter

mouseleave