jQuery學(xué)習(xí)筆記

GHOST_349178 發(fā)布于2019-08-20 17:47 / 795人閱讀

摘要：提高業(yè)務(wù)編程能力中提供了很多的方法基本都兼容，我們可以使用這些方法快速開發(fā)項(xiàng)目中有的方法提供的思想可以讓我們把項(xiàng)目實(shí)現(xiàn)得更優(yōu)化提高基礎(chǔ)以及一些高級編程思想分析源碼，學(xué)習(xí)里面類庫封裝的思想和一些方法實(shí)現(xiàn)的原理有時間把中提供的常用方法都去實(shí)現(xiàn)一

jQuery

提高業(yè)務(wù)編程能力

JQ中提供了很多的方法（基本都兼容），我們可以使用這些方法快速開發(fā)項(xiàng)目

JQ中有的方法提供的思想可以讓我們把項(xiàng)目實(shí)現(xiàn)得更優(yōu)化

提高JS基礎(chǔ)以及一些高級編程思想

分析JQ源碼，學(xué)習(xí)里面類庫封裝的思想和一些方法實(shí)現(xiàn)的原理

有時間把JQ中提供的常用方法都去實(shí)現(xiàn)一遍，提高自己的編程能力

1.jQuery的原理

jquery-1.xxx: 專門為PC端誕生的類庫，兼容所有的瀏覽器

jquery-2.xxx: 當(dāng)初是為了移動端而準(zhǔn)備的，所以IE低版本瀏覽器一般不兼容，但是這個版本針對移動端的事件等操作也不是特別完善，被Zepto這個類庫取代了

jQuery充分利用了JS中函數(shù)的三種特性：普通函數(shù)、類、普通對象；jQuery就是這個類，在外面使用的$和jQuery是一個東西，jQuery中提供的方法分為兩部分：寫在原型上的方法和寫在jQuery私有屬性上的方法；創(chuàng)建jQuery實(shí)例的時候，會返回一個類數(shù)組（它也是jQuery實(shí)例），這個類數(shù)組是jQuery自己去創(chuàng)建的，里面有一些自己特定的屬性

//jQuery核心原理
(function(){
    var version="1.11.3",
    jQuery=function(selector,context){
        return jQuery.fn.innt(selector,context);
    };
    
    jQuery.fn=jQuery.prototype={
        //...
        init:function(selector,context){
            
        }
    };
    
    jQuery.ajax=function(){};
    
    window.jQuery=window.$=jQuery;
    
})();

jQuery對象和JS對象相互轉(zhuǎn)換

//jQuery對象轉(zhuǎn)換成JS對象
var $obj=$("*");
$obj[0];  //-->JS對象
$obj.get(0);  //-->JS對象
$obj.eq(0)  //-->這個獲取的是jQuery對象

//JS對象轉(zhuǎn)換成jQuery對象
var obj=document.getElementsByTagName("*");
$(obj);  //-->jQuery對象

extend

在jQuery對象上和jQuery實(shí)例上都有這個方法，并且都是同一個方法，但是這兩個方法執(zhí)行時其this指向不一樣，也就是說extend所擴(kuò)展的方法所在的擴(kuò)展位置不一樣

$.extend({
    aa:function(){}
});
$.aa();
//->aa擴(kuò)展到j(luò)Query的屬性上了：完善類庫，提供一些常用的操作方法，例如，數(shù)組去重...

$.fn.extend({
    bb:function(){}
});
$([select]).bb();
//-->bb擴(kuò)展到j(luò)Query的原型上了：擴(kuò)展插件，例如，選項(xiàng)卡、輪播圖、登錄、驗(yàn)證...

2.jQuery的常用方法

1）選擇器

CSS選擇器有哪些，jQuery選擇器基本上就有哪些：#ID、.class、tagName、*、selector,selector、parent offspring、parent>child、:first、:last、:not、:contain、:eq、:gt、:lt、:text...

2）核心方法

$([selector|node|function],[context])

$([html])

each(callback)

get()

index()

length

context

selector

noConflict()

extend()

3）屬性方法

attr()：設(shè)置或獲取自定義屬性值，獲取的值是字符串類型的

removeAttr()

prop()：操作的是元素的內(nèi)置屬性

addClass()

removeClass()

hasClass()

toggleClass()

html()：獲取或設(shè)置元素的innerHTML

text()：獲取或設(shè)置元素的innerText

val()：獲取或設(shè)置元素的value值

4）CSS方法

css()

offset()：當(dāng)前元素距離body的偏移：{top:xxx,left:xxx}

position()：當(dāng)前元素距離父級已定位參照物的偏移

scrollTop() / scrollLeft()：獲取或者設(shè)置滾動值

height() / width()：設(shè)置或獲取元素的寬高

innerWidth() / innerHeight()：獲取元素的clientHeight/clientWidth

outerWidth() / outerHeight()：獲取元素的offsetHeight/offsetWidth

5）DOM操作方法

append()

appendTo()

prepend()

prependTo()

insertBefore() / insertAfter()

clone()

remove()

6）篩選方法

eq()

filter()：同級篩選

children()：子級篩選

find()：后代篩選

first() / last()

not()

slice()

next() / prev()

nextAll() / prevAll()

sibings()

add()

contents()

7）動畫方法

animate()

stop()

finish()

show() / hide() / toggle()

fadeIn() / fadeOut() / fadeToggle()

sliceDown() / sliceUp() / scliceToggle()

delay()

8）事件方法

on() / off()：解決jQuery事件的一切需求，其它方法也是從這個方法里擴(kuò)展的

bind() / unbind() / trigger()

one()

live() / delegate()

click()/hover()/mouseover()...

9）工具方法

callbacks()

makeArray()

toArray()

parseJSON()

parseXML()

type()

isFunction()

trim()

param()

//只要當(dāng)前頁面的HTML結(jié)構(gòu)加載完成，就會執(zhí)行回調(diào)函數(shù)，而且在一個頁面中可以執(zhí)行多次
$(document).ready(function(){
    //

});

$(function(){});  //這種方式和上面的方式一樣，沒有區(qū)別

云服務(wù)器 GPU云服務(wù)器 jquery學(xué)習(xí)筆記學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83863.html

發(fā)表評論

登陸后可評論

0條評論

GHOST_349178

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow重裝

閱讀 1807·2023-04-26 00:47
學(xué)了那么久Python還什么都做不了，我覺得你該試試這個方法了

閱讀 1558·2021-11-11 16:55
寶塔Linux面板免費(fèi)Nginx防火墻安裝使用詳細(xì)圖文教程

閱讀 2633·2021-09-27 14:04
網(wǎng)站建設(shè)服務(wù)商需要什么主機(jī)-網(wǎng)站建設(shè)，服務(wù)器如何選擇？

閱讀 3562·2021-09-22 15:58
騰訊云五月云產(chǎn)品限時秒殺,每天四場,穩(wěn)定靠譜的100%CPU性能云服務(wù)器首年99元起,適合建站及企業(yè)

閱讀 3564·2021-07-26 23:38
[vue組件]無縫輪播圖

閱讀 2143·2019-08-30 13:47
table寬度

閱讀 1994·2019-08-30 13:15
Div層懸浮實(shí)現(xiàn)HTML5 Canvas背景動畫

閱讀 1159·2019-08-29 17:09

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

jQuery學(xué)習(xí)筆記

1.jQuery的原理

2.jQuery的常用方法

相關(guān)文章

**JavaScript框架學(xué)習(xí)筆記（一）**