jQuery基礎總結！！！

時間 2021-08-14

標籤 css html jquery 程序員數組 app dom ide 函數動畫欄目 JQuery 简体版

原文原文鏈接

目錄css

jQuery簡介html

jQuery庫的引用jquery

官網下載jQuery程序員

jQuery入門數組

jQuery經常使用的API（重要）app

jQuery選擇器dom

jQuery基礎選擇器ide

jQuery隱式迭代函數

jQuery篩選選擇器動畫

jQuery篩選方法

jQuery樣式操做

操做css方法

設置樣式方法

jQuery效果

顯示隱藏

滑動

淡入淡出

自定義動畫

jQuery屬性操做

jQuery文本屬性值

jQuery元素操做

遍歷元素

建立、添加、刪除元素

jQuery尺寸、位置操做

jQuery尺寸

jQuery位置

jQuery事件

jQuery事件註冊

jQuery事件處理

on綁定一個或多個事件

on實現事件委託

on動態建立元素綁定事件

off解綁事件

trigger自動觸發事件

jQuery事件對象

jQuery簡介

jQuery是JavaScript的一個庫，目的是爲了簡化JavaScript的代碼量，把JS中的DOM操做進行了封裝，若是舉個例子的話，就像是上樓同樣，你能夠經過爬樓梯（DOM），也能夠坐電梯（jQuery）

jQuery庫的引用

官網下載jQuery

在這裏介紹一下jQuery的官網下載https://jquery.com/download/

這兩個文件就是jQuery的源碼，第一個用於導入咱們的程序中，第二個用於咱們程序員的閱讀

導入咱們程序的形式是，在咱們的程序的文件夾下新建一個.js文件，這裏以jquery.min.js名爲例

當咱們把文件建好並把官網上的jQuery複製過來以後，須要在源文件中聲明一下

<script src="jquery.min.js"></script>

如今就能夠直接調用jQuery中的一些封裝好的函數了

jQuery入門

在使用jQuery庫中的函數時，都是以jQuery開頭的，jQuery，可是呢，jQuery寫起來太麻煩了，就出現了一個別名，也就是$

這裏進行一個代碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery的基本使用</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div></div>
<script>
    //用$()開始，無論jQuery代碼寫在HTML後面仍是前面都能執行
    //
    $(function () {
        $('div').hide();//這裏是隱藏div的意思
    });
</script>

</body>
</html>

有時候一些DOM對象jQuery沒有給咱們進行封裝，因此須要咱們進行兩者的轉換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video src="#"></video>
<script>
    //jQuery對象中的方法只是DOM中的一些經常使用方法，jQuery對其進行了封裝，方便使用
    //DOM轉jQuery
    var vid = document.querySelector('video');
    $(vid).hide();
    //有時候jQuery中的方法不夠用，需jQuery轉DOM,jQuery返回的是一個僞數組
    $('video')[0].play();//這裏就是DOM對象了，能夠調用DOM中的方法
    $('video').get(0).play();//這是另外一種方法

</script>
</body>
</html>

jQuery經常使用的API（重要）

jQuery選擇器

jQuery基礎選擇器

$("#id") ID選擇器，用於獲取指定ID的元素

$("*") 全選選擇器，用於匹配全部元素

$(".class") 類選擇器，用於獲取同一類class的元素

$("div") 標籤選擇器，用於獲取多個元素

$("ul>li") 子代選擇器，用於獲取兒子層的元素，這裏只是得到兒子的，不會得到孫子的

$("ul li") 後代選擇器，用於獲取ul下的全部li元素，包括孫子的

jQuery隱式迭代

這裏注意一下，jQuery中有隱式迭代，能夠自動進行遍歷，這裏代碼演示下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隱式迭代</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<div>hello world</div>
<div>hello world</div>
<div>hello world</div>
<script>
    $("div").css("background", "green");//這裏把每一個div都添加了背景顏色
</script>
</body>
</html>

jQuery篩選選擇器

$("li:first") 獲取第一個li元素

$("li:last") 獲取最後一個li元素

$("li:eq(2)") 獲取到的li元素中，選擇索引號爲2的元素

$("li:odd") 獲取到的li元素中，選擇索引號爲奇數的元素

$("li:even") 獲取到的li元素中，選擇索引號爲偶數的元素

jQuery篩選方法

$("li").parent() 查找父級

$("ul").children("li") 查找兒子級，這裏不包含孫子

$("ul").find("li") 後代選擇器，包含孫子

$(".first").siblings("li") 查找兄弟節點，不包括本身自己

$(".first").nextAll() 查找當前元素以後全部的同輩元素

$(".last").prevAll() 查找當前元素以前全部的同輩元素

$("div").hasClass("protected") 檢查當前的元素是否含有某個特定的類，若是有返回true

$("li").eq(2) 獲取到的li元素中，選擇索引號爲2的元素

jQuery樣式操做

操做css方法

基本語法以div爲例，這裏更改一個樣式

$("div").css("width", "300px");//這裏的px能夠省略

改多個樣式

$("div").css({

width: 400,

height: 400,

backgroundColor: "red"

});

設置樣式方法

定義一個類current

.current {

background-color: red;

}

$("div").addClass("current"); 添加類，這裏的current就不用加.了

