JQuery知識(shí)總結(jié) -- 這些必須知道！

1.1 初認(rèn)識(shí)

作用相當(dāng)于onload事件,等dom結(jié)構(gòu)渲染完畢即可執(zhí)行

但又有所不同

onload 事件是等頁(yè)面文檔、外部的 js 文件、css文件、圖片加載完畢才執(zhí)行內(nèi)部代碼。

// 第一種 $(function () { ... // 內(nèi)容 }) ; // 第二種 $(document).ready(function(){ ... // 內(nèi)容 });

可以用jQuery來(lái)代替，相當(dāng)于原生js中的window

用原生 JS 獲取來(lái)的對(duì)象是 DOM 對(duì)象

jQuery 方法獲取的元素是 jQuery 對(duì)象。

jQuery 對(duì)象是經(jīng)過(guò)包裝的dom對(duì)象（偽數(shù)組形式存儲(chǔ)）

jQuery對(duì)象才能使用jQuery方法,不能混用

// DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象 var box = document.getElementById('box'); // 獲取DOM對(duì)象 var jQueryObject = $(box); // 把DOM對(duì)象轉(zhuǎn)換為 jQuery 對(duì)象 // jQuery 對(duì)象轉(zhuǎn)換為 DOM 對(duì)象兩種方法： // jQuery對(duì)象[索引值] var domObject1 = $('div')[0] // jQuery對(duì)象.get(索引值) var domObject2 = $('div').get(0)

2.1 jQuery選擇器

2.2 基礎(chǔ)知識(shí)

$(this).css(“color”,”red”);//自己變色 $(this).siblings(). css(“color”,””);//兄弟除色

在jQuery內(nèi)部會(huì)遍歷dom對(duì)象的過(guò)程叫做隱式迭代

$('div').hide(); //頁(yè)面中所有的div都會(huì)被隱藏

$(this).css('color', 'red').sibling().css('color', '');

3.1 樣式操作

var strColor = $(this).css('color'); $(this).css(''color'', ''red''); //參數(shù)可以是對(duì)象形式，方便設(shè)置多組樣式。屬性名和屬性值用冒號(hào)隔開(kāi)， 屬性可以不用加引號(hào) $(this).css({ "color":"white","font-size":"20px"});

一般來(lái)說(shuō)通過(guò)在style中編寫(xiě)樣式，通過(guò)添加類的方式添加樣式

// 1.添加類 $("div").addClass("current"); // 2.刪除類 $("div").removeClass("current"); // 3.切換類 $("div").toggleClass("current");

在原生js中className會(huì)覆蓋類名，在jQuery中指操作指定類名，不影響原先的類名

3.2 jQuery效果

注意：

動(dòng)畫(huà)或者效果一旦觸發(fā)就會(huì)執(zhí)行，如果多次觸發(fā)，就造成多個(gè)動(dòng)畫(huà)或者效果排隊(duì)執(zhí)行。

停止動(dòng)畫(huà)排隊(duì)：stop() ;

這樣就可以在動(dòng)畫(huà)執(zhí)行的時(shí)候停止動(dòng)畫(huà)

顯示隱藏：show() / hide() / toggle() ;

關(guān)于參數(shù)

參數(shù)都可以省略，無(wú)動(dòng)畫(huà)直接顯示

第一個(gè)參數(shù)speed : 三種預(yù)定速度（show，normal，fast）或者是動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)

第二個(gè)參數(shù) easing：指定切換效果，默認(rèn)是’swing’ 還可設(shè)為’linear’

第三個(gè)參數(shù) fn :回調(diào)函數(shù)，在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)

滑入滑出：slideDown() / slideUp() / slideToggle() ;

淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

tips: fadeTo()必須要寫(xiě)速度和透明度，透明度表示淡入后的最大透明度

自定義動(dòng)畫(huà)：animate() ;

第一個(gè)參數(shù)傳入更改的樣式屬性,以對(duì)象形式傳遞，注意復(fù)合屬性用駝峰命名,后面3個(gè)參數(shù)可以省略

注意設(shè)置top,left的時(shí)候要給div加定位，否則無(wú)效

jQuery中有hover()事件，功能類似于css中的hover

hover(function,function)

傳入2個(gè)參數(shù)，第一個(gè)參數(shù)是鼠標(biāo)移入是觸發(fā)的函數(shù)，第二個(gè)是鼠標(biāo)移出時(shí)觸發(fā)的函數(shù)

只寫(xiě)一個(gè)參數(shù)時(shí)，鼠標(biāo)移入移出都會(huì)觸發(fā)它

4.1 jQuery屬性操作

獲取元素本身自帶的屬性,有利于對(duì)表單操作

表單屬性：disabled checked這類屬性操作很順暢

//獲取 prop('屬性名'); //更改 prop('屬性名','屬性值');

//獲取 attr('屬性名'); //更改 attr('屬性名','屬性值');

可以在指定的元素上存取數(shù)據(jù)，但不會(huì)修改DOM元素結(jié)構(gòu)。頁(yè)面刷新緩存清除

data('myName','ljc');//向元素添加數(shù)據(jù) data('myName');//向元素讀取數(shù)據(jù)

通過(guò):checked選擇器，可以以數(shù)組形式返回被選中的元素

