初識jQuery 基礎篇_ZenDei技術網路在線

首先提供一個知識點外資源：線上編程：無需編程環境： https://codepen.io/pen 添加jQuery庫： Settings-->JavaScript-->quick-add-->jQuery jQuery：基於js研發的封裝庫：可以屏蔽之前書寫js代碼考慮瀏覽器相容性的問題。問題交 ...

首先提供一個知識點外資源：

線上編程：無需編程環境：

　　https://codepen.io/pen

　　添加jQuery庫：

　　　　Settings-->JavaScript-->quick-add-->jQuery

jQuery：

基於js研發的封裝庫：可以屏蔽之前書寫js代碼考慮瀏覽器相容性的問題。問題交給框架的編寫者

企業生成環境經常使用js庫jQuery是以後學習其他封裝的基礎庫，99%企業都在使用jQuery

高級庫：

　　Bootstrap（http://www.bootcss.com/p/layoutit/ 可視化佈局），zepto，YUI，easyUI，jQuery UI，Ext js（非常笨重，頁面效果非常華麗，適合區域網）

　　Vue

　　Angular

　　React

jQuery：

　　所有高級庫的基礎

　　高於js ，但又低於其他高級庫

　　萬事萬物皆方法（將js屬性功能封裝為方法）

　　設計思想：寫最少的代碼，做最好的事情

　　　　　　Write less，do more

搭建jQuery開發環境：

　　引用jQuery庫

jQuery能做什麼?

　　1.Js能做的都可以做

　　2.訪問和操作DOM元素

　　3.控制頁面樣式

　　4.對頁面事件進行處理

　　5.擴展新的jQuery插件

　　6.與Ajax技術完美結合

優勢：

　　1.體積小

　　2.強大的選擇器：精確定位（重點）

　　3.出色的DOM封裝

　　4.可靠的事件處理機制

　　5.瀏覽器相容

　　6.隱式迭代簡化編程

　　7.豐富的插件支持

裝載的先後次序:

　　jQuery封裝庫在上

　　Js代碼在下

語法結構：

$(document).ready()=function(){};

$(function(){});

註：$(function(){})執行順序在window.onload之前

語法結構：

1. 工廠函數$():將DOM對象轉化為jQuery對象、$(selector).action();

2. 選擇器selector：選擇器

方法：

　　1. $(selector).addClass（）

　　　　A. 向被選元素添加一個或多個類樣式

　　　　B. 可以是一個，也可以是多個

　　2. $(this)

　　　　A. 是一個jQuery對象

　　　　B. 指向滑鼠指針當前移向的一菜單級

　　　　C. 代表當前

　　3. $(selector).css()

　　　　A. css(“屬性”，”屬性值”)；//設置一個css屬性

　　　　B. css({“屬性1”:”屬性值1”,屬性2””:”屬性值2”......});//同時設置多個css屬性

　　4. $(selector).children（）

　　　　A. jQuery中遍歷後代的一種方法

　　　　B. 用作查找元素的所有直接子元素

　　5. $(selector).show（）

　　　　顯示元素

　　6. $(selector).hide()

　　　　隱藏元素

論css()方法與addClass方法的區別：

　　A. css()方法為所匹配的元素設置給定的css樣式

　　B. addClass()方法向所匹配的元素添加一個或多個類，改方法不會刪除已經存在的類，僅在原有基礎上追加新的類樣式

　　C. 基於結構與樣式分離的原則，通常在實際應用中，為謀元素添加樣式，使用addClass（）方法比css（）方法的頻率高很多，因此建議使用addClass（）方法為元素添加樣式

jQuery程式的代碼風格

　　1. ”$”的使用

　　　　A. jQuery程式的標誌

　　　　B. $==jQuery

　　　　C. 無論頁面元素的選擇器，還是功能函數的首碼，都必須使用改符號

　　2. 鏈式操作

　　　　A. 在對DOM元素進行多個操作時。為避免過度使用臨時變數或不必要重覆代碼

　　　　B. 鏈式編程：可以對一個對象進行多重操作，將操作結果返回給該對象

　　　　C. 慄子：光棒效果

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="../jquery-1.12.4.js"></script>
<script type="text/javascript" src="Day01.js"></script>
<body>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>西雅圖</li>
    </ul>
</body>
</html>

jQuery：

$(function () {
    $("li").mouseover(function () {
        $(this).css("background-color","pink");
    }).mouseout(function () {
        $(this).css("background-color","");
    });
});

