1. 程式人生 > >【前端】jQuery常用基礎知識點總結

【前端】jQuery常用基礎知識點總結

目錄

jQuery概念:

入口函式:

jQuery選擇器:

樣式操作:

屬性操作:

特殊動畫:

事件:

事件冒泡:

事件委託:

jQuery中的DOM操作:


jQuery概念:

JQuery: JavaScript Query;  這是js的一個函式庫。(完全由js封裝寫成的一個js檔案)

優點: 簡單易用,鏈式程式設計隱式迭代。

缺點: 方法冗餘。

鏈式程式設計:實際就是執行完某一個函式後,返回它本身,然後繼續呼叫

隱式迭代:在方法的內部會為匹配到的所有元素進行迴圈遍歷,執行相應的方法,而不用我們再進行迴圈,簡化我們的操作,方便我們呼叫

 

入口函式:

原生js:

window.onload = function(){

}

jQuery中:

1.

$(function(){

        alert('有了這個方法,就可以獲取下面的標籤了,寫法dollar符+括號+在括號中寫function')
})

2.

$(document).ready(function(){

})

3.

$(window).ready(function(){

})

JQuery物件就是通過$()獲取到頁面標籤。

$()獲取的物件,裡面有JQuery自己封裝好的方法,原生js沒有。

JQuery想要操作標籤,底層還是要呼叫原生js自己的方法。

 

jQuery選擇器:

1.普通獲取方法:

標籤:標籤直接寫$('標籤名')

id:id值前面加#,$('#id值')

類:類前加點,$('.類名')

層級:空格,$('#box1 li p')

2.比較特殊的選擇器

name:如果一個li標籤的name屬性=demo,$('li[name=demo]')

has:如果一個li標籤中有一個p標籤,$(li).has('p')

eq:通過索引獲取,$('li').eq(標籤對應的索引值,從0開始)

 

($('#li3').prev());//選擇id是li3的元素 前面 緊挨的同輩元素

($('#li3').prevAll());

($('#li3').next());//選擇id是li3的元素 後面 緊挨的同輩元素

($('#li3').nextAll());

($('#li3').siblings());//選擇id是li3的元素的同級元素(兄弟們,不包括自己)

($('#li3').parent());//選擇id是li3的元素的父元素

($('#li3').children());

($('#ul1').find('.li4'));//選擇id是ul1的元素內的class等於.li4的元素(後代標籤,子子孫孫)

($('#li3').index());// 元素在父盒子中,所有子元素排列對應的索引值

 

樣式操作:

①style-->css()

一個引數: 獲取屬性

$('div').css('width')

兩個引數:設定屬性

$('div').css('width', '350px')

通過一個字典形式的引數:進行設定

var set = {'width':666, 'height':600, 'background':'gold'}

$('div').css(set)

②通過操作class類名,來達到操作樣式的目的,如下:

<div class="box div bbb"></div>

$('div').addClass('aaa')  // 新增類(類及類的樣式,這裡的aaa可以在style中通過類名,設定屬性)

$('div').removeClass('box')  // 刪除類

$('div').toggleClass('lili')    // 事件觸發,無變有有變無(迴圈變化)

可以聯絡選項卡案例,點選誰就給誰新增xx類,siblings其它去掉xx類。

 

屬性操作:

1.普通屬性:attr();    id/title/src/href/name...

將input的name屬性設定為‘setset’

$('input').attr('name', 'setset')

2.表單屬性:prop();    selcted/checked/disabled

$('option').eq(1).prop('selected', true)    //將索引為1的option設定為選中,false為不選中

3.特殊屬性innerHTML/className/style/value...

原生js jQuery語法
innerHTML html()
className addClass()
removeClass()
toggleClass()
style css()
value val() 

animate引數:

    引數一:要改變的樣式屬性值,寫成字典的形式

    引數二:動畫持續的時間,單位為毫秒,一般不寫單位

    引數三:動畫曲線,預設為‘swing’,緩衝運動,還可以設定為‘linear’,勻速運動

    引數四:動畫回撥函式,動畫完成後執行的匿名函式

$('.class1').animate(obj, 2000, 'swing', function(){

                // 回掉函式才是真正的執行完畢自定義函式後,在執行的邏輯。

                alert('程式執行完畢才執行的我')

            })

 

特殊動畫:

1.show()/hide()/toggle()顯示隱藏,引數為(毫秒值,回撥函式)

$('div').hide(1000,)

$('div').show(1000,function(){

    alert('show ok')

})

切換

$('div').toggle(1000,)

 

2.滑入滑出

$('div').slideUp(1000)

$('div').slideDown(1000)

$('div').slideToggle(1000)

 

3.淡入淡出

$('div').fadeOut(1000)

$('div').fadeIn(1000)

$('div').fadeToggle(1000)

 

半透明程度:必須傳遞時間

// $('div').fadeTo(2000,0.3)

 

事件:

click() 滑鼠單擊

mouseover() 滑鼠進入(進入子元素也觸發)

mouseout() 滑鼠離開(離開子元素也觸發)

mouseenter() 滑鼠進入(進入子元素不觸發)

mouseleave() 滑鼠離開(離開子元素不觸發)

hover() 同時為mouseenter和mouseleave事件指定處理函式

ready() DOM載入完成

submit() 使用者遞交表單

*取消瀏覽器預設行為:

return false;

event.preventDefault()

 

表單校驗中的控制器思想:設定幾個全域性變數,預設是false,如果通過正則改為true,在校驗時設定一個變數:為幾個控制器的與條件,判斷是否提交

var bool1 = false;

var bool2 = false;

var bool3 = false;

var bool4 = false;

var bool5 = false;

var flag = bool1 && bool2 && bool5;

        if (flag == false){

            // 沒有通過,取消提交

            // return false;

            event.preventDefault();

        }

事件冒泡:

事件是可以傳播的,子元素的事件被觸發,父系元素的同類事件也會被觸發。

阻止冒泡:return false;或event.stopPropagation();

 

事件委託:

事件委託是利用事件冒泡,只指定一個事件處理程式來管理某一型別的所有事件。

如:讓ul中新創建出來的li全都具有click屬性

方法一:delegate

$('ul').delegate('li', 'click', function(){

    alert(555)

})

方法二:on

$('ul').on('click', 'li',function(){

    alert(666)

})

 

jQuery中的DOM操作:

1.建立

方法一:

var $newLi = $('<li>')

    $newLi.html('i am new li')

    console.log($newLi)

方法二:

// 使用多屬性和標籤巢狀

var $newLi = $('<li class="aaa bbb" name="ccc" title="ddd">i am new li...</li>')

2.新增

$('ul').append($newLi)或:

$newLi.appendTo($("ul"))

子元素新增:向父標籤最前面新增元素,prepend() / prependTo(

$('ul').prepend($newLi)

兄弟元素新增:before()/insertBefore():互換位置,新增到之前

$('#box').before($newLi)

兄弟元素新增,after() /insertAfter():新增到兄弟元素之後

$('#box').after($newLi)

刪除:remove()

$('#box').remove()

拓展:clone(),舉例:

<body>

<p>This is a paragraph.</p>

</body>

// 複製每個 p 元素,然後追加到 body 元素

$("body").append($("p").clone());

 

replaceWith()

用指定的 HTML 內容或元素替換被選元素。