$(function() { $('.all').change(function() { $('.child').prop('checked',$('.all').prop('checked'));//全選按鈕 }) $('.child').change(function() { if($('.child:checked').length == $('.child').length) { $('.all').prop('checked',true);// 如果小按鈕全部被選中，全選勾上 }else { $('.all').prop('checked',false); } }) })

4.2 文本屬性

普通元素內(nèi)容

這樣獲取到的會(huì)帶有標(biāo)簽

可以通過(guò)傳入?yún)?shù)來(lái)更改內(nèi)容

普通元素文本內(nèi)容

只會(huì)獲取文本的內(nèi)容，不會(huì)獲取標(biāo)簽

表單的值 val()

console.log($("input").val());//獲取表單的內(nèi)容 $("input").val("123");//改表單的內(nèi)容

保留2位小數(shù) toFixed(2)

4.3 元素操作

隱式迭代是對(duì)同一類元素做同一件事情，但是要做不同事情的話還是需要使用遍歷

$('div').each(function(index, domEle) {});

是dom對(duì)象不是jQuery對(duì)象，需要轉(zhuǎn)換成jquery對(duì)象才能使用方法

$.each(obj,function(index,domele){})

可以用來(lái)遍歷任何對(duì)象，主要用來(lái)做數(shù)據(jù)處理，

var sum = 0; var arr = ['red','blue','yellow']; $('div').each(function(index, domEle) { //index是索引號(hào) domEle是dom元素對(duì)象 $(domEle).css('color', arr[index]); //轉(zhuǎn)化為整數(shù)，否則輸出0123，以字符串來(lái)拼接 sum += parseInt($(domEle).text()); }) console.log(sum);//6 $.each({ name: 'ljc', age: 20 },function(i,ele) { console.log(i); // name age console.log(ele); // 'ljc' 20 })

創(chuàng)建元素

var li = $('

**添加元素(**在后面添加)

$('ul').append(li);

添加元素(在前面添加)

$('ul').prepend(li);

外部添加(在前面添加)

$('div').before(div);

外部添加(在后面添加)

$('div').after(div);

刪除元素

$('ul').remove();//整個(gè)ul刪除

刪除元素集合中的子節(jié)點(diǎn)

$('ul').empty();//相當(dāng)于清空ul里的內(nèi)容

通過(guò)html來(lái)清空

$('ul').html();

4.4 尺寸，位置操作

返回值是數(shù)字型的

如果參數(shù)是數(shù)字，則修改樣式

參數(shù)不寫(xiě)單位

offset()設(shè)置獲取元素偏移

獲取的位置是相對(duì)于文檔的偏移坐標(biāo)，與父級(jí)沒(méi)有關(guān)系

傳入的參數(shù)是一個(gè)對(duì)象

//獲取偏移量 $('div').offset() //更改位置 $('div').offset({ top: 200, left: 100 })

position()獲取帶有定位的偏移

獲取的位置是相對(duì)于帶有定位的父級(jí)元素

這個(gè)方法只能獲取，不能修改

$('div').position()

scrollTop() scrollLeft 設(shè)置元素被卷去的頭部和左側(cè)

不跟參數(shù)是獲取，跟參數(shù)是設(shè)置

5.1 jQuery 事件

on()綁定事件的好處

可以綁定多個(gè)事件，多個(gè)處理事件函數(shù)

$('div').on({ mouseover : function() {}, click : function() {} }) $('div').on('mouseenter mouseleave',function() { $(this).toggleClass('currrnt'); })//如果執(zhí)行的程序相同可以采用這種方法

事件委托

$('ul').on('click','li',function() { alert('hello world'); })

對(duì)于新創(chuàng)建的元素，click無(wú)法綁定，但是on可以

$('div').on('click','p',function() { alert('別點(diǎn)我'); }) $('div').append($('

新來(lái)的

解除全部事件

$('div').off()

解除特定事件

$('div').off('click')

解除事件委托

$('div').off('click','li')

只觸發(fā)一次的事件

$('div').one('click',function(){})

// 會(huì)觸發(fā)元素的默認(rèn)行為 $("div").click(); // 會(huì)觸發(fā)元素的默認(rèn)行為 $("div").trigger("click"); //不會(huì)觸發(fā)默認(rèn)行為，比如自動(dòng)獲取焦點(diǎn) $("input").triggerHandler("focus");//不會(huì)獲取焦點(diǎn)

6.1 jQuery 事件對(duì)象

和原生js的事件對(duì)象基本相同

阻止默認(rèn)行為 ： event.preventDefault(),return false

阻止冒泡 : event.stopPropagation()

$.extend([deep], target, obj1)

[deep]，深拷貝為true，默認(rèn)為false 淺拷貝

target要拷貝的對(duì)象

obj被拷貝的對(duì)象

$(function() { var targetObj = { sex : 'male' }; var obj = { id: 1, name: 'andy' }; $.extend(targetObj,obj);// v把obj 拷貝給 targetObj console.log(targetObj);// {sex: "male", id: 1, name: "andy"} console.log(obj); // {id: 1, name: "andy"} })

如果傳入多個(gè)對(duì)象，則在后面的對(duì)象會(huì)覆蓋前面的對(duì)象

用來(lái)解決命名沖突的問(wèn)題

jQuery解決方法

把$換成jQuery。jQuery('div')

自定義名字。 var xx = $.noConflict();

7.1 jQuery 插件

引入css.

引入JS

引入html。

jQuery jQuery UI

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。