一文入門 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 表情選擇

多選下拉框左右移動