jQuery常用知識點大總結

来源:https://www.cnblogs.com/an-wen/archive/2019/07/10/11166887.html
-Advertisement-
Play Games

jQuery [TOC] jQuery介紹 1.jQuery是一個輕量級的、相容多瀏覽器的JavaScript庫。 2.jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，能夠極大地簡化JavaScript編程。它的宗旨就是：“Write ...


目錄

jQuery

jQuery介紹

1.jQuery是一個輕量級的、相容多瀏覽器的JavaScript庫。

2.jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，能夠極大地簡化JavaScript編程。它的宗旨就是：“Write less, do more.“

jQuery的優勢

  1. 一款輕量級的JS框架。jQuery核心js文件才幾十kb，不會影響頁面載入速度。
  2. 豐富的DOM選擇器,jQuery的選擇器用起來很方便，比如要找到某個DOM對象的相鄰元素，JS可能要寫好幾行代碼，而jQuery一行代碼就搞定了，再比如要將一個表格的隔行變色，jQuery也是一行代碼搞定。
  3. 鏈式表達式。jQuery的鏈式操作可以把多個操作寫在一行代碼里，更加簡潔。
  4. 事件、樣式、動畫支持。jQuery還簡化了js操作css的代碼，並且代碼的可讀性也比js要強。
  5. Ajax操作支持。jQuery簡化了AJAX操作，後端只需返回一個JSON格式的字元串就能完成與前端的通信。
  6. 跨瀏覽器相容。jQuery基本相容了現在主流的瀏覽器，不用再為瀏覽器的相容問題而傷透腦筋。
  7. 插件擴展開發。jQuery有著豐富的第三方的插件，例如：樹形菜單、日期控制項、圖片切換插件、彈出視窗等等基本前端頁面上的組件都有對應插件，並且用jQuery插件做出來的效果很炫，並且可以根據自己需要去改寫和封裝插件，簡單實用。

原生DOM的寫法就是寫JS代碼，而以後我們多數都用jQuery來寫，因為jQuery的優勢很多，看上面，並且查找標簽的方式有很多，比原生的DOM豐富的多，很便利，還有重要的一點就是不需要考慮瀏覽器的相容性，因為jQuery做到了各大瀏覽器相容的功能。

下載鏈接：jQuery官網，首先需要下載這個jQuery的文件，然後在HTML文件中引入這個文件，就可以使用這個文件中幫我們提供的jquery的介面了。

　　　　中文文檔：jQuery AP中文文檔

jQuery的引入方式有兩種：

1.直接下載文件到本地（最常用），從本地中導入

2.使用文件的網路地址，就像我們img標簽裡面的那個src的用法差不多。

　引入完之後，就可以直接使用jQuery的語法來寫了，但是還是要寫在script標簽裡面，並且要註意引入順序，先引入文件，再在script標簽裡面寫jQuery的代碼，先導入再使用。

jQuery對象和dom對象

jquery對象找到的標簽對象稱為--jQuery對象
原生js找到的標簽對象稱為--dom對象
DOM對象只能使用dom對象的方法  不能使用jQuery對象的方法
jQuery對象也是只能使用知己的對象方法

jQuery對象和dom對象之間可以互相轉換
jquery轉換dom
    $('#d1')[0]
