前端之jQuery

時間 2020-11-01

標籤 javascript html java jquery web ajax app ide 函數學習欄目 JQuery 简体版

原文原文鏈接

jQuery對象

jQuery對象是經過jQuery包裝DOM對象後產生的對象javascript

注意：jQuery對象只能使用jQuery裏的方法，DOM對象只能使用DOM對象的方法html

jQuery基礎知識點

查找標籤

基本選擇器java

id選擇器： $('#id')
標籤選擇器：$('tagName')
class選擇器：$(".className「）
配合使用：$("div.c1") //找到有c1的div標籤
全部元素選擇器：$("*")
組合選擇器：$("#id, .className, tagName")

層級選擇器：jquery

$("div span"); //div標籤下全部後代span標籤（子標籤，子子標籤...)
$("div > sapn"); //div標籤下全部兒子span標籤
$("div + span"); //緊挨着div標籤的第一span元素
$("div~span"); //div標籤下全部兄弟元素span.

基本篩選器：web

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

//例子
$('ul li:first')
S.fn.init [li, prevObject: S.fn.init(1)]
$('ul li:gt(3)')
S.fn.init(6) [li, li#l1, li, li.cl1, li, li, prevObject: S.fn.init(1)]
$('ul li:has(#l1)')
S.fn.init [prevObject: S.fn.init(1)]length: 0prevObject: S.fn.init [document]__proto__: Object(0)
$('ul li:not(.cl1)')
S.fn.init(9) [li, li, li, li, li, li#l1, li, li, li, prevObject: S.fn.init(1)]
$('ul li:odd')
S.fn.init(5) [li, li, li#l1, li.cl1, li, prevObject: S.fn.init(1)]

屬性選擇器：ajax

[屬性】
[屬性名=value]
[屬性!=value]

//例子
$('[username]')
S.fn.init(2) [input, input, prevObject: S.fn.init(1)]
$('[username="hello"]')
S.fn.init [input, prevObject: S.fn.init(1)]

表單篩選器：app

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

//例子：
$(":checkbox")  // 找到全部的checkbox

//表單對象屬性：
:enabled
:disabled
:checked
:selected
//例子
$("input:enabled")  // 找到可用的input標籤
$(":selected")  // 找到全部被選中的option
$(":checked")  // 會將checked和selected都拿到，通常使用的時候會加個 限制條件，如：
$("input:selected")  //找到被選中的input標籤

篩選器方法：ide

//下一個元素：
$("#id").next() 
$("#id").nextAll()
$("#id").nextUntil("#d1")   //尋找下一個元素，直到#d1位置爲止，不包括#d1標籤

//上一個元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")    //尋找上一個元素，直到#d1位置爲止，不包括#d1標籤

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

//兒子和兄弟元素
$("#id").children();// 兒子
$("#id").siblings();// 兄弟

jQuery的一些方法：函數

$("div").find("p") //查找div標籤下的p標籤等價於$("div p")
$("div").filter(".c1") //查找含有c1樣式類的div標籤。等價於$("div.c1)
$("div").first()
$("div").last()
$("div").not()
$("div").has()
$("div").eq()

標籤操做

樣式操做

jQuery                             js
addClass();                        classList.add()
removeClass();                     classList.remove()
hasClass();  //判斷樣式是否存在       classList.contains()
toggleClass();//有則刪去，無則添加    classList.toggle()

//例子
$("#d1").toggleClass('c1')
S.fn.init [div#d1.c2]
$("#d1").addClass('c1')
S.fn.init [div#d1.c2.c1]
$("#d1").toggleClass('c2')
S.fn.init [div#d1.c1]

位置操做

offset() 獲取匹配元素在當前窗口的相對偏移或這種元素位置
position() 獲取匹配元素相對父元素的偏移
scrollTop() 獲取匹配元素相對滾動條頂部的偏移
scrollLeft() 獲取匹配元素相對滾動條左側的偏移

尺寸：

height() 高度
widght() 寬度
innerHeight()
innerWidth()　　
outerHeght()
outerWidth()

文本操做

//jQuery                           js
text()                             innerText()
html()                             innerHtml()
//例子
$('div').text()     //獲取標籤文本
$('div').text('hello world')    //設置標籤文本內容
$('div').html()    //獲取標籤html文本
$('div').html('<h1>hello world</h1>')  //設置html文本內容

取值操做

//jQuery                    js
.val()                      .value()
//例子：
$('input').val()             //獲取值
$('input').val('hello')      //設置值

//例子

S.fn.init [input#ip]
$('#ip')[0]
<input type="file" id="ip">
$('#ip')[0].files[0] //$('#ip')[0]先轉化爲原js對象，再用原js對象中files獲取文件信息
File {name: "1.png", lastModified: 1600868737120, lastModifiedDate: Wed Sep 23 2020 21:45:37 GMT+0800 (中國標準時間), webkitRelativePath: "", size: 21844, …}
$('#ip')[0].files
FileList {0: File, length: 1}0: File {name: "1.png", lastModified: 1600868737120, lastModifiedDate: Wed Sep 23 2020 21:45:37 GMT+0800 (中國標準時間), webkitRelativePath: "", size: 21844, …}length: 1__proto__: FileList學習

屬性操做

 
//jQuery                          
attr(屬性)         //獲取屬性值               
attr(屬性，屬性值)   //設置屬性值
removeAttr(屬性）  //刪除屬性
//對應的js操做方法
setAttribute()
getAttribute()
removeAttribute()
//用於checkbox和radio
prop()    //獲取屬性
removeProp()  //移除屬性

//例子
let $pEle=$('#d1')
undefined

$pEle.attr('username')
"hello"
$pEle.attr('username','hello world')

$pEle.attr('username')
"hello world"
$pEle.attr('value','11')

let $iEle=$('#d2')

$iEle.prop('checked')
false
$iEle.prop('checked')
true
//attr所指的屬性時HTML標籤屬性，而prop是指DOM對象屬性

注意：對於標籤上有的可以看到的屬性和自定義屬性用attr()方法

　　對於返回布爾值好比checkbox，radion，option這三個標籤是否被選中，用prop方法

文檔操做

//js                    jQuery
createElement('p')      $('<p>')   //建立新標籤
appendChild()           append()  //追加新標籤

//例子
let $pEle=$('<p>')  //建立p標籤
undefined
$pEle.text('你好 世界 ')
S.fn.init [p]
$pEle.attr('id','p2')

$('#d1').append($pEle)   //d1內部尾部追加p標籤
S.fn.init [div#d1]
$pEle.appendTo($('#d1'))
S.fn.init [p#p2, prevObject: S.fn.init(1)]

$('#d3').prepend($pEle)  //內部頭部追加
S.fn.init [div#d3]
$pEle.prependTo($('#d3'))
S.fn.init [p, prevObject: S.fn.init(1)]

$('#d3').after($pEle)   //放在id=d3的標籤後面
S.fn.init [div#d3]
$pEle.insertAfter($('#d3'))
S.fn.init [p, prevObject: S.fn.init(1)]

$('#d3').before($pEle)  //放在id=d3的標籤前面
S.fn.init [div#d3]
$pEle.insertBefore($('#d3'))
S.fn.init [p, prevObject: S.fn.init(1)]

$('#d1').remove()  //刪除標籤
S.fn.init [div#d1]
$('#p1').empty()   //清空標籤內容
S.fn.init {}

事件

事件綁定方式：

//第一種
$('#d1').click(functino(){
   alert('1'); 
})
//第二種

語法：.on( events [, selector(選擇器） ],function(){})

$('#d1').on('click',function(){
    alert('1')
})

$('#d1').on('click',‘div',function(){
    alert('1') })

注意：DOM定義的事件能夠用 .on()方法來綁定事件，可是jQuery定義的事件就不能夠

經常使用事件有：

click 點擊
hover 鼠標懸浮在目標上面
blur 輸入域失去焦點
focus 輸入域獲取焦點（點擊input輸入框）
change 改變，通常用在選擇、勾選框
keyup 釋放鍵盤上的按鍵時觸發
keydown 按下按鍵時觸發
input 用戶輸入時觸發

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .left{
            width: 20%;
            height: 800px;
            display: block;
            float: left;
            background-color: grey;
            position: fixed;
        }
        .menu{
            font-size: 32px;
            font-weight: bold;
            text-align: center;
            color: white;
        }
        .item{
            color:whitesmoke;
            font-size: 20px;
            border: 3px solid red;
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
    <div class="left">
        <div class="menu">菜單一
            <div class="item ">學習</div>
            <div class="item ">遊戲</div>
            <div class="item ">讀書</div>
        </div>
        <div class="menu">菜單二
            <div class="item ">學習</div>
            <div class="item ">遊戲</div>
            <div class="item">讀書</div>
        </div>
        <div class="menu">菜單三
            <div class="item">學習</div>
            <div class="item">遊戲</div>
            <div class="item">讀書</div>
        </div>
    </div>
    <script>
        $('.menu').on('click',function () {
            $('.item').addClass('hidden') //將全部的子菜單隱藏起來
            $(this).children().removeClass('hidden')  //將選擇的菜單下子菜單取消隱藏
        })
    </script>
</body>
</html>

左側菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .cover{
            position: fixed;
            top:0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            background-color: black;
            opacity: 0.4;
            z-index: 99;
        }
        .modal{
            top:50%;
            left: 50%;
            width: 600px;
            height: 300px;
            margin-top: -150px;
            margin-left: -300px;
            background-color: white;
            position: fixed;
            z-index: 100;
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
    <div>我是最底層</div>
    <button id="d1">點擊註冊</button>
    <div class="cover hidden" id="d2"></div>
    <div class="modal hidden" id="d3">
        <p>
            usename:<input type="text">
        </p>
        <p>
            password:<input type="text">
        </p>
        <input type="button" value="commit" >
        <input type="button" value="quxiao" id="i1">
    </div>
    <script>
        //註冊
        $('#d1').click(function () {
            $('#d2').removeClass('hidden')
            $('#d3').removeClass('hidden')
        })
        //取消註冊
        $('#i1').click(function () {
            console.log(this)
            $('#d2').addClass('hidden')
            $('#d3').addClass('hidden')
        })
    </script>
</body>
</html>

模擬百度註冊界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        span{
            color:red;
        }
        p{
            border: 3px solid blue;
        }
    </style>
</head>
<body>
    <div>
        user:<input id="i1" type="text">
        <span></span>
    </div>
    <div>
        password:<input id="i2" type="password">
        <span></span>
    </div>
    <div>
        <input id="b1" type="button" value="提交">
        <input type="button" value="取消">
    </div>
    <p>hello world</p>
    <script>
        $('#b1').click(function () {
            let user=$('#i1').val()
            let password=$('#i2').val()
            if(!user){
                $('span').first().text('用戶名不能爲空')
            }
            if(!password){
                $('span').last().text('密碼不能爲空')
            }
            $('input').focus(function () {
                $('span').first().text('')
            })
        })
        //input事件
        $('#i1').on('input',function () {
            console.log(this.value)
        })
        //鼠標懸浮事件
        $('p').hover(
            function () {
                alert('我來了')
        },function () {

            })

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

模擬input、hover、click事件例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #d1{
            width: 100%;
            height: 500px;
            background-color: hotpink;
        }
        #d2{
            width: 100%;
            height: 500px;
            background-color: greenyellow;
        }
        #d3{
            width: 100%;
            height: 500px;
            background-color: deepskyblue;
        }
        #p1{
            width: 100px;
            height: 40px;
            background-color: grey;
            position: fixed;
            right: 20px;
            bottom: 20px;
            text-align: center;
            padding-top: 20px;
            border-radius: 20%;
            text-decoration: none; //去除a標籤下的下劃線
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<a id="p1" class="hidden" href="#d1">返回頂部</a>
<script>
    $(window).scroll(function () {
        if($(window).scrollTop()>500){
            $('#p1').removeClass('hidden')
        }
        else {
            $('#p1').addClass('hidden')
        }
    })
</script>

</body>
</html>

返回頂部

移除事件：把on改爲off，就是移除 .on()綁定的事件

阻止後續事件執行：事件函數中添加 return false; (經常使用於阻止表單提交等）或者e.preventDefault()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #p1{
            color: red;
        }
    </style>
</head>
<body>
    <form action="">
        <p id="p1"></p>
        <input type="submit" id="i1">
    </form>
    <script>
        $('#i1').click(function (e) {
            $('#p1').text('提交成功')
            <!-- 阻止input其餘事件的發生，好比input關聯的表單事件提交-->
            return false
            <!-- 
            第二種
            e.preventDefault()
             -->
        })
    </script>
</body>
</html>

阻止表單提交

阻止事件冒泡：添加e.stopPropagation()或return false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="d1">div
        <p id="p1">p
            <span id="s1">span</span>
        </p>
    </div>
    <script>
        $('#d1').click(function () {
            alert('div')
        })
        $('#p1').click(function () {
            alert('p')
        })
        $('#s1').click(function (e) {
            alert('span')
            // return false     //阻止事件冒泡
            e.stopPropagation()
        })
    </script>

</body>
</html>

阻止事件冒泡

頁面載入

//當頁面加載完觸發：
$(function(){
}
/*
與js的window.onload的區別
一、window.onload()函數有覆蓋現象，必須等待圖片資源加載完才能調用
二、$(functino(){}不會出現覆蓋，並且只要文檔加載完畢就能夠調用，不用等待圖片資源加載
*/

事件委託

事件委託利用的就是冒泡事件的原理，經過在父元素指定一個事件來處理子元素下的一個類型事件，好比在ul元素綁定一個點擊事件，來處理子元素li的點擊事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    //爲ul下的全部li綁定點擊事件
    $('ul').on('click','li',function () {
        alert('點我準沒錯')
    })
</script>
</body>
</html>

jQuery的each()方法：

實質：就是遍歷一個jQuery對象，爲jQuery對象裏面每一個元素傳遞給函數執行

語法：$('#id').each(function(index,Element) index是數字索引，Elenment是元素對象

//例子   第一種
$('li').each(function(index,ele){ console.log(index,ele)})
VM766:1 0 <li>1</li>
VM766:1 1 <li>2</li>
VM766:1 2 <li>3</li>
S.fn.init(3) [li, li, li, prevObject: S.fn.init(1)]
//第二種
let li_list=[1,2,3,4]
$.each(li_list,function(index,ele){console.log(index,ele)})
VM1056:1 0 1
VM1056:1 1 2
VM1056:1 2 3
VM1056:1 3 4
(4) [1, 2, 3, 4]

注意：在遍歷過程當中可使用return false提早結束each循環

jQuery.data()方法：

給標籤儲存數據，用戶肉眼看不到

$('li').data('name','hello')    
//給li添加name屬性，屬性值爲「hello」

$('li').first().data('name')
"hello"
//移除name屬性
$('li').removeData('name') 
$('li').first().data('name')
undefined