欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

jQuery對(duì)象是一個(gè)類(lèi)數(shù)組的對(duì)象，含有連續(xù)的整形屬性以及一系列的jQuery方法。它把所有的操作都包裝在一個(gè)jQuery()函數(shù)中，形成了統(tǒng)一(也是惟一)的操作入口。

其中我們用的非常頻繁的一個(gè)函數(shù)是$()或者說(shuō)是jQuery()，當(dāng)我們調(diào)用他的時(shí)候會(huì)根據(jù)傳入的參數(shù)的不同而達(dá)到不同的效果。

構(gòu)造函數(shù)jQuery()常見(jiàn)的7種用法

   1.接受一個(gè)CSS選擇器表達(dá)式和可選的選擇器上下文，返回一個(gè)包含了匹配的DOM元素的jQuery對(duì)象。例如：$('.p'),$('.p','.content');

   2.接受HTML代碼創(chuàng)建DOM元素。例如:$('<p></p>');

   3.封裝DOM元素為jQuery對(duì)象。例如：$(this);

   4.將普通對(duì)象封裝為jQuery對(duì)象，以便普通對(duì)象也可以調(diào)用jQuery對(duì)象的方法。例如：$(obj);

   5.給ready事件綁定監(jiān)聽(tīng)函數(shù)。例如：$(function(){});

   6.接受一個(gè)jQuery對(duì)象，返回該jQuery對(duì)象的副本。例如 $($('p'));

   7.創(chuàng)建一個(gè)空jQuery對(duì)象。例如$();

參數(shù)是一個(gè)function, 入口函數(shù)
$(domobj) 把dom對(duì)象轉(zhuǎn)換成jquery對(duì)象
參數(shù)是一個(gè)字符串,用來(lái)找對(duì)象

1 、jQuery(selector,context)

簡(jiǎn)要的說(shuō)是：接收一個(gè)css選擇器表達(dá)式(selector)和可選的選擇器上下文(context),返回一個(gè)包含了匹配的DOM元素的jQuery對(duì)象。

默認(rèn)情況下，對(duì)匹配元素的查找都是從根元素ducument對(duì)象開(kāi)始，也就是說(shuō)查找范圍是整棵文檔樹(shù)。但是如果給定了上下文context，則在指定上下文中查找

<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>

$('span').css('background-color','red');//所有的span都會(huì)變紅

$('.wrap span').css('background-color','red');//只有.wrap中的span會(huì)變紅

2、jQuery(html,ownerDocument) 、jQuery(html,props)

用所提供的html代碼創(chuàng)建DOM元素

對(duì)于jQuery(html,ownerDocument)，參數(shù)html可以是單標(biāo)簽或者是多層標(biāo)簽之間的嵌套。第二個(gè)參數(shù)用于創(chuàng)建新DOM元素的文檔對(duì)象，如果不傳入則默認(rèn)為當(dāng)前的文檔對(duì)象。

//單標(biāo)簽  兩種方式都可以往body中插入div
   /*  
    *   1  $('<div>').appendTo('body');
    *   2  $('').appendTo('body');  
    */
   // 多標(biāo)簽嵌套
    $('<div><span>dfsg</span></div>').appendTo('body');

3 jQuery(element or elementsArray)

如果傳入一個(gè)DOM元素或者是DOM元素的數(shù)組，則把DOM元素封裝到j(luò)Query對(duì)象中并返回。

<ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
   </ul>

// 傳入DOM元素
        $('li').each(function(index,ele){
               $(ele).on('click',function(){
                   $(this).css('background','red');//這里的DOM元素就是this
               })
       })
       
       //傳入DOM數(shù)組
       var aLi=document.getElementsByTagName('li');
           aLi=[].slice.call(aLi);//集合轉(zhuǎn)數(shù)組
           var $aLi=$(aLi);
           $aLi.html('我是jQuery對(duì)象');//所有的li的內(nèi)容都變成'我是jQuery對(duì)象'

4 jQuery(object)

如果傳入的是一個(gè)object對(duì)象，則把該對(duì)象封裝到j(luò)Query對(duì)象中并返回。

