首頁 >web前端 >js教程 >jQuery入門須知總結

jQuery入門須知總結

php中世界最好的语言原創: 2018-04-23 15:13:59919瀏覽

這次帶給大家jQuery入門須知總結，jQuery入門須知的注意事項有哪些，下面就是實戰案例，一起來看一下。

jQuery 物件

•jQuery 物件就是透過 jQuery 包裝 DOM 物件後產生的物件。

•jQuery 物件是 jQuery 獨有的。

•只有 jQuery 物件才能使用 jQuery 的方法，在 jQuery 物件中無法使用 DOM 物件的任何方法，反之 DOM 物件也無法使用任何 jQuery 的方法。

•約定：如果取得的是jQuery 對象，那麼要在變數前面加上$

•jQuery 物件中封裝了多個DOM 對象，同時jQuery 物件是類別陣列物件

•陣列與類別陣列物件的差異

#1.陣列的型別是Array

##1.陣列的型別是Array

2.類別陣列物件的型別是Object

DOM 物件轉jQuery 物件

•使用$（）將DOM物件包裝起來，就可以轉換成jQuery 物件

var item = document.getElementsByTagName('ul')[0], // DOM对象
  $item = $(item); // jQuery对象

jQuery 物件轉換為DOM 物件jQuery 物件透過jQuery 提供的get（index ）方法，得到對應的DOM 物件

var $ul = $('ul'),
  ul = $ul.get(0);

jQuery 物件是一個類別數組對象，可以透過[] 方式，得到對應的DOM 物件。

類別數組物件

類別數組物件本質就是一個對象，只不過儲存方式類似於數組的結構

•arguments 物件---- 接受函數實參的個數

•jQuery 物件---- 底層就是dom 物件

##屬性

##•length 屬性（陣列的長度| 元素的個數）

#方法

•get（index）：根據index 放回對應的dom 物件

•eq（index）：根據index 傳回對應的jQuery 物件•index（）：找出元素的索引值

ready 和onlaod 的區別

ready

1.具有簡寫方式
2.在一個HTML 頁面中允許出現多個
3.載入完DOM 結構就執行
4.執行速度快

onload#1.沒有簡寫方式

2.在一個HTML 頁面中只能使用一個

3.需要等頁面所有資源載入完才執行

4.執行速度比ready 慢

jQuery 動畫

##基本上隱藏、顯示效果

•show（）/ hide（）

$('p').show(1000).hide(1000);

若是對同一個jQuery 物件使用，可以採用鍊式操作。

滑動式動畫效果

•slideDown（）/ slideUp（）

$('p').slideUp(1000).slideDown(1000);

淡入淡出

•fadeIn（）淡入•fadeOut（）淡出

$('p').fadeIn(1000).fadeOut(1000);

並發與排隊效果

•並發效果：設定多個動畫同時執行

•排隊效果：設定多個動畫，依照先後依序執行

jQuery 外掛

jQuery 外掛程式的作用

•擴充jQuery 的功能
•呈現元件化特點

日期外掛程式- layDate外掛程式•layDate初步使用

1.引入laydate.js

2.laydate（options）開發外掛程式

###全域函數############全域函數，其實就是jQuery 本身的方法。 ######jQuery 內建的一些功能是透過全域函數來實現的。 ###

•比如$.ajax（）就是典型的全局函数

向 jQuery 命名空间添加一个函数，只需要将这个新函数指定为 jQuery 本身的一个属性

$.globalFunction = function(){
  // todo...
};

可以通过 jQuery.globalFunction（）或者 $.globalFunction（）来调用

当需要添加多个函数可以使用$.extend（）函数

$.extend({
  functionOne: function(){
    // todo...
  },
  functionTwo: function(){
    // todo...
  }
});

通过上述代码可以添加全局函数，但是代码存在有关命名空间的风险

我们可以把属于一个插件的所有全局函数封装到一个对象

$.plugins = function(){
  functionOne: function(){
    // todo...
  },
  functionTwo: function(){
    // todo...
  }
};

通过上述代码，其实是为全局函数创建了另一个方法 --- plugins

functionOne 和 functionTwo 已经成为 plugins 对象的属性。

$.plugins.functionOne();
$.plugins.functionTwo();

添加 jQuery 实例对象的方法

$.fn.method = function(){};对象方法的环境

在任何插件方法内部，关键字 this 引用的都是当前调用方法的 jQuery对象，因此可以在 this 上面调用任何内置的 jQuery 方法。

方法连缀

通过 return this 来实现链式操作

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

jQuery入門須知總結

相關文章