前端之jQuery

時間 2020-07-30

標籤前端 jquery 欄目 JQuery 简体版

原文原文鏈接

前端之jQuery

一、什麼是jQuery

jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫，能極大的簡化JavaScript編程，內部封裝了原生的js代碼，給你提供了更加簡單快捷的操做書寫js的語法，是一個框架jQuery框架優勢相似於ORMcss

前端的模塊叫「類庫」html

jQuery版本：1.x：兼容IE678，使用最普遍不更新了，只作bug維護前端

2.x：不兼容IE678，不多人使用，只作bug維護，不更新python

3.x ：不兼容IE678，只支持最新的瀏覽器，主要更新維護的jquery

二、jQuery基礎語法

$(選擇器).action(屬性值)編程

使用jQuery，必需要先經過script標籤引入jQuery代碼才能使用數組

python配置默認添加引入jQuery瀏覽器

一、下載jQuery代碼到本地每次用需引用網絡

二、使用BootCDN內容分發網絡裏的jQuery連接引入（CDN：內容分發網絡）app

三、查找標籤

jQuery() <===> $()

jQuery查找到的都是jQuery對象（一個個的數組）

基本選擇器

id選擇器：$('#id')

標籤選擇器：$("標籤名")

class選擇器：$(".類名")

配合使用：$("div.c1") - 查找類c1屬性的全部div標籤

通用選擇器：$("*")

組合選擇器：$("#id, .className,標籤名")

層級選擇器

$("x y"); // x的全部後代y（子子孫孫）
$("x > y"); // x的全部兒子y（兒子）
$("x + y"); // 找到全部緊挨在x後面的y
$("x ~ y"); // x以後全部的兄弟y

基本篩選器

:first // 第一個
:last // 最後一個
:eq(index)// 索引等於index的那個元素
:even // 匹配全部索引值爲偶數的元素，從 0 開始計數
:odd // 匹配全部索引值爲奇數的元素，從 0 開始計數
:gt(index)// 匹配全部大於給定索引值的元素
:lt(index)// 匹配全部小於給定索引值的元素
:not(元素選擇器)// 移除全部知足not條件的標籤
:has(元素選擇器)// 選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找)

例：

$("div:has(h1)")// 找到全部後代中有h1標籤的div標籤
$("div:has(.c1)")// 找到全部後代中有c1樣式類的div標籤
$("li:not(.c1)")// 找到全部不包含c1樣式類的li標籤
$("li:not(:has(a))")// 找到全部後代中不含a標籤的li標籤

屬性選擇器

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox類型的input標籤
$("input[type!='text']");// 取到類型不是text的input標籤

表單選擇器

對默認屬性進行簡寫

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

注意：對於表單對象屬性，若是用 :checked默認會將具備selected屬性和option標籤也找到能夠手動加一個限制條件，用 :selected不會找到checked屬性的input標籤

四、jQuery對象

jQuery對象是經過jQuery包裝DOM對象產生的對象，JQuery對象是jQuery獨有的，不能跟js對象混用，js對象只能用js的方法不能調用jQuery方法，反之亦是

能夠經過jQuery對象轉成js對象，或者js對象轉成jQuery對象

五、篩選器方法

下一個元素：

$("#id").next()  //同級別下一個元素
$("#id").nextAll()  //同級別下全部的
$("#id").nextUntil("#d2")  //同級別下找到直到id爲d2的標籤結束，不包括d2的標籤

上一個元素：

$("#id").prev()  //同級別前面一個元素
$("#id").prevAll()  // 同級別上面全部的
$("#id").prevUntil("#d2")  // 同級別上面全部的直到d2標籤，不包括

父親元素：

$("#id").parent()
$("#id").parents()  // 查找當前元素的全部的父輩元素
$("#id").parentsUntil()  // 查找當前元素的全部的父輩元素，直到遇到匹配的那個元素爲止，不包括。

兒子和兄弟元素：

$("#id").children();  // 全部的兒子們
$("#id").siblings();  // 全部的兄弟們，全部的同級別的

查找：能夠用.find("某個元素")，將篩選器封裝成方法

$("div").find("p")   <===>   $("div p")   // 都是查找div下面的p標籤
.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最後一個元素
.not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
.has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
.eq() // 索引值等於指定值的元素

六、操做標籤

樣式操做

addClass();  // 添加指定的CSS類名
removeClass();  // 移除指定的CSS類名
hasClass();  // 判斷樣式存不存在
toggleClass();  // 切換類名，有則移除，無則添加

位置操做

offset()  // 獲取匹配元素在當前窗口的相對偏移或設置元素的位置
position()  // 獲取匹配元素相對父元素的偏移
scrollTop()  // 獲取匹配元素相對滾動條頂部距離，能夠加值設置滾動條位置
$(windown).scrollTop(0);  // 回到頂部
scrollLeft()  // 獲取匹配元素相對滾動條左邊的偏移