var obj={name:'謙龍'};
   var $obj=$(obj);//封裝成jQuery對(duì)象
   //綁定自定義事件
   $obj.on('say',function(){
       console.log(this.name)//輸出謙龍
   });
   $obj.trigger('say');

5 jQuery(callback)

當(dāng)傳進(jìn)去的參數(shù)是函數(shù)的時(shí)候，則在document對(duì)象上綁定一個(gè)ready事件監(jiān)聽(tīng)函數(shù)，當(dāng)DOM結(jié)構(gòu)加載完成的時(shí)候執(zhí)行

$(function(){
   
   })
   //以上代碼和下面的效果是一樣的
   $(document).ready(function(){
       ...//代碼
   })

6 jQuery(jQuery object)

當(dāng)傳進(jìn)去的參數(shù)是一個(gè)jQuery對(duì)象的時(shí)候，則創(chuàng)建該jQuery對(duì)象的一個(gè)副本并返回。副本與傳入的jQuery對(duì)象引用完全相同的元素

var aLi=$('li');
   var copyLi=$(aLi);//創(chuàng)建一個(gè)aLi的副本
   console.log(aLi);
   console.log(copyLi);
   console.log(copyLi===aLi);

7 jQuery()

如果不傳入任何的參數(shù)，則返回一個(gè)空的jQuery對(duì)象，屬性length為0

注意這個(gè)功能可以用來(lái)復(fù)用jQuery對(duì)象，例如可以創(chuàng)建一個(gè)空的jQuery對(duì)象，然后在需要的時(shí)候先手動(dòng)修改其中的元素，然后在調(diào)用jQuery方法。從而避免重復(fù)創(chuàng)建jQuery對(duì)象。

綁定事件：$("a").click(funcTIon(){...})

顯示其html內(nèi)容：alert($("div>p").html());       $(document).find("div>p").html());

添加新內(nèi)容：$("Hello").appendTo("body");

$("#")是指選擇器選擇帶有 id的元素

jQuery中的“$”

1、jQuery對(duì)象構(gòu)造函數(shù)【選擇器】

在CSS中選擇器的作用是選擇頁(yè)面中某一類(lèi)元素或者某一個(gè)元素（ID選擇器），而jQuery中的"$"作為選擇器，同樣是選擇某一類(lèi)或某一類(lèi)元素。

<h2>標(biāo)記下包含的所有子標(biāo)記<a> 

h2 a {  /*添加CSS屬性*/  }

$("h2 a")  對(duì)象數(shù)組 

