jQuery編程中的一些核心方法簡(jiǎn)介
調(diào)用 jQuery 對(duì)象的方法很簡(jiǎn)單:
$('h1').remove();
大多數(shù) jQuery 方法都是像上面這樣被調(diào)用的,這些方法都位于 $.fn 命名空間內(nèi),這些方法稱為 jQuery 對(duì)象方法。
但是也有一些方法不需要依賴于選擇器的結(jié)果集,這些方法位于 jQuery 命名空間內(nèi),這些方法稱為 jQuery 核心方法。如果覺得不好理解,記住下面兩條即可:
- 所有 jQuery 選擇器的方法都位于 $.fn 命名空間內(nèi)。
- $ 內(nèi)的方法一般都是一些實(shí)用的功能性方法,這些方法不依賴選擇器,這些方法的參數(shù)和返回值也都大不相同。
有些對(duì)象方法跟核心方法的名稱還會(huì)相同,例如 $.fn.each 和 $.each,使用的時(shí)候需要格外注意。
jQuery 的 $ 命名空間中提供了很多實(shí)用方法:
去除字符串兩遍的空白:
$.trim(' lots of extra whitespace '); // 返回 'lots of extra whitespace'
對(duì)數(shù)組和對(duì)象進(jìn)行迭代:
$.each([ 'foo', 'bar', 'baz' ], function(idx, val) { console.log('element ' + idx + 'is ' + val); }); $.each({ foo : 'bar', baz : 'bim' }, function(k, v) { console.log(k + ' : ' + v); });
返回?cái)?shù)組中某元素的索引,如果元素不存在則返回 -1
var myArray = [ 1, 2, 3, 5 ]; if ($.inArray(4, myArray) !== -1) { console.log('找到了'); }
用一個(gè)對(duì)象去擴(kuò)展另外一個(gè)對(duì)象:
var firstObject = { foo : 'bar', a : 'b' }; var secondObject = { foo : 'baz' }; var newObject = $.extend(firstObject, secondObject); console.log(firstObject.foo); // 'baz' console.log(newObject.foo); // 'baz'
如果不想改變第一個(gè)對(duì)象中的值,在 $.extend 的第一個(gè)參數(shù)中傳入一個(gè)空對(duì)象即可:
var firstObject = { foo : 'bar', a : 'b' }; var secondObject = { foo : 'baz' }; var newObject = $.extend({}, firstObject, secondObject); console.log(firstObject.foo); // 'bar' console.log(newObject.foo); // 'baz'
改變函數(shù)的作用域:
var myFunction = function() { console.log(this); }; var myObject = { foo : 'bar' }; myFunction(); // logs window object var myProxyFunction = $.proxy(myFunction, myObject); myProxyFunction(); // logs myObject object
再結(jié)合事件看如何改變函數(shù)的作用域:
var myObject = { myFn : function() { console.log(this); } }; $('#foo').click(myObject.myFn); // logs DOM element #foo $('#foo').click($.proxy(myObject, 'myFn')); // logs myObject
JavaScript 本身有類型檢測(cè)的方法,jQuery 中也有,并且做得更好:
var myValue = [1, 2, 3]; // 用 JavaScript 的 typeof 操作符來判斷類型 typeof myValue == 'string'; // false typeof myValue == 'number'; // false typeof myValue == 'undefined'; // false typeof myValue == 'boolean'; // false // 用恒等于 檢測(cè) null myValue === null; // false // 使用 jQuery 的方法來判斷類型 jQuery.isFunction(myValue); // false jQuery.isPlainObject(myValue); // false jQuery.isArray(myValue); // true
向 HTML 元素添加額外的數(shù)據(jù):
$('#myDiv').data('keyName', { foo : 'bar' }); $('#myDiv').data('keyName'); // { foo : 'bar' }
所要添加的數(shù)據(jù)可以是任意類型:
$('#myList li').each(function() { var $li = $(this), $div = $li.find('div.content'); $li.data('contentDiv', $div); }); // 不需要再去找那些 div 了; // 可以直接從 list 中讀取出來 var $firstLi = $('#myList li:first'); $firstLi.data('contentDiv').html('new content');
相關(guān)文章
jQuery插件FusionCharts繪制的2D雙面積圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D雙面積圖效果,結(jié)合實(shí)例形式分析了jQuery使用插件FusionCharts結(jié)合xml格式數(shù)據(jù)繪制2D雙面積圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04基于jquery實(shí)現(xiàn)動(dòng)態(tài)豎向柱狀條特效
很多數(shù)據(jù)統(tǒng)計(jì)效果中,柱狀條方式的算是比較常見的一種,形象直觀,下面就是一段能夠?qū)崿F(xiàn)此功能的代碼實(shí)例,并且具有一定的動(dòng)態(tài)效果,感興趣的朋友可以參考一下2016-02-02jQuery控制li上下循環(huán)滾動(dòng)插件用法實(shí)例(附demo源碼下載)
這篇文章主要介紹了jQuery控制li上下循環(huán)滾動(dòng)插件用法,結(jié)合實(shí)例形式分析了jQuery循環(huán)滾動(dòng)插件的實(shí)現(xiàn)技巧與使用方法,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05JQuery插件fancybox無(wú)法在彈出層使用左右鍵的解決辦法
本篇文章主要是對(duì)JQuery插件fancybox無(wú)法在彈出層使用左右鍵的解決辦法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12jQuery插件bxSlider實(shí)現(xiàn)響應(yīng)式焦點(diǎn)圖
bxSlider特性1.充分響應(yīng)各種設(shè)備,適應(yīng)各種屏幕;2.支持多種滑動(dòng)模式,水平、垂直以及淡入淡出效果;3.支持圖片、視頻以及任意html內(nèi)容;4.支持觸摸滑動(dòng);5.支持Firefox,Chrome,Safari,iOS,Android,IE7+,下面我們就來詳細(xì)探討下吧。2015-04-04jQuery實(shí)現(xiàn)的點(diǎn)擊顯示隱藏下拉菜單功能完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的點(diǎn)擊顯示隱藏下拉菜單功能,結(jié)合完整實(shí)例形式分析了jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作簡(jiǎn)單實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05jQuery側(cè)邊欄隨窗口滾動(dòng)實(shí)現(xiàn)方法
jQuery側(cè)邊欄隨窗口滾動(dòng)實(shí)現(xiàn)方法,需要的朋友可以參考一下2013-03-03完美解決jQuery fancybox ie 無(wú)法顯示關(guān)閉按鈕的問題
下面小編就為大家?guī)硪黄昝澜鉀QjQuery fancybox ie 無(wú)法顯示關(guān)閉按鈕的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11詳談jQuery.load()和Jsp的include的區(qū)別
下面小編就為大家?guī)硪黄斦刯Query.load()和Jsp的include的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04