前端之jQuery

阿新 • • 發佈：2020-08-01

1. jQuery概述

jQuery是一個javascript庫，在它內部把幾乎所有功能都做了封裝
在使用jQuery時，需要提前下載並應用jQuery之後，才能在程式碼中使用

1.1 jQuery的引入

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>jQuery</title>
</head>
<body>
    <div class="body">
        <ul>
            < 
li id="login">登入</li>
            <li id="register">註冊</li>
        </ul>
    </div>
    <!--引入jQuery-->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script>
        // 利用jQuery提供的功能獲取標籤文字
        var value = $('#login 
').text();
        console.log(value);
    </script>
</body>
</html>

1.2 DOM物件和jQuery物件

DOM物件和jQuery之間可以進行相互轉換

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>jQuery</title>
</head>
<body>
    <div id="content">hgzero 
</div>
    <!--引入jQuery-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        // DOM操作
        // 獲取文字
        var txt = document.getElementById('content').innerText;
        document.getElementById('content').innerText = '煞筆';
        // jQuery操作
        var text = $('#content').text();
        $('#content').text('傻狗');
        // Dom物件轉換jQuery物件：$(dom物件)
        $(document.getElementById('content'))
        // jQuery物件轉換成Dom物件：jQuery物件[0]
        $('#content')[0]
    </script>
</body>
</html>

2. 選擇器

2.1 常用的選擇器

$(document)            // 選擇整個文件物件
$('li')                // 選擇所有的li元素
$('#myId')             // 選擇id為myId的網頁元素
$('.myClass')          // 選擇class為myClass的元素
$('input[name=first]') // 選擇name屬性等於first的input元素
$('#ul1 li span')      // 選擇id為為ul1元素下的所有li下的span元素

2.2 表單選擇器

1）html程式碼

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select>
        <option>Option</option>
    </select>
    <textarea> </textarea>
    <button>Button</button>
</form>

2）jQuery程式碼

$(":text")          // 找到所有input標籤
// $(":input")      找到所有input標籤
// $(":password")   找到所有input且type=password的標籤
// $(":radio")      找到所有input且type=radio的標籤
// $(":checkbox")   找到所有input且type=checkbox的標籤

3. 篩選器

篩選器一般用於對選擇器選中的標籤進行再次篩選

3.1 對選擇集進行修飾過濾

類似CSS偽類

$('#ul1 li:first')  // 選擇id為ul1元素下的第一個li
$('#ul1 li:odd')    // 選擇id為ul1元素下的li的奇數行
$('#ul1 li:eq(2)')  // 選擇id為ul1元素下的第3個li
$('#ul1 li:gt(2)')  // 選擇id為ul1元素下的前三個之後的li
$('#myForm :input') // 選擇表單中的input元素
$('div:visible')    // 選擇可見的div元素

3.2 對選擇集進行函式過濾

$('div').has('p');           // 選擇包含p元素的div元素
$('div').not('.myClass');    // 選擇class不等於myClass的div元素
$('div').filter('.myClass'); // 選擇class等於myClass的div元素
$('div').first();            // 選擇第1個div元素
$('div').eq(5);              // 選擇第6個div元素

3.3 選擇集轉移

$('div').prev('p');        // 選擇div元素前面的第一個p元素
$('div').next('p');        // 選擇div元素後面的第一個p元素
$('div').closest('form');  // 選擇離div最近的那個form父元素
$('div').parent();         // 選擇div的父元素
$('div').children();       // 選擇div的所有子元素
$('div').siblings();       // 選擇div的同級元素
$('div').find('.myClass'); // 選擇div內的class等於myClass的元素

4. 樣式操作

4.1 操作行間樣式

選擇器獲取的多個元素，獲取資訊獲取的是第一個，比如：$("div").css("width")，獲取的是第一個div的width

// 獲取div的樣式
$("div").css("width");
$("div").css("color");


//設定div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
// 一次操作多個css樣式
$("div").css({fontSize:"30px",color:"red"});

4.2 操作樣式類名

$("#div1").addClass("divClass2")             // 為id為div1的物件追加樣式divClass2
$("#div1").removeClass("divClass")           // 移除id為div1的物件的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2") // 移除多個樣式
$("#div1").toggleClass("anotherClass")       // 重複切換anotherClass樣式

5. 屬性操作

5.1 html() 和 text()

1）html() 取出或設定html內容

// 取出html內容
var $htm = $('#div1').html();

// 設定html內容
$('#div1').html('<span>新增文字</span>');

2）text() 取出或設定text內容

// 取出文字內容
var $htm = $('#div1').text();

// 設定文字內容
$('#div1').text('<span>新增文字</span>');

5.2 attr()

attr() 取出或設定某個屬性的值

// 取出圖片的地址
var $src = $('#img1').attr('src');

// 設定圖片的地址和alt屬性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

5.3 val() 值

1）html程式碼

<input type="text" id="username">
<input type="text" class="a1" name="sex">男
<input type="text" class="a1" name="sex">女
<input type="text" class="a2" name="hobby">抽菸
<input type="text" class="a2" name="hobby">喝酒
<input type="text" class="a2" name="hobby">燙頭
<select name="city" id="s1">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
</select>
<select name="lover" id="s2">
    <option value="1">波多</option>
    <option value="2">蒼井</option>
    <option value="3">小澤</option>
</select>

2）獲取值

// 文字輸入框：
    $('#username').val();
// 單選radio框：
    $('.a1:checked').val();
// 多選checkout框：
    $('.a2:checked').val()是不行的, 需要迴圈取值，如下：
        var d = $(':checkbox:checked');
            for (var i=0;i<d.length;i++){
                console.log(d.eq(i).val());
            }
// 單選select框：
    $('#city').val()；
// 多選select框：
    $('#lover').val();

3）設定值

// 文字輸入框：
    $('#username').val('you are my love');
// 單選radio框：
    $('.a1').val([2]);  // 注意裡面必須是列表，寫的是value屬性對應的值
// 多選checkout框：
    $('.a2').val(['2','3'])
// 單選select框：
    $('#city').val('1')；
// 多選select框：
    $('#lover').val(['2','3'])

5.4 prop() 屬性

// HTML程式碼：
<input type="checkbox" id="i1" value="1">

// jQuery程式碼：
$("#i1").prop("checked")

// 結果：
false

6. jQuery元素節點操作

6.1 建立節點

var $div = $('<div>');
var $div2 = $('<div>這是一個div元素</div>');

6.2 插入節點

append() 和 appendTo()：在現存元素的內部，從後面插入元素

var $span = $('<span>這是一個span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>

prepend() 和 prependTo()：在現存元素的內部，從前面插入元素
after() 和 insertAfter()：在現存元素的外部，從後面插入元素
before() 和 insertBefore()：在現存元素的外部，從前面插入元素

6.3 刪除節點

1）empty 刪除標籤內部的標籤

// HTML程式碼：
<div class="d1">
    <span>波多</span>
</div>

// jQuery程式碼：
$('.c1').empty()

// 結果：
<div class="d1">
</div>

2）remove 刪除標籤

// HTML程式碼：
<div class="d1">
    <span>波多</span>
</div>
<div>你好</div>

// jQuery程式碼：
$('.c1').remove()

// 結果：
<div>你好</div>

7. 事件

7.1 click事件

jQuery的鏈式呼叫：jquery物件的方法會在執行完後返回這個jquery物件，所有jquery物件的方法可以連起來寫

$('#btn1').click(function(){
    // 內部的this指的是原生物件
    // 使用jquery物件用 $(this)
})

7.2 jQuery特殊效果

hide() 隱藏元素
show() 顯示元素
fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 切換淡入淡出
toggle() 依次展示或隱藏某個元素
slideDown() 向下展開
slideUp() 向上捲起
slideToggle() 依次展開或捲起某個元素

$btn.click(function(){
        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });
    });

