jQuery簡介

Posted on 2022-11-27 21:35 呱呱呱呱嘰里呱啦閱讀(59) 評論(0) 收藏舉報

注意

非可執(zhí)行代碼且非markdown格式的文字中使用的符號都是中文符號。
jQuery對象像是python中的列表，當讀取屬性時默認取第一個元素的屬性值，當寫入屬性時則默認寫入所有元素。

jQuery簡介

即javascript庫

引入方法

本地引入
CDN：

jQuery語法

jQuery(選擇器).action()
或
$(選擇器).action()

篩選器

基本篩選器

：$()
id：$(#d1)[0]
class：$(.c1)[0]
tag：$(span)[0]
tag+id：(div#d1)
tag+class：(div.c1)
tag/id/class：#d1,.c1,p
后代：$('div span')
兒子：$('div>span')
毗鄰：$('div+span')
弟弟：$('div~span')
大兒子：$(ul li:first)
小兒子：$(ul li:last)
索引：$(ul li:eq(2))
非奇索引：$(ul li:even)
奇數索引：$(ul li:odd)
大于索引：$(ul li:gt(2))
小于索引：$(ul li:lt(2))
除外：$(ul li:not('#d1'))
包含子元素：$(ul li:has('p'))

屬性篩選器

所有包含username屬性：$('[username]')
所有包含username屬性且值為george：$('[username="george"]')
所有包含username屬性且值為george標簽類型為p：$('p[username="george"]')

表單篩選器

$(':text') = $('input[type="text"]')
$(':disable')
$(':checked') return 帶有checked和selected屬性的標簽/對象

篩選器方法

$().next()
$().nextAll()
$().nextUntil()
$().prev()
$().prevAll()
$().prevUntil()
$().parent()
$().parents()
$().children()
$().siblings()
$('div').find('p') = $('div p')

操作

類操作

JavaScript	jQuery
classList.add()	addClass()
classList.remove()	removeClass()
classList.contains()	hasClass()
classList.toggle()	toggleClass()

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

$('#d1').hasClass('c1') //返回布爾值
$('div').addClass('c1')
$('div').removeClass('c1')
$('div').toggleClass('c1')

CSS操作

$('p').first().css('color','green').next().css('color','yellow') //類鏈式操作

位置操作

offset()：自身左上角相對于當前左上角的位置
position()：自身左上角相對于父標簽左上角的位置
scrollTop()：即頁面初始狀態(tài)下屏幕某一像素點在頁面下滑過程中經過的長度，可傳參設值
scrollLeft()：即頁面初始狀態(tài)下屏幕某一像素點在頁面右滑過程中經過的長度，可傳參設值

尺寸操作

$('p').height()：即content高
$('p').width()：即content寬
$('p').innerHeight()：即content+padding高
$('p').innerWidth()：即content+padding寬
$('p').outerHeight()：即content+padding+border高
$('p').outerWidth()：即content+padding+border寬

文本操作

JavaScript	jQuery
innerText	text()
innerHTML	html()

$('div').text()
$('div').html()
$('div').text('文本') //清除內部標簽，添加文本
$('div').html('<p>hahahahaha</p>') //清除內部標簽，添加標簽

獲取值操作

JavaScript	jQuery
.value	.val()

$('input').val() //傳值設值
$('input')[0].files[0]
$(':checkbox').val() //傳值設值（給所有）

屬性操作

JavaScript	jQuery
setAttribute	attr(name,value)
getAttribute	attr(name)
removeAttribute	removeAttr(name)

變量名慣例

JavaScript	jQuery
xxxEle	$xxxEle

let $pEle = $('p')
$pEle.attr()
$pEle.attr('id','d1')
$pEle.removeAttr('id')

// 針對checkbox、radio等，使用以下方法獲取值或設值
$('#d1').prop('checked')
$('#d1').prop('checked',false)

文檔操作

JavaScript	jQuery
createElement('p')	$(' ')
appendChild()	append()

let $pEle = $('<p>')
$pEle.text('hahhahahahaha')
$pEle.attr('id','d1')
$('#d2').append($pEle) //可將id為d2的標簽下子標簽視為python中的列表，此動作將在列表末尾追加$pEle（根據$pEle的賦值過程可能是多個標簽）
$pEle.appendTo($('#d1'))
$('#d2').prepend($pEle) //添加為第一個子標簽
$pEle.prependTo($('#d1'))
$('#d2').after($pEle) //同級別后面
$pEle.insertAfter($('#d1'))
$('#d2').before($pEle) //同級別前面
$pEle.insertBefore($('#d1'))
$('#d1').remove() //移除id為d1的標簽及其所有子標簽
$('#d1').empty() //凈空id為d1的標簽 $('#d1').html('')

事件

事件綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script> <!--!!!!!!!!!!!!!!!!!-->



</head>
<body>
    <button id="d1">ahhahahahha</button>
    <button id="d2">xixixixiiixix</button>
    <script type="text/javascript">
        $('#d1').click(function () {
            alert('ahhahahahha')
        });
        $('#d2').on('click', function () {
            alert('xixixixiiixix')
        })
    </script>
</body>
</html>

克隆事件

this：當前被操作的標簽對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
    <style type="text/css">
        #d1 {
            height: 100px;
            width: 100px;
            background-color: orange;
            border-radius: 50%

        }

    </style>


</head>
<body>
    <button id="d1">ahhahahahha</button>

    <script type="text/javascript">
        $('#d1').on('click', function () {
            // $(this).clone().insertAfter($(this)) //默認只克隆html和css不克隆事件，臥槽竟然默認克隆id
            $(this).clone(true).insertAfter($(this)) //通過添加參數true來增加克隆事件的功能
        })
    </script>
</body>
</html>

自定義模態(tài)框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
        .cover {
                position: fixed;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                background-color: rgba(0,0,0,0.3);
                z-index: 99; 
        }
        .close {
                position: fixed;
                height: 100px;
                width: 200px;
                background-color: white;
                top: 50%;
                left: 50%;
                margin-top: -50px;
                margin-left: -100px;
                z-index: 100;
                text-align: center;
        }
        .deep {
                height: 700px;
                width: 1366px;

                background-color: orange;    
        }


        .zindex {
                height: 30px;
                width: 30px;
                background-color: green;
                border-radius: 50%;
                font-size: 6px;
        }
        .hide {
            display: none;
        }
    </style>


</head>
<body>
    <div class="deep">這是底層</div>
    <button class="zindex" id="btn1">彈</button>
    <div class="cover hide"></div>
    <div class="close hide">
        <p>這是最上層</p>
        <button class="zindex" id="btn2">退</button>
    </div>

    <script type="text/javascript">
        let $coverEle = $('.cover')
        let $closeEle = $('.close')
        $('#btn1').on('click', function () {
            $coverEle.removeClass('hide')
            $closeEle.removeClass('hide')
        });
        $('#btn2').on('click', function () {
            $coverEle.addClass('hide')
            $closeEle.addClass('hide')
        })
    </script>
</body>
</html>

多級菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    <style type="text/css">
        .left {
            float: left;
            background-color: darkgray;
            width: 20%;
            height: 100%;
            position: fixed;
        }
        .title {
            font-size: 36px;
            color: white;
            text-align: center;
        }
        .items {
            border: 1px solid green;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <div class="left">
        <div class="menu">
            <div class="title">菜單一
                <div class="items">番茄炒蛋</div>
                <div class="items">青椒肉絲</div>
                <div class="items">拍黃瓜</div>
            </div>
            <div class="title">菜單二
                <div class="items">大盤雞</div>
                <div class="items">回鍋肉</div>
                <div class="items">蟹黃豆花</div>
            </div>
            <div class="title">菜單三
                <div class="items">青菜豆腐湯</div>
                <div class="items">紫菜蛋花湯</div>
                <div class="items">丸子湯</div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $('.title').on('click', function () {
            $('.items').addClass('hide')
            $(this).children().removeClass('hide')
        })
    </script>
</body>
</html>

返回頂部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .hide {
            display: none;
        }
        #d2 {
            position: fixed;
            bottom: 100px;
            right: 20px;
            height: 100px;
            width: 100px;
            background-color: green;
            text-align: center;
        }
    </style>
    <script src='jquery-3.5.1.min.js'></script>
</head>
<body>
    <a href="" id="d1"></a>
    <div style="height: 500px;background-color: green;"></div>
    <div style="height: 500px;background-color: yellow;"></div>
    <div style="height: 500px;background-color: orange;"></div>
    <a href="#d1" id="d2" class="hide">回到頂部</a>
    <script>
        $(window).scroll(function () {
            if($(window).scrollTop() > 100){
                $('#d2').removeClass('hide')
            }else{
                $('#d2').addClass('hide')
            }
        })
    </script>
</body>
</html>

自定義登錄校驗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='jquery-3.5.1.min.js'></script>
</head>
<body>
    <div>username:
        <input type="text" name="name" id="name">
        <span style="color: red" id="s1"></span>
    </div>
    <div>password:
        <input type="text" name="pwd" id="pwd">
        <span style="color: red" id="s2"></span>
    </div>
    <button id="d1">提交</button>
    <script>
        $('#d1').click(function(){
            let username = $('#name').val();
            let pwd = $('#pwd').val();
            if(!username){
                $('#s1').text('用戶名不能為空！')
            };
            if(!pwd){
                $('#s2').text('密碼不能為空！')
            };
        })
        $('input').focus(function (){
            $(this).next().text('')
        })
    </script>
</body>
</html>

input框監(jiān)控

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='jquery-3.5.1.min.js'></script>
</head>
<body>
    <input type="text" id="d1">
    <script>
        $('#d1').on('input', function (){
            console.log(this.value)
        })
    </script>
</body>
</html>

hover事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='jquery-3.5.1.min.js'></script>
</head>
<body>
    <p id="d1">hahahahahahhahahah</p>
    <script>
        $('#d1').hover(
            function (){
            alert('哈哈哈哈哈哈哈')}, //懸浮
            function (){
            alert('hahhahhhhahahahahha') //移開
            })
    </script>
</body>
</html>

按鍵事件

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <script>
        $(window).keydown(function (event){
            console.log(event.keyCode)
        })
    </script>
</body>
</html>

阻止后續(xù)事件

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <form>
        <span id="d1" style="color: green;"></span>
        <input type="submit" id="d2">
    </form>
    <script>
        $('#d2').click(function (e){
            $('#d1').text('hhahahahahah')
            return false //方式一
            // e.preventDefault() //方式二
        })
    </script>
</body>
</html>

阻止事件冒泡

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <div id="d1">div
        <p id="d2">p
            <span id="d3">
                span
            </span>
        </p>
    </div>
    <script>
        $('#d1').click(function (){
            alert('div')
        })
        $('#d2').click(function (){
            alert('p')
        })
        $('#d3').click(function (e){
            alert('span')
            // return false //方式一
            e.stopPropagation()
        })
    </script>
</body>
</html>

事件委托

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <button>啊哈哈哈哈哈哈哈</button>
    <script>
        $('body').on('click','button',function (){ //將body內所有click事件委托給button觸發(fā)function
            alert('123')                          //可以影響到動態(tài)添加的具備click事件的標簽
        })

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

頁面加載

//第一種
$(document).ready(function (){
    console.log('hahahhahahahahha')
})
//第二種
$(function (){
    console.log('hahahhahahhahah')
})
//第三種
//直接寫在body內部最下方

動畫效果

$('#d1').hide(3000)
$('#d1').show(3000)
$('#d1').slideUp(3000)
$('#d1').slideDown(3000)
$('#d1').fadeOut(3000)
$('#d1').fadeIn(3000)
$('#d1').fadeTo(3000,0.4)

each方法

$('p').each(function(index,obj){console.log(index,obj)})
$.each([1,2,3],function(index,obj){console.log(index,obj)})

data方法

$('div').data('info','hahahahahha')
$('div').first().data('info') // return 'hahahahahha'
$('div').last().removeData('info')

刷新頁面返回頂部

無情的學習機器

jQuery簡介

注意

jQuery簡介

引入方法

jQuery語法

篩選器

基本篩選器

屬性篩選器

表單篩選器

篩選器方法

操作

類操作

CSS操作

位置操作

尺寸操作

文本操作

獲取值操作

屬性操作

文檔操作

事件

事件綁定

克隆事件

自定義模態(tài)框

多級菜單

返回頂部

自定義登錄校驗

input框監(jiān)控

hover事件

按鍵事件

阻止后續(xù)事件

阻止事件冒泡

事件委托

頁面加載

動畫效果

each方法

data方法