獲取尺寸

height()
width()  // 獲取文本高寬
innerHeight()
innerWidth()  // 獲取文本+padding高寬
outerHeight()  
outWidth()  // 獲取文本+padding+border高寬

文本操做

$('p').text()  // 獲取全部的文本內容
$('p').text(val)  // 設置文本內容
$('p').html()  // 獲取全部的文本+標籤內容
$('p').html(val)  // 設置文本內容，識別HTML代碼

注意獲取文件內容須要轉換成js方式獲取

$(":file")[0].files[0]

屬性操做

.attr(屬性名)  // 經過屬性名獲取屬性值
.attr(屬性名，屬性值)  // 設置屬性
.attr({屬性名：屬性值，屬性名：屬性值})  // 設置多個屬性
removeAttr(屬性名)  // 刪除某一個屬性

注意：針對選擇框不要用attr來獲取selected和radio屬性，推薦使用prop，獲取到的是一個布爾值，能夠動態修改

文檔處理

添加到指定元素內部的後面

$(A).append(B)  // 把B追加到A
$(A).appendTo(B)  // 把A追加到B

添加到指定元素內部的前面

$(A).prepend(B)  // 把B前置到A
$(A).prependTo(B)  // 把A前置到B

添加到指定元素外部的後面

$(A).after(B)  // 把B放到A的後面
$(A).insertAfter(B)  // 把A放到B的後面

添加到指定元素外部的前面

$(A).before(B)  // 把B放到A的前面
$(A).insertBefore(B)  // 把A放到B的前面

移除和清空元素

remove()  // 移除指定的標籤
empty()  // 晴空全部

替換

replaceWith()  // 替換內部先清空後替換成指定的
replaceAll()

克隆

clone()  // 參數

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>克隆</title>
  <style>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  </style>
</head>
<body>

<button id="b1">屠龍寶刀，點擊就送</button>
<hr>
<button id="b2">屠龍寶刀，點擊就送</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // clone方法不加參數true，克隆標籤但不克隆標籤帶的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加參數true，克隆標籤而且克隆標籤帶的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>
</body>
</html>

點擊複製按鈕

七、事件

一、經常使用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

二、兩種綁定方式

一、$(選擇器).事件名(function(){})

$('button').click(function(){點擊button按鈕觸發的事件代碼})

二、$(選擇器).on("事件名"，function(){})

$('button').on('click',function(){點擊button按鈕觸發的事件代碼})

三、文檔加載

儘可能保證頁面內容加載完畢後再加載js代碼，因此將jQuery代碼寫在body最後

實時獲取input框內部用戶輸入，input事件

$('input').on('input',function(){$(this).val})

四、移除事件

.off(事件名，[選擇器][function(){}])

五、阻止後續事件執行

一、在js代碼最後加上 return false 該對象的後續事件就不會再觸發了

二、利用內置參數在function函數中加e，在最後加上e.preventDefault()

    $('#d1').click(function (e) {
        $('span').text('你好啊');
        // 阻止標籤後續事件的運行
        // return false
        e.preventDefault()} //

六、事件冒泡

事件冒泡：子標籤綁定事件會影響父標籤也會綁定該事件

解決措施：在function中加e，最後加 e.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <div>div
        <p>p
            <span>span</span>
        </p>
    </div>

    <script>
        $('div').click(function (e) {
            alert('我是div')
        });
        $('p').click(function (e) {
            alert('我是p');
            e.stopPropagation()
        });
        $('span').on('click',function (e) {
            alert('我是span');
            // e.stopPropagation()  // 阻止事件冒泡
        });
    </script>
</body>
</html>

解決事件冒泡

七、事件委託

利用事件冒泡的原理，父標籤去捕捉子標籤的事件，將指定的某一區域內容都能觸發相應的事件

// 表格中每一行的編輯和刪除按鈕都能觸發相應的事件。
$("table").on("click", ".delete", function () {
  // 刪除按鈕綁定的事件
})
// 事件委託  將body內全部的點擊事件 委託給button按鈕
$('body').on('click','button',function () {
        alert('放假了')
    })

八、頁面載入

onload 等待什麼加載完畢以後再執行

八、動畫效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑動
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定義（瞭解便可）
animate(p,[s],[e],[fn])

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>點贊動畫示例</title>
  <style>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">點贊</div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</html>

點贊

九、補充

each

一個通用的迭代函數，她能夠用來無縫的迭代對象和數組

一、$.each(可迭代對象，function(index,obj){})

二、$('div').each(function(index,obj){})

data

可以讓標籤幫你存儲一些值

$('div').data('username')  // 獲取div標籤中的username
$('div').data('username','Mr沈')  // 給全部的div加上一個屬性名
$('div').removeData('username')  // 移除div標籤的全部username屬性

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。