前端之jQuery-有解無憂

jQuery物件

jQuery物件是通過jQuery包裝DOM物件后產生的物件

注意：jQuery物件只能使用jQuery里的方法，DOM物件只能使用DOM物件的方法

jQuery基礎知識點

查找標簽

基本選擇器

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

層級選擇器：

$("div span"); //div標簽下所有后代span標簽（子標簽，子子標簽...)
$("div > sapn"); //div標簽下所有兒子span標簽
$("div + span"); //緊挨著div標簽的第一span元素
$("div~span"); //div標簽下所有兄弟元素span.

基本篩選器：

: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)]

屬性選擇器：

[屬性】
[屬性名=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)]

表單篩選器：

: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標簽

篩選器方法：

//下一個元素：
$("#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()

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

頁面載入

//當頁面加載完觸發：
$(function(){
}
/*
與js的window.onload的區別
1、window.onload()函式有覆寫現象，必須等待圖片資源加載完才能呼叫
2、$(functino(){}不會出現覆寫，而且只要檔案加載完畢就可以呼叫，不用等待圖片資源加載
*/

事件委托

利用父標簽去捕獲子標簽的事件

<!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>
        td{
            height: 20px;
        }
    </style>
</head>
<body>
    <table border="solid">
        <thead>
            <th>增加</th>
            <th>洗掉</th>
        </thead>
        <tbody>
            <tr>
                <td class="add">11</td>
                <td class="delete">22</td>
            </tr>
        </tbody>
    </table>

    <div id="d1" value="hello">
        hello
        <p value="world">hello world</p>
    </div>
    <script>
        
        $("table").on("click", ".delete", function () {
            console.log(this)
            $(this).parent().remove()
        })
         $("table").on("click", ".add", function () {
            $(this).parent().clone().insertAfter($('tbody'))
        })
        $('#d1').on('click','p',function () {
            alert(this)
            console.log(this)
        })
    </script>
</body>
</html>

事件委托、克隆例子表格操作

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/122071.html

標籤：其他

上一篇：React 中的生命周期函式

下一篇：用原生JS找出所有的水仙花數