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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類