7.3 jQuery動畫

通過animate方法可以設定元素某屬性值上的動畫，可以設定一個或多個屬性值，動畫執行完成後會執行一個函式

$('#div1').animate({
    width:300,
    height:300
},1000,swing,function(){
    alert('done!');
});

// 引數可以寫成數字表達式：
$('#div1').animate({
    width:'+=100',
    height:300
},1000,swing,function(){
    alert('done!');
});

7.4 尺寸相關、滾動事件

1）獲取和設定元素的尺寸

width()、height()                     # 獲取元素width和height  
innerWidth()、innerHeight()           # 包括padding的width和height  
outerWidth()、outerHeight()           # 包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   # 包括padding和border以及margin的width和height

2）獲取元素相對頁面的絕對位置

offse()

3）獲取可視區高度

$(window).height();

4）獲取頁面高度

$(document).height();

5）獲取頁面滾動距離

$(document).scrollTop();  
$(document).scrollLeft();

6）頁面滾動時事件

$(window).scroll(function(){  
    ......  
})

7.5 繫結事件

1）繫結事件&取消繫結事件

繫結事件的其他方式

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());
    });
});

取消繫結事件

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind('mouseover');

    });
});

2）主動觸發與自定義事件

主動觸發
- 可以使用jQuery物件上的trigger方法來觸發物件上繫結的事件
自定義事件
- 除了系統事件外，可以通過bind方法自定義事件，然後用trigger方法觸發這些事件