3. 隱式迭代

　　$(“li”)：一行代碼即可獲取頁面所有的li標簽，可以為其所有li表示綁定事件或設置樣式等

4. 添加註釋

　　A. 開發階段：

　　　　a) 為代碼添加註釋，可以增加代碼的可讀性

　　　　b) 能夠讓別人很容易地讀懂你的代碼

　　　　c) 便於後期維護

　　B. 維護階段：

　　　　a) 建議把關鍵的模塊形成開發文檔

　　　　b) 便於後期維護，即便後期刪除代碼註釋，也不影響後期維護

　　C. 產品正式發佈：

　　　　a) 建議刪除註釋

　　　　b) 減少文件大小，加快下載速度

　　　　c) 提高用戶體驗

DOM對象與jQuery對象：

一. DOM對象

　　1. 文檔對象模型（Document Object Model）

　　2. 每個HTML頁面都有一個DOM，每個DOM都可以表示一棵樹

簡要圖：

論DOM拿文本值：

1. inner HTML：拿到的是標簽與文本值

2. inner Text：拿到的是金文本值

3. Value：表單元素的value值

二.jQuery對象

　　jQuery對象就是通過jQuery包裝DOM對象後產生的對象，就能夠使用jQuery中的方法

　　慄子：

$(“#box”).html();
//獲取id為box元素內的html代碼

jQuery不可使用DOM對象一系列方法，它有自己的資源

論jQuery拿文本值：

4. html()：拿到的是標簽與文本值

5. text()：拿到的是金文本值

6. val()：表單元素的value值

三．互轉

DOM：土鱉

jQuery：土豪

1. DOM-->jQuery（土鱉變土豪）拿錢砸：$

Var txtName = document.getElementById(“txtName”);

Var $txtName = $(txtName);

2. jQuery-->DOM（土豪變土鱉）分解

Var $div = $(“#box”);

Var div = $div[0];

操作樣式：

1. dom:三種

(1) Dom.style.fontSize=”屬性值”；

(2) Dom.className = “class屬性值”;

(3) Dom.style.cssText=”A:B;C:D”;

2. jQuery：三種

(1) Jquery.css(“屬性”，”屬性值”)；

(2) Jquery.css({“屬性1”:”屬性值1”,屬性2””:”屬性值2”......})；

(3) jQuery.addClass(“類的屬性值”);

事件註冊：

1. dom: 有 on首碼

Dom中所有事件的開始都是有on的

慄子：

Dom.onclick=function(){};

2. jQuery: 無on首碼

直接上慄子：

jQuery.click(function(){});

經典慄子：使用jQuery變換網頁效果:

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="../../../../../jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<body>
<h1>你是人家的四月天</h1>
<div>
    <p> 笑響亮了四面風</p>
    <p> 輕靈在春的光艷中交舞看變</p>
    <p>你是一月早天的雲煙</p>
    <p>黃昏吹著風的軟</p>
    <p>....</p>
    <p><a href="#">查看全部</a></p>
</div>
<hr/>
<div>
    你是人間四月天是永正圖書推出的“比煙花寂寞”系列之三。“比煙花寂寞"系列包括《民國女子》《愛眉小札》《你是人間四月天》《你是我眉心未完的詩》。這系列以前所未有的包裝形式推出，引起讀者尖叫連連。一經上市，便引發各大報紙、媒體的一致報道。
    有人崇拜她，把她當做女神、偶像；也有人放出話來，“喜歡她的女人，品行有問題；喜歡她的男人，腦子有問題。”
    她是缺乏幽嫻品德的女人，她喜好與人辯論，她用詩句表達她的哀愁，她精通文理，學貫中西。她對文學和藝術，具有本能的、直接的感悟。生長富貴，命運坎坷，修養讓她把熱情藏在裡面，熱情卻是她生活的支柱。
    她，就是那個萬千寵愛於一身的一代才女——林徽因。
    《你是人間四月天》是林徽因的一本小說、詩歌、散文、劇本集，幾乎收錄了林徽因所有的經典文學作品。其散文成就頗大，雖然數量不多，但風格獨特，知識性強。詩歌尤
</div>
</body>
</html>

jQuery：

$(function () {
    var $div = $("div:last");
    var $a = $("a");
    $div.hide();
    $a.click(function () {
        if ($a.text() == "查看全部") {
            $div.show();
            $a.text("摺疊");
        }else {
            $div.hide();
            $a.text("查看全部");
        }
    });
});