$("#showDiv“)     id選擇器，相當(dāng)于javascript中的document.getElementById("#showDiv")

$(".SomeClass")   class選擇器，選擇CSS類(lèi)別作為”SomeClass“的所有節(jié)點(diǎn)元素， 在javascript中要實(shí)現(xiàn)相同的選擇，需要用for循環(huán)遍歷整個(gè)DOM

$("p : odd")  選擇所有位于奇數(shù)行的<p>標(biāo)記， 幾乎所有的標(biāo)記都可以使用": odd" 或者 ": even" 來(lái)實(shí)現(xiàn)奇偶的選擇

$("td:nth-child(1)")  所有表格行的第一個(gè)單元格，就是第一列。這在修改表格的某一列的屬性時(shí)是非常有用的。不再需要一行行遍歷表格

$("li > a")  子選擇器，返回<li>標(biāo)記的所有子元素<a>,不包括孫標(biāo)記

$("a[href$=pdf]")  選擇所有超鏈接，并且這些超鏈接的href屬性是以"pdf"結(jié)尾的。有了屬性選擇器，可以很好的選擇頁(yè)面中的各種特性元素

2、功能函數(shù)前綴

在javascript中，開(kāi)發(fā)者經(jīng)常要便攜一些小函數(shù)來(lái)處理各種操作細(xì)節(jié)，例如在用戶(hù)提交表單時(shí)，需要將文本框中的最前端和最末端的空格清理掉，javascript沒(méi)有提供類(lèi)似trim()的功能，而引入jQuery后，便可以直接使用trim()函數(shù)，例如：

$.trim(sString);

jQuery.trim(sString);

trim()是jQuery的全局函數(shù)。

3、解決window.onload函數(shù)的沖突

由于頁(yè)面的HMTL框架需要在頁(yè)面完全加載之后才能使用，因此在DOM編程時(shí)window.onload函數(shù)頻繁被使用。倘若頁(yè)面中有多處都需要使用該函數(shù)，或者其他.js文件中也包含window.onload函數(shù)，沖突問(wèn)題十分棘手。jQuery中的ready()方法很好的解決了上述問(wèn)題，它能夠自動(dòng)將其中的函數(shù)在頁(yè)面加載完成后運(yùn)行，并且同一個(gè)頁(yè)面中可以使用多個(gè)ready()方法，而且不互相沖突。例如：

$(document).ready(function(){

$("table.datalist tr:nth-child(odd)").addClass("altrow");

});

對(duì)于上述代碼jQuery還提供了簡(jiǎn)寫(xiě)，可以省略其中的"(document).ready"部分，代碼如下：

$(function(){

$("table.datalist tr:nth-child(odd)").addClass("altrow");

});

4、創(chuàng)建DOM元素

利用DOM方法創(chuàng)建元素節(jié)點(diǎn)，通常需要將document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻煩，而jQuery中使用"$"符號(hào)可以直接創(chuàng)建DOM元素。例如：

var  oNewP = $("<p>這是一個(gè)好故事</p>")

以上代碼等同于javascript中的如下代碼：

var  oNewP = document.createElement("p");// 新建節(jié)點(diǎn)

var oText = document.createTextNode("這是一個(gè)好故事");

oNewP.appendChild(oText);

另外，jQuery對(duì)象還提供了insertAfter()方法：

$(function(){ 

　　var oNewP = $("<p>這是一個(gè)好故事</p>");// 創(chuàng)建DOM元素的JQuery對(duì)象

　　oNewP.insertAfter("#myTarget");

});

<body>

<p id="myTarget">插入到這行文字之后</p>

<p>也就是插入到這行文字之前，但這行沒(méi)有id,也可能不存在</p>

</body>

5、自定義添加"$"

jQuery不能滿(mǎn)足所有用戶(hù)的所有需求，且有一些特殊的需求十分小眾，也不適合放到整個(gè)jQuery框架中，用戶(hù)可以自定義該方法。代碼如下：

$.fn.disable = function(){

　　return this.each(function(){

　　　　if(typeof this.disabled != "undefined") this.disabled = true;

　　});

}

以上代碼首先設(shè)置"$.fn.disable",表明為"$"添加一個(gè)方法“disable()”,其中“$.fn”是擴(kuò)展jQuery時(shí)所必須的，然后利用匿名函數(shù)定義這個(gè)方法，即用each()將調(diào)用這個(gè)方法的每個(gè)元素的disabled屬性均設(shè)置為true(如果該屬性存在)

6、解決"$"的沖突

如果其他框架也是用了“$",會(huì)引起沖突，jQuery同樣提供了noConflict()方法來(lái)解決"$"沖突問(wèn)題：

jQuery.noConflict();

以上代碼可以使"$"按照其他javascript框架的方式運(yùn)算，這時(shí)在jQuery中便不能再使用“$”，而必須使用jQuery，例如$("div p") 必須寫(xiě)成jQuery("div p").

   1.接受一個(gè)CSS選擇器表達(dá)式和可選的選擇器上下文，返回一個(gè)包含了匹配的DOM元素的jQuery對(duì)象。例如：$('.p'),$('.p','.content');

   2.接受HTML代碼創(chuàng)建DOM元素。例如:$('<p></p>');

   3.封裝DOM元素為jQuery對(duì)象。例如：$(this);

   4.將普通對(duì)象封裝為jQuery對(duì)象，以便普通對(duì)象也可以調(diào)用jQuery對(duì)象的方法。例如：$(obj);

   5.給ready事件綁定監(jiān)聽(tīng)函數(shù)。例如：$(function(){});

   6.接受一個(gè)jQuery對(duì)象，返回該jQuery對(duì)象的副本。例如 $($('p'));

   7.創(chuàng)建一個(gè)空jQuery對(duì)象。例如$();

參數(shù)是一個(gè)function, 入口函數(shù)
$(domobj) 把dom對(duì)象轉(zhuǎn)換成jquery對(duì)象
參數(shù)是一個(gè)字符串,用來(lái)找對(duì)象