資訊專欄INFORMATION COLUMN
摘要：前言對象是一個類數組的對象，含有連續的整形屬性以及一系列的方法。它把所有的操作都包裝在一個函數中，形成了統一也是惟一的操作入口。從而避免重復創建對象。
前言
jQuery對象是一個類數組的對象，含有連續的整形屬性以及一系列的jQuery方法。它把所有的操作都包裝在一個jQuery()函數中，形成了統一(也是惟一)的操作入口。
其中我們用的非常頻繁的一個函數是$()或者說是jQuery()，當我們調用他的時候會根據傳入的參數的不同而達到不同的效果。
接下來會一一說一下這7中用法，歡迎大家指正其中不正確的地方。
1 jQuery(selector,context)簡要的說是：接收一個css選擇器表達式(selector)和可選的選擇器上下文(context),返回一個包含了匹配的DOM元素的jQuery對象。
默認情況下，對匹配元素的查找都是從根元素ducument對象開始，也就是說查找范圍是整棵文檔樹。但是如果給定了上下文context，則在指定上下文中查找
html
body span body span body spanwrap span wrap span wrap span
js
$("span").css("background-color","red");//所有的span都會變紅
$("span",".wrap").css("background-color","red");//只有.wrap中的span會變紅
2 jQuery(html,ownerDocument) 、jQuery(html,props)
用所提供的html代碼創建DOM元素
對于jQuery(html,ownerDocument)，參數html可以是單標簽或者是多層標簽之間的嵌套。第二個參數用于創建新DOM元素的文檔對象，如果不傳入則默認為當前的文檔對象。
//單標簽 兩種方式都可以往body中插入div
/*
* 1 $("").appendTo("body");
* 2 $("").appendTo("body");
*/
// 多標簽嵌套
$("dfsg").appendTo("body");
另外:對于單標簽，jQuery(html,props)，props是一個包含屬性和事件的普通的對象，用法如下。(該用法有待考證，請知道這一用法的童鞋告知一下，感激不盡)
$("我是div",{
title:"我是新的div",
click:function(){
$(this).css("color","red");
console.log(this);
}
}).appendTo("body");
3 jQuery(element or elementsArray)
如果傳入一個DOM元素或者是DOM元素的數組，則把DOM元素封裝到jQuery對象中并返回。
html
- 1
- 2
- 3
- 4
- 5
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對象"
4 jQuery(object)
如果傳入的是一個object對象，則把該對象封裝到jQuery對象中并返回。
var obj={name:"謙龍"};
var $obj=$(obj);//封裝成jQuery對象
//綁定自定義事件
$obj.on("say",function(){
console.log(this.name)//輸出謙龍
});
$obj.trigger("say");
5 jQuery(callback)
當傳進去的參數是函數的時候，則在document對象上綁定一個ready事件監聽函數，當DOM結構加載完成的時候執行
$(function(){
})
//以上代碼和下面的效果是一樣的
$(document).ready(function(){
...//代碼
})
6 jQuery(jQuery object)
當傳進去的參數是一個jQuery對象的時候，則創建該jQuery對象的一個副本并返回。副本與傳入的jQuery對象引用完全相同的元素
var aLi=$("li");
var copyLi=$(aLi);//創建一個aLi的副本
console.log(aLi);
console.log(copyLi);
console.log(copyLi===aLi);
7 jQuery()
如果不傳入任何的參數，則返回一個空的jQuery對象，屬性length為0
注意這個功能可以用來復用jQuery對象，例如可以創建一個空的jQuery對象，然后在需要的時候先手動修改其中的元素，然后在調用jQuery方法。從而避免重復創建jQuery對象。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86207.html
摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法，到著手...
閱讀 2722·2021-11-11 17:21
閱讀 613·2021-09-23 11:22
閱讀 3578·2019-08-30 15:55
閱讀 1641·2019-08-29 17:15
閱讀 573·2019-08-29 16:38
閱讀 904·2019-08-26 11:54
閱讀 2504·2019-08-26 11:53
閱讀 2750·2019-08-26 10:31