$("div").removeClass("current"); 刪除類

$("div").toggleClass("current"); 切換類，能夠添加類和刪除類

jQuery效果

顯示隱藏

show([speed],[easing],[fn]) 顯示函數，這裏的[]指的是該參數無關緊要

speed：參數是速度的意思，分爲slow，normal，fast，或者是填毫秒值

easing：用來指定切換效果，默認是swing，可用參數linear

fn：是回調函數，在動畫完成時執行的函數，每一個元素執行一次

hide([speed],[easing],[fn]) 隱藏函數，參數同上

toggle() ([speed],[easing],[fn]) 切換函數，參數同上

滑動

slideDown([speed],[easing],[fn]) 下滑函數，參數同上

slideUp([speed],[easing],[fn]) 上滑函數，參數同上

slideToggle([speed],[easing],[fn]) 切換函數，參數同上

stop() 中止動畫排隊，當咱們切換的很是快的時候，就須要中止動畫排隊

淡入淡出

fadeIn([speed],[easing],[fn]) 淡入函數，參數同上

fadeOut() ([speed],[easing],[fn]) 淡出函數，參數同上

fadeToggle([speed],[easing],[fn]) 淡入淡出切換函數，參數同上

fadeTo(speed,opacity,,[easing],[fn]) 修改透明度函數，opacity透明度必須寫，取值0~1之間，speed也要必須寫

自定義動畫

animate(params,[speed],[]easing),[fn]) params是想要更改的樣式屬性，以對象形式傳遞，必須寫，其餘能夠省略

舉例：以左邊500像素爲例

$("div").animate({

left: 500

});

jQuery屬性操做

$("a").prop("屬性") 獲取屬性,設置元素的固有屬性

$("a").prop("屬性"，"屬性值") 設置屬性

$("div").attr("index") 獲取自定義屬性（這裏假設自定義了一個index屬性）

$("div").attr("index"，2) 設置自定義屬性

jQuery文本屬性值

$("div").html() 獲取元素內容

$("div").html("123") 設置元素文本內容

$("div").text() 獲取元素文本內容

$("div").text("123") 設置元素文本內容

$("input").val() 獲取表單值

$("input").val("123") 設置表單值

jQuery元素操做

遍歷元素

$("div").each(function(index,domEle){}) index是每一個元素的索引號，demEle是每一個DOM元素對象

$.each($("div"), function(i,ele){}) index是每一個元素的索引號，ele遍歷內容

建立、添加、刪除元素

var li = $("<li>hello world<li>")

$("ul").append(li) 內部添加而且放到內容的最後面

$("ul").prepend(li) 內部添加而且放到內容的最前面

var div = $("<div>hello world!!!!<div>")

$(".test").after(div) 外部添加到前面 //這裏默認在HTML中已存在一個div標籤，而且它的class屬性是test

$(".test").before(div) 外部添加到前面

$("ul").remove() 能夠刪除匹配的元素，也就是把ul及其孩子都刪除

$("ul").empty() 能夠刪除匹配元素裏的子節點，也就是孩子

$("ul").html("") 能夠刪除匹配元素裏的子節點，也就是孩子

jQuery尺寸、位置操做

jQuery尺寸

$("div").width() 獲得匹配元素的寬度，高度只需把width改爲height

$("div").width(300) 設置匹配元素的寬度，高度同上

$("div").innerWidth() 獲得匹配元素的寬度+padding值，高度同上

$("div").outerWidth() 獲得匹配元素的寬度+padding值+border值，高度同上

$("div").outerWidth(true) 獲得匹配元素的寬度+padding值+border值+margin值，高度同上

jQuery位置

$(".son").offset()獲取距離文檔的位置，返回的是一個對象 //這裏默認有一個盒子的class屬性是son，而且他有一個父盒子

$(".son").offset().left 獲取距離文檔左側的位置

$(".son").offset({left: 300}) 設置舉例文檔左側的位置

$(".son").position() 獲取距離帶有定位父級位置

jQuery事件

jQuery事件註冊

常見的事件有mouseover mouseout blur focus change keydown keyup resize scroll

$("div").click(function(){}) 這裏是給div註冊了一個點擊事件

jQuery事件處理

on綁定一個或多個事件

on() 方法在匹配元素上綁定一個或多個事件的事件處理函數

$("div").on({

mounseover: function(){}

click: function(){}

}) 該方法能夠綁定多個事件

$("div").on("mouseover mouseleave", function(){}) 該方法也能夠綁定多個事件

on實現事件委託

$("ul li").click() 這是以前的方法，來進行li上的事件綁定

$("ul").on("click","li",function(){}) 這是事件委託的方式綁定，其中事件是綁定在了ul上，而觸發是li

on動態建立元素綁定事件

$("ol").on("click", "li", function(){})

var li = $("<li>hello world</li>")

$("ol").append(li)

通過上面的三個操做，能夠動態建立一個綁定事件，在以前不用on的時候是不能這樣動態建立

off解綁事件

$("div").off() 這裏是解除了div上的全部事件

$("div").off("click") 解除div身上的點擊事件

$("ul").off("click", "li") 解除事件委託

$("p").one("click", function(){}) 這裏是綁定一個事件，可是隻能觸發一次