一文入門 jQuery

語言: CN / TW / HK

時間 2022-09-25 16:22:05 InfoQ

jQuery 概念

一個 JavaScript 框架。簡化 JS 開發。 jQuery 是一個快速、簡潔的 JavaScript 框架，是繼 Prototype 之後又一個優秀的 JavaScript 程式碼庫（或 JavaScript 框架）。jQuery 設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事情。它封裝 JavaScript 常用的功能程式碼，提供一種簡便的 JavaScript 設計模式，優化 HTML 文件操作、事件處理、動畫設計和 Ajax 互動。 JavaScript 框架 ：本質上就是一些 js 檔案，封裝了 js 的原生程式碼而已。

快速入門

步驟：

下載 JQuery

目前 jQuery 有三個大版本：1.x：相容 ie678,使用最為廣泛的，官方只做 BUG 維護，功能不再新增。因此一般專案來說，使用 1.x 版本就可以了，最終版本：1.12.4 (2016 年 5 月 20 日)2.x：不相容 ie678，很少有人使用，官方只做 BUG 維護，功能不再新增。如果不考慮相容低版本的瀏覽器可以使用 2.x，最終版本：2.2.4 (2016 年 5 月 20 日)3.x：不相容 ie678，只支援最新的瀏覽器。除非特殊要求，一般不會使用 3.x 版本的，很多老的 jQuery 外掛不支援這個版本。目前該版本是官方主要更新維護的版本。最新版本：3.2.1（2017 年 3 月 20 日）
jquery-xxx.js 與 jquery-xxx.min.js 區別：
jquery-xxx.js：開發版本。給程式設計師看的，有良好的縮排和註釋。體積大一些
jquery-xxx.min.js：生產版本。程式中使用，沒有縮排。體積小一些。程式載入更快

匯入 JQuery 的 js 檔案：匯入 min.js 檔案
使用 var div1 = $("#div1");alert(div1.html());

JQuery 物件和 JS 物件區別與轉換

JQuery 物件在操作時，更加方便。
JQuery 物件和 js 物件方法不通用的.
兩者相互轉換

jq -- > js : jq 物件[索引] 或者 jq 物件.get(索引)
js -- > jq : $(js 物件)

選擇器：篩選具有相似特徵的元素(標籤)

基本操作學習

事件繫結

//1.獲取b1按鈕$("#b1").click(function(){  alert("abc");});

複製程式碼

入口函式

$(function () {
});

複製程式碼

window.onload 和 $(function) 區別

window.onload 只能定義一次,如果定義多次，後邊的會將前邊的覆蓋掉。(function)可以定義多次的。

樣式控制：css 方法

// $("#div1").css("background-color","red");$("#div1").css("backgroundColor","pink");

複製程式碼

DOM 操作

內容操作

html(): 獲取/設定元素的標籤體內容內容 --> 內容
text(): 獲取/設定元素的標籤體純文字內容內容 --> 內容
val()：獲取/設定元素的 value 屬性值

屬性操作

通用屬性操作

attr(): 獲取/設定元素的屬性
removeAttr():刪除屬性
prop():獲取/設定元素的屬性
removeProp():刪除屬性

attr 和 prop 區別？
如果操作的是元素的固有屬性，則建議使用 prop
如果操作的是元素自定義的屬性，則建議使用 attr

對 class 屬性操作

addClass():新增 class 屬性值
removeClass():刪除 class 屬性值
toggleClass():切換 class 屬性
toggleClass("one"):
判斷如果元素物件上存在 class="one"，則將屬性值 one 刪除掉。如果元素物件上不存在 class="one"，則新增
css():

CRUD 操作:

append():父元素將子元素追加到末尾

物件 1.append(物件 2): 將物件 2 新增到物件 1 元素內部，並且在末尾

prepend():父元素將子元素追加到開頭

物件 1.prepend(物件 2):將物件 2 新增到物件 1 元素內部，並且在開頭

appendTo():

物件 1.appendTo(物件 2):將物件 1 新增到物件 2 內部，並且在末尾

prependTo()：

物件 1.prependTo(物件 2):將物件 1 新增到物件 2 內部，並且在開頭

after():新增元素到元素後邊

物件 1.after(物件 2)：將物件 2 新增到物件 1 後邊。物件 1 和物件 2 是兄弟關係

before():新增元素到元素前邊

物件 1.before(物件 2)：將物件 2 新增到物件 1 前邊。物件 1 和物件 2 是兄弟關係

insertAfter()

物件 1.insertAfter(物件 2)：將物件 2 新增到物件 1 後邊。物件 1 和物件 2 是兄弟關係

insertBefore()

物件 1.insertBefore(物件 2)：將物件 2 新增到物件 1 前邊。物件 1 和物件 2 是兄弟關係

remove():移除元素

物件.remove():將物件刪除掉

empty():清空元素的所有後代元素。

物件.empty():將物件的後代元素全部清空，但是保留當前物件以及其屬性節點

案例

全選和全不選

