jQuery 中 $( ) 函式的用法總結
阿新 • • 發佈:2018-12-28
摘要
jQuery物件: 具有jquery框架設定的所有功能的呼叫者, 就是該框架的物件 $又是什麼?: $就是jQuery物件, jQuery物件為window的全域性屬性, 所以可以直接使用 如何自定義jQuery物件: 如用 JQ 替換 jQuery | $ var JQ = jQuery.noConflict(); //這是jquery原始碼中提供的方法 JQ('.box').html("<b>哈哈</b>");
jQuery(selector,context)
簡要的說是:接收一個css選擇器表示式(selector)和可選的選擇器上下文(context),返回一個包含了匹配的DOM元素的jQuery物件
預設情況下,對匹配元素的查詢都是從根元素ducument物件開始,也就是說查詢範圍是整棵文件樹。但是如果給定了上下文context,則在指定上下文中查詢
html <span>body span</span> <span>body span</span> <span>body span</span> <div class="wrap"> <span>wrap span</span> <span>wrap span</span> <span>wrap span</span> </div> js $('span').css('background-color','red');//所有的span都會變紅 $('span','.wrap').css('background-color','red');//只有.wrap中的span會變紅
jQuery(html,ownerDocument) ,jQuery(html,props)
用所提供的html程式碼建立DOM元素對於jQuery(html,ownerDocument),引數html可以是單標籤或者是多層標籤之間的巢狀。
第二個引數用於建立新DOM元素的文件物件,如果不傳入則預設為當前的文件物件
//單標籤 兩種方式都可以往body中插入div /* * 1 $('<div>').appendTo('body'); * 2 $('<div></div>').appendTo('body'); */ // 多標籤巢狀 $('<div><span>dfsg</span></div>').appendTo('body');
另外:對於單標籤,jQuery(html,props),props是一個包含屬性和事件的普通的物件,用法如下
$('<div>我是div</div>',{ title:'我是新的div', click:function(){ $(this).css('color','red'); console.log(this); } }).appendTo('body');
jQuery(element or elementsArray)
如果傳入一個DOM元素或者是DOM元素的陣列,則把DOM元素封裝到jQuery物件中並返回。
html <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> js // 傳入DOM元素 $('li').each(function(index,ele){ $(ele).on('click',function(){ $(this).css('background','red');//這裡的DOM元素就是this }) }) //傳入DOM陣列 var aLi=document.getElementsByTagName('li'); aLi=[].slice.call(aLi);//集合轉陣列 var $aLi=$(aLi); $aLi.html('我是jQuery物件');//所有的li的內容都變成'我是jQuery物件'
jQuery(object)
如果傳入的是一個object物件,則把該物件封裝到jQuery物件中並返回
var obj={name:'謙龍'}; var $obj=$(obj);//封裝成jQuery物件 //繫結自定義事件 $obj.on('say',function(){ console.log(this.name)//輸出謙龍 }); $obj.trigger('say');
jQuery(callback)
當傳進去的引數是函式的時候,則在document物件上繫結一個ready事件監聽函式,當DOM結構載入完成的時候執行
$(function(){ }) //以上程式碼和下面的效果是一樣的 $(document).ready(function(){ ...//程式碼 })
jQuery(jQuery object)
當傳進去的引數是一個jQuery物件的時候,則建立該jQuery物件的一個副本並返回。副本與傳入的jQuery物件引用完全相同的元素
var aLi=$('li'); var copyLi=$(aLi);//建立一個aLi的副本 console.log(aLi); console.log(copyLi); console.log(copyLi===aLi);
jQuery()
如果不傳入任何的引數,則返回一個空的jQuery物件,屬性length為0注意這個功能可以用來複用jQuery物件,
例如可以建立一個空的jQuery物件,然後在需要的時候先手動修改其中的元素,然後在呼叫jQuery方法。從而避免重複建立jQuery物件