dom轉換jQuery
    var a=$(#d1)[0]
    $(a)
    $($(#d1)[0])


$($('div')[0]).text().trim();
"床前明月光"

$($('div')[0]).text('安文最帥');

$($('div')[0]).text('安文最帥').text();
"安文最帥"

jQuery選擇器

jquery('#d1') 找到id為d1 的標簽
簡寫$('d1')

選擇器可能找到的是多個標簽，是一個數組，但還是jQuery對象可以直接只用jQuery的方法，對找到的所有標簽進行統一設置；如果要單獨設置選中的所有標簽中的某個標簽可以通過索引取值的方式找到，按後註意 通過索引得到的標簽 是個dom對象$($(#d1)[0])

基本選擇器（同css）

id選擇器：

$("#id")  #不管找什麼標簽，用什麼選擇器，都必須要寫$("")，引號裡面再寫選擇器，通過jQuery找到的標簽對象就是一個jQuery對象，用原生JS找到的標簽對象叫做DOM對象，看我們上面的jQuery對象部分的內容
　　　　　　標簽選擇器：

$("tagName")
　　　　　　class選擇器：

$(".className")
　　　　　　配合使用：

$("div.c1")  // 找到有c1 class類的div標簽
　　　　　　所有元素選擇器：

$("*")
　　　　　　組合選擇器：

$("#id, .className, tagName")


層級選擇器：（同css）x和y可以為任意選擇器
$("x y");// x的所有後代y（子子孫孫）
$("x > y");// x的所有兒子y（兒子）
$("x + y")// 找到所有緊挨在x後面的y
$("x ~ y")// x之後所有的兄弟y

基本篩選器（選擇之後進行過濾）：

:first // 第一個
:last // 最後一個
:eq(index)// 索引等於index的那個元素
    $('li:eq(1)');
    $('li:eq(-1)').text();
:even // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)// 匹配所有大於給定索引值的元素
:lt(index)// 匹配所有小於給定索引值的元素
:not(元素選擇器)// 移除所有滿足not條件的標簽
:has(元素選擇器)// 選取所有包含一個或多個標簽在其內的標簽(指的是從後代元素找)
    $('li:has(span)');

$("div:has(h1)")// 找到所有後代中有h1標簽的div標簽，意思是首先找到所有div標簽，把這些div標簽的後代中有h1的div標簽篩選出來
$("div:has(.c1)")// 找到所有後代中有c1樣式類（類屬性class='c1'）的div標簽
$("li:not(.c1)")// 找到所有不包含c1樣式類的li標簽
$("li:not(:has(a))")// 找到所有後代中不含a標簽的li標簽
    $("li:not(:has(c1)")

屬性選擇器：

[attribute]
[attribute=value]// 屬性等於
[attribute!=value]// 屬性不等於

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

表單篩選器

多用於找form表單裡面出現的input標簽，當然通過屬性選擇器找肯定也是沒問題的，這樣就是寫著簡單一些

input標簽中type屬性為這個值的input標簽
:text
:password   實例：$(':password');
:file
:radio
:checkbox
:submit
:reset
:button

表單對象屬性:

:enabled    #找到可用的input標簽
    $(':enabled');
:disabled   #找到不可用的input標簽
    用戶名：<input type="text" disabled>
    $(':disabled');

:checked
    <input type="radio" name="sex">男
    $(':checked');
:selected
    <select name="" id="city">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">深圳</option>
        <option value="">山西</option>
        <option value="">大同</option>
    </select>
    $(':selected').text();

篩選器方法(用的很多)

找下一個元素：
$("#id").next()         #找到下一個兄弟標簽
    示例：$('#l2').next();
    示例：$('#l2').next().next().next().text();
    
$("#id").nextAll()      #找到下麵所有的兄弟標簽
    示例：$('#l2').nextAll().text();
$("#id").nextUntil("#i2") #直到找到id為i2的標簽就結束查找，不包含它
    示例：$('#l2').nextUntil('#l4').text();

示例：
<ul>
    <li>安文</li>
    <li id="l2"><span>又彪</span></li>
    <li>思雨</li>
    <li id="l4">
        <a href="" class="c1">慶青</a>
    </li>
    <li>相璽</li>
</ul>


找上一個元素：
$("#id").prev()
    示例：$('#l4').prev().text();
$("#id").prevAll()
    示例：$('#l4').prevAll().text();
$("#id").prevUntil("#i2")
    示例：$('#l4').prevUntil('#l2').text();

父親元素：
$("#id").parent()
    示例：$('a').parent();
$("#id").parents()  // 查找當前元素的所有的父輩元素（爺爺輩、祖先輩都找到）
    示例：$('a').parents();
$("#id").parentsUntil('body') // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止，這裡直到body標簽，不包含body標簽，基本選擇器都可以放到這裡面使用。


兒子和兄弟元素：
$("#id").children();// 兒子們
    示例：$('ul').children().text();
    示例：$('ul').children('#l4').text().trim();
$("#id").siblings();// 兄弟們，不包含自己，.siblings('#id')，可以在添加選擇器進行進一步篩選
    示例：$('#l4').siblings().text();

查找
$("div").find("p") --
    示例：$('ul').find('#l4').text();等價於$('ul #l4').text();

篩選
$("div").filter(".c1")  // 從結果集中過濾出有c1樣式類的，從所有的div標簽中過濾出有class='c1'屬性的div，和find不同，find是找div標簽的子子孫孫中找到一個符合條件的標簽
    示例：$('li').filter('#l4').text();




等價於 $("div.c1")
　　補充（和前面使用冒號的一樣  :first等，只不過冒號的那個是寫在選擇器裡面的，而下麵的這幾個是方法，如此而已，就不說啦）：
.first() // 獲取匹配的第一個元素
    $('li').first();
    $('li:first');
.last() // 獲取匹配的最後一個元素
.not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
.has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
.eq() // 索引值等於指定值的元素

標簽操作

樣式類操作

addClass();// 添加指定的CSS類名。
removeClass();// 移除指定的CSS類名。
hasClass();// 判斷樣式存不存在
toggleClass();// 切換CSS類名，如果有就移除，如果沒有就添加。
示例代碼
    $('.c1').addClass('c2');
    $('.c1').removeClass('c2');
    $('.c1').hasClass('c2');
    $('.c1').toggleClass('c2');

css樣式

原生js
    標簽.style.color = 'red';
jquery
    $('.c1').css('background-color','red');  
    同時設置多個css樣式
    $('.c1').css({'background-color':'yellow','width':'200px'})

位置操作

查看位置
$('.c2').position();  //查看相對位置 
    {top: 20, left: 20}
$('.c2').offset();    //查看距離視窗左上角的絕對位置
    {top: 28, left: 28}
設置位置
    $('.c2').offset({'top':'20','left':'40'});

jQuery綁定點擊事件的寫法

    原生js綁定點擊事件
    // $('.c1')[0].onclick = function () {
    //     this.style.backgroundColor = 'green';
    // }
jquery綁定點擊事件
    $('.c1').click(function () {
        $(this).css('background-color','green');
    })

點擊事件和滾動事件的示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 100px;
            width: 100px;
        }
        .c2{
            background-color: green;
            height: 1000px;
            width: 100px;
        }
        .c3{
            background-color: blue;
            height: 1000px;
            width: 100px;
        }
        .s1{
            position: fixed;
            left:20px;
            bottom: 20px;
            height: 40px;
            width: 80px;
            background-color: purple;
            line-height: 40px;
            text-align: center;

        }
        .s1 a{
            color: white;
            font-size: 14px;
            text-decoration: none;
        }
        .hide{
            display: none;
        }


    </style>
</head>
<body>
<!--<a name="top">這裡是頂部</a>-->
<!--<a>這裡是頂部</a>-->
<span>頂部位置</span>
<div class="c1"></div>

<button class="change-postion">走你</button>

<div class="c2"></div>
<div class="c3"></div>

<span class="s1 hide">
    <!--<a href="#top">返回頂部</a>-->
    <span>返回頂部</span>

</span>


<script src="jquery.js"></script>
<script>
    //點擊事件來改變標簽位置
    $('.change-postion').click(function () {
        $('.c1').offset({top:200,left:200});
    });
    
    //滾動事件,監聽滾動距離來顯示或者隱藏標簽
    $(window).scroll(function () {
        console.log($(window).scrollTop());
        if ($(window).scrollTop() >=200){
            $('.s1').removeClass('hide');
        }else {
            $('.s1').addClass('hide');
        }
    });
    
    // 回到頂部,scrollTop設置值
    $('.s1').click(function () {
        $(window).scrollTop(0);
    })

</script>

</body>
</html>

尺寸

$('.c1').height();  //content 高度
$('.c1').width();   //content 寬度
$('.c1').innerHeight();//content高度+padding高度
$('.c1').innerWidth(); //content寬度+padding寬度
$('.c1').outerHeight();//content高度+padding高度 + border高度
$('.c1').outerWidth();//content寬度+padding寬度+ border寬度


示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 100px;
            height: 100px;
            border: 2px solid red;
            background-color: green;
            padding: 20px 30px;
        }
    </style>
</head>
<body>
<div class="c1"></div>

<script src="jquery.js"></script>
</body>
</html>

文本操作

html()//取得第一個匹配元素的html內容，包含標簽內容
html(val)//設置所有匹配元素的html內容，識別標簽，能夠表現出標簽的效果

text()// 取得所有匹配元素的內容，只有文本內容，沒有標簽
text(val)//設置所有匹配元素的內容，不識別標簽，將標簽作為文本插入進去
示例:
$('.c1').text('<h3>你好,太白</h3>');
$('.c1').html('<h3>你好,太白</h3>');

值操作

獲取值
    input type='text'的標簽--$('#username').val();
    input type='radio'標簽獲取被選中的標簽的值 --- $(':radio:checked').val();
    input type='checkbox'標簽獲取被選中的標簽的值 --- 直接$(':checkbox:checked').val();是不行的,需要迴圈取值  
        var d = $(':checkbox:checked');
        for (var i=0;i<d.length;i++){
            console.log(d.eq(i).val());
        }
        
    單選select --- $('#city').val();
    多選select --- $('#author').val(); // ["2", "3"]  

設置值
    input type='text'的標簽 --- $('#username').val('李傑');
    input type='radio'標簽 ---  $('[name="sex"]').val(['3']);
            如果 $('[name="sex"]').val('3'),所有標簽的值都變成了'3';
    input type='checkbox'設置值 --- $('[name="hobby"]').val(['2','3'])
    單選select --- $('#city').val('1');  option value='1'
    多選select --- $('#author').val(['2','3'])

屬性操作

attr(attrName)// 返回第一個匹配元素的屬性值
attr(attrName, attrValue)// 為所有匹配元素設置一個屬性值
attr({k1: v1, k2:v2})// 為所有匹配元素設置多個屬性值
removeAttr(attrName)// 從每一個匹配的元素中刪除一個屬性

示例:
    設置單個屬性
        $('.c1').attr('xx','oo');
    設置多個屬性
        $('.c1').attr({'age':'18','sex':'alex'});
    查看屬性
        $('.c1').attr('屬性名');
        $('.c1').attr('xx');
    刪除屬性
        $('.c1').removeAttr('xx');

prop -- 針對的是checked\selected\disabled..

查看標簽是否有checked屬性,也就是是否被選中
        attr $(':checked').attr('checked'); //checked -- undefined
        prop $(':checked').prop('checked'); //true  -- false
        
        通過設置屬性的方式來設置是否選中:
            $(':radio').eq(2).prop('checked',true);  true和false不能加引號
            $(':radio').eq(2).prop('checked',false);

簡單總結:
    1.對於標簽上有的能看到的屬性和自定義屬性都用attr
    2.對於返回布爾值的比如checkbox、radio和option的是否被選中或者設置其被選中與取消選中都用prop。
    具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

文檔處理

添加到指定元素內部的後面
    $(A).append(B)// 把B追加到A
    $(A).appendTo(B)// 把A追加到B
    #添加字元串照樣能識別標簽  *****
    $('#d1').append('<a href="http://www.jd.com">京東</a>');
添加到指定元素內部的前面
    $(A).prepend(B)// 把B前置到A
    $(A).prependTo(B)// 把A前置到B
    示例
        $('a').prependTo($('div'));

添加到指定元素外部的後面
    $(A).after(B)// 把B放到A的後面
    $(A).insertAfter(B)// 把A放到B的後面

添加到指定元素外部的前面
    $(A).before(B)// 把B放到A的前面
    $(A).insertBefore(B)// 把A放到B的前面
    
移除和清空元素
    remove()// 從DOM中刪除所有匹配的元素。
    empty()// 刪除匹配的元素集合中所有的子節點，包括文本被全部刪除，但是匹配的元素還
    $('div').remove();
    $('div').empty();

替換
    replaceWith()
    replaceAll()
    示例:
        var a = document.createElement('a')
        a.href = 'http://www.baidu.com';
        a.innerText = 'xxx';
        
        $('span').replaceWith(a);
        $(a).replaceAll('span');
        
clone()克隆
    <button class="btn">屠龍寶刀,點擊就送!</button> 

    $('.btn').click(function () {
        // var a = $(this).clone(); //克隆標簽
        var a = $(this).clone(true);  //連帶事件一起克隆
        $(this).after(a);

    })

事件

事件綁定方式  兩種方式
<script>
    // 方式一
    // $('#d1').click(function () {
    //     $(this).css({'background-color':'green'})
    // })


    // 方式二  on綁定
    $('#d1').on('click',function () {
        $(this).css({'background-color':'green'})
    })
</script>

常用事件

<div class="c1"></div>

click(function(){...})
    $('#d1').on('click',function () {
        $(this).css({'background-color':'green'})
    })
hover(function(){...})
    //滑鼠懸浮 觸發事件
    $('.c1').hover(
        //滑鼠放上去
        function () {
            $(this).css({'background-color':'blue'});
        },
        function(){
            $(this).css({'background-color':'black'});
        }
    );


blur(function(){...})
    //失去游標(焦點)時觸發事件 使div變色
    $('[type="text"]').blur(function () {
        $('.c1').css({'background-color':'pink'})
    })
focus(function(){...})  //獲取游標時觸發事件 使div變色
    $('[type="text"]').focus(function () {
        $('.c1').css({'background-color':'black'})
    })
                 
change(function(){...}) //內容發生變化，input，select等
    //與內容發改變時觸發的事件
    $('select').change(function () {
        $('.c1').toggleClass('cc')
    })


keyup(function(){...})  //鍵盤抬起觸發事件
    $(window).keyup(function (e) {
        console.log(e.keyCode);
    })


keydown(function(){...})    //鍵盤按鍵按下事件  參數e/event
    $(window).keydown(function (e) {
        console.log(e.keyCode) //每個鍵都有一個keycode鍵 ，通過不同的值觸發不同的事件
        if(e.keyCode===37){
            $('.c1').css({'background-color':'green'})
        }else if(e.keyCode===39){
            $('.c1').css({'background-color':'balck'})
        }
        else{
            $('.c1').css({'background-color':'yellow'})
        }
    })


mouseenter(function(){...}) // 滑鼠懸浮  等同於hover事件
mouseout(function(){...})
    $('.c1').mouseenter(function () {
        $(this).css({'background-color':'blue'});
    });
    $('.c1').mouseout(function () {
        $(this).css({'background-color':'yellow'});
    });


//滑鼠懸浮 只觸發一次
    $('.c2').mouseenter(function () {
        console.log('你變了');
    });
//滑鼠懸浮  連續觸發
    $('.c2').mouseover(function () {
        console.log('你變了');
    })
mouseover 和 mouseenter的區別是：mouseover事件是如果該標簽有子標簽，那麼移動到該標簽或者移動到子標簽時會連續觸發，mmouseenter事件不管有沒有子標簽都只觸發一次，表示滑鼠進入這個對象

input事件

實時監聽input輸入值變化示例：input值變化事件：看百度搜索的效果
這叫做input事件，看代碼：只要input框裡面的值發生變化就觸發某個事件，註意input事件不能直接綁定，必須用on綁定才行，$('#d1').input(function{})是不對的；只能這樣綁定$('#d1').on('input',function(){})才行

<script src="jQuery.js"></script>
百度一下 <input type="text" id="search">

<script>
    $('#search').on('input',function () {
        console.log($(this).val());
    })
</script>

事件冒泡

<body>
<script src="jQuery.js"></script>

<div id="d1">
    <div id="d2"></div>
</div>

<script>
    //冒泡
    $('#d1').click(function () {
        alert('父級標簽')
    })
    $('#d2').click(function () {
        alert('子級標簽')
    })
</script>
</body>

阻止後續（冒泡）事件發生

//冒泡的意思就是因為html可以嵌套，如果你給兒子標簽綁定了點事件或者沒有綁定點擊事件，父級標簽綁定了點擊事件，那麼你一點擊子標簽，不管子標簽 有沒有綁定事件，都會觸發父級標簽的點擊事件，如果有，會先觸發子標簽的點擊事件，然後觸發父級標簽的點擊事件，不管子標簽有沒有點擊事件，都會一級一級的還往上找點擊事件

$('#d1').click(function () {
        alert('父級標簽')
    })
    $('#d2').click(function (e) {   //這個參數e(只是個形參，寫evt或者event名字的也很多)表示當前事件本身，這個事件也是一個對象
        alert('子級標簽')
        // return false;    //這個也可以阻止
        e.stopPropagation();//用事件對象的這個方法就能阻止冒泡 （Propagation：傳遞的意思）
    })

事件委托

事件委托:是通過事件冒泡的原理，利用父標簽去捕獲子標簽的事件，將未來添加進來的某些子標簽自動綁定上事件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
</head>
<body>
<script src="jQuery.js"></script>
<div id="d1">
    <button class="c1">愛的磨礪轉圈圈</button>

</div>

<script>
    // $('.c1').on('click',function () {
    //     alert('你變了');
    //     var btn=document.createElement('button');
    //     $(btn).text('愛的磨礪轉圈圈');
    //     $(btn).addClass('c1');
    //     console.log(btn);
    //     $('#d1').append(btn);
    // })

    //事件委托  將'.c1'委托給'#d1'
    $('#d1').on('click','.c1',function () {
        alert('你變了');
        var btn=document.createElement('button');
        $(btn).text('愛的磨礪轉圈圈');
        $(btn).addClass('c1');
        console.log(btn);
        $('#d1').append(btn)
    })
</script>
</body>
</html>

頁面載入

    //將js代碼寫到head標簽和寫道body標簽下麵的作用是不同的嗎，寫在head標簽裡面的話，如果你寫了操作某個標簽的內容的話，那個標簽還沒載入出來，先載入了你的js代碼，就找不到這個標簽，所以不會生效，所以寫在body標簽最下麵是一種解決辦法，還有一種辦法就是window.onload=function(){js的代碼}，等頁面上所有的元素都載入完，在執行這裡面的js代碼，還記得嗎？，但是這個window.onload有個缺點，這個缺點就是這個操作時給window.onload賦值，如果你自己寫了兩個js文件，每個js文件中都有一個window.onload的話，那麼後引入的文件會把前面引入的文件的window.onload裡面的js代碼全部覆蓋掉，那麼第一個文件的js代碼就失去了效果，還有一個問題就是，window.onload會等到頁面上的文檔、圖片、視頻等所有資源都載入完才執行裡面的js代碼，導致有些效果的載入比較慢，所以我們使用下麵的寫法，不存在覆蓋問題，而且只要文檔載入完就觸發，不需要等著一些圖片啊視頻啊什麼的，載入js效果的速度快。
1.jQuery文件要在使用jQuery的代碼之前引入
2.js代碼最好都放在body標簽下麵或者裡面的最下麵

3.window.onload:
    window.onload = function () {
            $('.c1').click(function () {
                $(this).css({'background-color': 'green'});
            })
        }

4.頁面載入:
$(function () {
            $('.c1').click(function () {
                $(this).css({'background-color': 'green'});
            })
        })
$(document).ready(function{});


與window.onload的區別:
　　　1.window.onload()函數有覆蓋現象，必須等待著圖片資源載入完成之後才能調用
　　　2.jQuery的這個入口函數沒有函數覆蓋現象，文檔載入完成之後就可以調用（建議使用此函數）
   


示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        // 等待整個頁面中的內容全部載入完成之後,觸發window.onload對應的函數裡面的內容
        // window.onload 有覆蓋現象,會被後面的window.onload給重新賦值
        // window.onload = function () {
        //     $('.c1').click(function () {
        //         $(this).css({'background-color':'green'});
        //     })
        // }

        
        $(function () {
            $('.c1').click(function () {
                $(this).css({'background-color':'green'});
            })
        });
    </script>
    <script src="頁面載入.js"></script>
    <style>
        .c1{
            background-color: red;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
</body>
</html>

each迴圈

迴圈標簽對象數組
$('li').each(function(k,v){
    console.log(k,v);
});

迴圈普通數組
var d1 = ['aa','bb','cc'];
$.each(d1,function(k,v){
    console.log(k,v);
})

跳出迴圈  return false; 類似於break
$('li').each(function(k,v){
    console.log(k,v.innerText);
    if (k === 1){
        return false;
    }

});

跳出本次迴圈  return; 類似於continue
$('li').each(function(k,v){
    
    if (k === 1){
        return;
    }
    console.log(k,v.innerText);
});

data

給標簽對象添加數據,類似於添加了全局變數
    .data(key, value): 設置值
    .data(key)   取值
    .removeData(key) 刪除值

插件(瞭解)

<script>
jQuery.extend({ //$.extend({})
  min:function(a, b){return a < b ? a : b;}, //自定義了一個min和max方法，min和max作為鍵，值是一個function
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
$('div').min(1,2);不能通過標簽對象來調用
</script>

<script>
  jQuery.fn.extend({  //給任意的jQuery標簽對象添加一個方法
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery對象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 中文版 Apple 官方 Swift 教程《The Swift Programming Language》
    簡介 歡迎使用 Swift 關於 Swift 版本相容性 Swift 初見 Swift 版本歷史記錄 Swift 教程 基礎部分 基本運算符 字元串和字元 集合類型 控制流 函數 閉包 枚舉 類和結構體 屬性 方法 下標 繼承 構造過程 析構過程 可選鏈 錯誤處理 類型轉換 嵌套類型 擴展 協議 泛 ...
  • 常用的URL Scheme
    系統 簡訊| | app store| 電話| 備忘錄| 設置| E Mail| 支付寶 支付寶| | 螞蟻莊園| 螞蟻森林| 螞蟻寶卡| 款碼| 掃碼| 紅包| 股票| 生活繳費| 手機充值| 彩票| 淘票票| 查快遞| AA收款| 收款| 轉賬| 還信用卡| 釘釘| 淘寶網| 淘寶旅行| 淘寶寶 ...
  • flutter 如何實現文件讀寫(使用篇)
    flutter文件讀寫可以對磁碟文件進行操作，實現某些業務場景，那麼我們開始來講下這個文件讀寫操作。 使用的庫插件(package) dart:io（用於數據處理） path_provider （用於獲取路勁） 操作步驟 1.獲取正確的本地路徑 2.創建指向文件位置的引用 3.寫入數據到文件內 4. ...
  • vue初級使用
    一、Vue是什麼? Vue（讀音 /vjuː/, 類似於 view）是一個構建數據驅動的 web 界面的漸進式框架。採用自底向上增量開發的設計。Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。 Vue漸進式的理解:http://www.bslxx.com/a/vu ...
  • JavaScript的運行機制
    一、為什麼JavaScript是單線程？ JavaScript的特點就是單線程，也就是說同一時間只能做一件事情，前面的任務沒做完，後面的任務只能處於等待狀態，（這就跟生活中的例子：排隊買票一樣，一個一個排隊按順序來）。這就產生了一個問題：為什麼JavaScript不能是多線程的呢？多線程可以提高多核 ...
  • CSS是什麼
    css是層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的電腦語言。 CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。 CSS為HTML標記語言 ...
  • Vue-使用計時器實現跑馬燈效果
    效果 ...
  • Web基礎--HTML、Css
    一、Web項目（可跳過，直接從下一個標題開始） 1、Web項目： 指的是帶網頁的項目，通過瀏覽器可以訪問的項目。比如：淘寶、天貓等。 2、Web項目構成： 瀏覽器（客戶端）、伺服器、資料庫。 3、Java Web項目訪問流程： 客戶端通過Servlet/JSP與伺服器進行聯繫，伺服器通過JDBC與數 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類