//給element繫結hello事件
element.bind("hello",function(){
    alert("hello world!");
});

//觸發hello事件
element.trigger("hello");

7.6 事件冒泡

1）什麼是事件冒泡

在一個物件上觸發某類事件（比如單機onclick事件），如果此物件定義了此事件的處理程式，那麼此事件就會呼叫這個處理程式；

如果沒有定義此事件處理程式或者事件返回true，那麼這個事件就會向這個物件的父級物件傳播，從裡島外，直至它被處理（父級物件所有同類事件都將被啟用），或者它到達了物件層次的最頂層，即document物件（有些瀏覽器是window）

2）事件冒泡的作用

事件冒泡允許多個操作被集中處理（把事件處理器新增到一個父級元素上，避免把事件處理器新增到多個子級元素上），它還可以讓你在物件層的不同級別捕獲事件。

3）阻止事件冒泡

事件冒泡機制有時候是不需要的，需要阻止掉，通過event.stopPropagation()來阻止

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})
......
<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

4）阻止預設行為

// 阻止右鍵選單
$(document).contextmenu(function(event) {
    event.preventDefault();
});

5）合併阻止操作

一般把阻止冒泡和組織預設行為合併起來寫，合併寫法可以用

// event.stopPropagation();
// event.preventDefault();

// 合併寫法：
return false;

7.7 事件委託

1）什麼是事件委託

事件委託就是利用冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執行相應的操作。

事件委託首先可以極大的減少事件繫結次數，提高效能；其次可以讓新加入的子元素也可以擁有相同的操作。

2）一般繫結事件的寫法

$(function(){
    $ali = $('#list li');
    $ali.click(function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

3）事件委託的寫法

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

4）取消事件委託

// ev.delegateTarge 委託物件
$(ev.delegateTarge).undelegate();

// 上面的例子可使用 $list.undelegate();

7.8 滾輪事件&函式節流

1）jquery.mousewhell外掛

jquery中沒有滑鼠滾輪事件，原生js中的滑鼠滾輪事件不相容，可以使用jquery的滾輪事件外掛jquery.mousewheel.js

2）函式節流

JavaScript中有些事件的觸發頻率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面說的滑鼠滾輪事件，在短事件內多處觸發執行繫結的函式，可以巧妙地使用定時器來減少觸發的次數，實現函式節流。