程式碼如下：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title></title>    <script  src="../../js/jquery-3.3.1.min.js"></script>    <script>      //分析：需要保證下邊的選中狀態和第一個複選框的選中狀態一致即可
            function selectAll(obj){                //獲取下邊的複選框        $(".itemSelect").prop("checked",obj.checked);            }
    </script>  </head>  <body>    <table id="tab1" border="1" width="800" align="center" >      <tr>        <td colspan="5"><input type="button" value="刪除"></td>      </tr>      <tr>        <th><input type="checkbox" onclick="selectAll(this)" ></th>        <th>分類ID</th>        <th>分類名稱</th>        <th>分類描述</th>        <th>操作</th>      </tr>      <tr>        <td><input type="checkbox" class="itemSelect"></td>        <td>1</td>        <td>手機數碼</td>        <td>手機數碼類商品</td>        <td><a href="">修改</a>|<a href="">刪除</a></td>      </tr>      <tr>        <td><input type="checkbox" class="itemSelect"></td>        <td>2</td>        <td>電腦辦公</td>        <td>電腦辦公類商品</td>        <td><a href="">修改</a>|<a href="">刪除</a></td>      </tr>      <tr>        <td><input type="checkbox" class="itemSelect"></td>        <td>3</td>        <td>鞋靴箱包</td>        <td>鞋靴箱包類商品</td>        <td><a href="">修改</a>|<a href="">刪除</a></td>      </tr>      <tr>        <td><input type="checkbox" class="itemSelect"></td>        <td>4</td>        <td>家居飾品</td>        <td>家居飾品類商品</td>        <td><a href="">修改</a>|<a href="">刪除</a></td>      </tr>    </table>  </body></html>

複製程式碼

效果如下：

QQ 表情選擇

程式碼如下：

<!DOCTYPE html><html><head>    <meta charset="UTF-8" />    <title>QQ表情選擇</title>   <script  src="../../js/jquery-3.3.1.min.js"></script>    <style type="text/css">    *{margin: 0;padding: 0;list-style: none;}
    .emoji{margin:50px;}    ul{overflow: hidden;}    li{float: left;width: 48px;height: 48px;cursor: pointer;}    .emoji img{ cursor: pointer; }    </style>  <script>        //需求：點選qq表情，將其追加到發言框中        $(function () {            //1.給img圖片新增onclick事件            $("ul img").click(function(){                //2.追加到p標籤中即可。                $(".word").append($(this).clone());            });
        });
        </script>  </head><body>    <div class="emoji">        <ul>            <li><img src="img/01.gif" height="22" width="22" alt="" /></li>            <li><img src="img/02.gif" height="22" width="22" alt="" /></li>            <li><img src="img/03.gif" height="22" width="22" alt="" /></li>            <li><img src="img/04.gif" height="22" width="22" alt="" /></li>            <li><img src="img/05.gif" height="22" width="22" alt="" /></li>            <li><img src="img/06.gif" height="22" width="22" alt="" /></li>            <li><img src="img/07.gif" height="22" width="22" alt="" /></li>            <li><img src="img/08.gif" height="22" width="22" alt="" /></li>            <li><img src="img/09.gif" height="22" width="22" alt="" /></li>            <li><img src="img/10.gif" height="22" width="22" alt="" /></li>            <li><img src="img/11.gif" height="22" width="22" alt="" /></li>            <li><img src="img/12.gif" height="22" width="22" alt="" /></li>        </ul>        <p class="word">            <strong>請發言：</strong>            <img src="img/12.gif" height="22" width="22" alt="" />        </p>    </div></body></html>

複製程式碼

效果如下：

多選下拉框左右移動

程式碼如下：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title></title>    <script  src="../../js/jquery-3.3.1.min.js"></script>

    <style>      #leftName , #btn,#rightName{        float: left;        width: 100px;        height: 300px;      }      #toRight,#toLeft{        margin-top:100px ;        margin-left:30px;        width: 50px;      }
      .border{        height: 500px;        padding: 100px;      }    </style>
    <script>
      //需求：實現下拉列表選中條目左右選擇功能            $(function () {        //toRight        $("#toRight").click(function () {          //獲取右邊的下拉列表物件，append(左邊下拉列表選中的option)          $("#rightName").append($("#leftName > option:selected"));                });
                //toLeft                $("#toLeft").click(function () {                    //appendTo   獲取右邊選中的option，將其移動到左邊下拉列表中          $("#rightName > option:selected").appendTo($("#leftName"));
                });            });      
    </script>


  </head>  <body>    <div class="border">      <select id="leftName" multiple="multiple">        <option>張三</option>        <option>李四</option>        <option>王五</option>        <option>趙六</option>      </select>      <div id="btn">        <input type="button" id="toRight" value="-->"><br>        <input type="button" id="toLeft" value="<--">
      </div>
      <select id="rightName" multiple="multiple">        <option>錢七</option>      </select>
    </div>

  </body></html>

複製程式碼

效果如下：

「其他文章」

一文入門 jQuery

jQuery 概念

快速入門

步驟：

JQuery 物件和 JS 物件區別與轉換

選擇器：篩選具有相似特徵的元素(標籤)

基本操作學習

事件繫結

入口函式

樣式控制：css 方法

分類

基本選擇器

標籤選擇器（元素選擇器）

id 選擇器

類選擇器

並集選擇器

層級選擇器

後代選擇器

子選擇器

屬性選擇器

屬性名稱選擇器

屬性選擇器

複合屬性選擇器

過濾選擇器

首元素選擇器

尾元素選擇器

非元素選擇器

偶數選擇器

奇數選擇器

等於索引選擇器

大於索引選擇器

小於索引選擇器

標題選擇器

表單過濾選擇器

可用元素選擇器

不可用元素選擇器

選中選擇器

選中選擇器

DOM 操作

內容操作

屬性操作

通用屬性操作

對 class 屬性操作

CRUD 操作:

append():父元素將子元素追加到末尾

prepend():父元素將子元素追加到開頭

appendTo():

prependTo()：

after():新增元素到元素後邊

before():新增元素到元素前邊

insertAfter()

insertBefore()

remove():移除元素

empty():清空元素的所有後代元素。

案例

全選和全不選

QQ 表情選擇

多選下拉框左右移動