jQuery學習筆記

GHOST_349178 發布于2019-08-20 17:47 / 794人閱讀

摘要：提高業務編程能力中提供了很多的方法基本都兼容，我們可以使用這些方法快速開發項目中有的方法提供的思想可以讓我們把項目實現得更優化提高基礎以及一些高級編程思想分析源碼，學習里面類庫封裝的思想和一些方法實現的原理有時間把中提供的常用方法都去實現一

jQuery

提高業務編程能力

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

JQ中有的方法提供的思想可以讓我們把項目實現得更優化

提高JS基礎以及一些高級編程思想

分析JQ源碼，學習里面類庫封裝的思想和一些方法實現的原理

有時間把JQ中提供的常用方法都去實現一遍，提高自己的編程能力

1.jQuery的原理

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

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

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

//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對象相互轉換

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

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

extend

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

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

$.fn.extend({
    bb:function(){}
});
$([select]).bb();
//-->bb擴展到jQuery的原型上了：擴展插件，例如，選項卡、輪播圖、登錄、驗證...

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()：設置或獲取自定義屬性值，獲取的值是字符串類型的

removeAttr()

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

addClass()

removeClass()

hasClass()

toggleClass()

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

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

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

4）CSS方法

css()

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

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

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

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

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事件的一切需求，其它方法也是從這個方法里擴展的

bind() / unbind() / trigger()

one()

live() / delegate()

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

9）工具方法

callbacks()

makeArray()

toArray()

parseJSON()

parseXML()

type()

isFunction()

trim()

param()

//只要當前頁面的HTML結構加載完成，就會執行回調函數，而且在一個頁面中可以執行多次
$(document).ready(function(){
    //

});

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

GPU云服務器云服務器 jquery學習筆記學習筆記學習筆記一基礎學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83863.html

JavaScript框架學習筆記（一）

摘要：基本的學習思路是跟著框架設計這本書，甚至可以說是這本書的讀書筆記。也參考很多網上解讀的博客和學習資料。當然，最重要的資料還是框架的源代碼。后來由于開發者反對，新興的框架都在命名空間上構建。 JavaScript框架學習筆記（一）我為什么要學習框架更深入的理解工具，以后用起來更順手而且也能做一定的工具取舍，學習理解新工具也就更快，對提升js水平也很有幫助，框架有很多解決坑的經典思...

Shonim 2019-08-19 18:10 評論0 收藏0
jquery學習筆記一

摘要：學習筆記一學習慕課網基礎課程筆記。本篇博客只作為學習記錄用。后代選擇器選擇給定的祖先元素的所有后代原色，一個元素的后代可能是該元素的一個孩子，孫子，曾孫等。相鄰兄弟選擇器選擇所有緊接在元素后的元素一般兄弟選擇器匹配元素之后的所有兄弟元素。 jquery 學習筆記一學習慕課網jquery基礎課程筆記。本篇博客只作為學習記錄用。 jquery 對象與 DOM 對象一定要區分 jquer...

Anshiii 2019-08-23 16:48 評論0 收藏0
jQuery入門學習筆記1

摘要：首先明確是一個庫，它的類型是函數，這一點可以通過查看。判斷傳入的參數是還是返回具體的方法函數可將所有的添加一個可將所有的變為全局聲明，它是一個函數，返回一個對象，對象內有不同的方法，本文例子有個方法增加類名，修改節點內容。首先明確jQuery是一個JavaScript庫，它的類型是函數，這一點可以通過typeOf查看。需要注意的是，script引入方式是本地文件引入，如果是CDN引入...

lakeside 2019-08-02 15:22 評論0 收藏0
jQuery入門學習筆記1

摘要：首先明確是一個庫，它的類型是函數，這一點可以通過查看。判斷傳入的參數是還是返回具體的方法函數可將所有的添加一個可將所有的變為全局聲明，它是一個函數，返回一個對象，對象內有不同的方法，本文例子有個方法增加類名，修改節點內容。首先明確jQuery是一個JavaScript庫，它的類型是函數，這一點可以通過typeOf查看。需要注意的是，script引入方式是本地文件引入，如果是CDN引入...

davidac 2019-08-23 18:15 評論0 收藏0
JavaScript MVC 學習筆記（五）事件操作的拓展

摘要：事件類型布爾值，表示事件是否通過以冒泡形式觸發。表示鍵盤事件的屬性布爾值，表示當前按下的鍵是否表示一個字符。表示當前按鍵的值僅對事件有效。，事件發生時相對于屏幕的坐標。事件對象 event 對象還包含很多有用的屬性。W3C 范中包含的大部分屬性都列在下面，更多信息參照完整的標準規范。事件類型： bubbles ：布爾值，表示事件是否通過DOM 以冒泡形式觸發。事件發生時...

Anshiii 2019-08-22 10:56 評論0 收藏0