成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

jQuery初體驗

Towers / 2151人閱讀

摘要:就像一個大的功能庫,給我們返回一個有很多方法屬性的對象,然后我們調(diào)用它的方法屬性就行了。和一樣,使用鏈式代碼。一旦找到新的元素,之后的鏈就操作在新元素上,而不是一開始的元素。一般的變量無法使用方法,使用封裝,使其可以使用方法。

jQuery

jQuery就像一個大的功能庫,給我們返回一個有很多方法、屬性的對象,然后我們調(diào)用它的方法、屬性就行了。

和Javascript一樣,使用鏈式代碼。一旦找到新的元素,之后的鏈就操作在新元素上,而不是一開始的元素。

一般的javascript變量無法使用jquery方法,使用$("")封裝,使其可以使用jquery方法。

var fish = document.getElementById("fish");
$("fish").remove();
獲取一個元素

jQuery選擇器$("jQuery選擇器")和css選擇器一樣,可以是.可以是#可以是標(biāo)簽

$("div")
$(".color")
$("#mylove")
$("div ul .yellow")
$("#color.yellow")
$("#blur > .pic")
頁面準備就緒時
jQuery:
$(document).ready(function(){
    //your code
});

JavaScript:
window.onload=function(){
    //your code
};
監(jiān)聽事件

綁定事件

jQuery:
$("#button").on("事件名稱",function(){    //事件名稱:click/mousemove/keypress...
    //your code
})

Javascript:
var button=document.getElementById("button1");
button.事件名稱=function(){            //事件名稱:onclick/onmousemove/onkeypress...
    //your code
}

綁定多個事件

jQuery:
$("#click").bind("click",function(){             //jQuery自動判斷瀏覽器類型并做調(diào)整
    //your code
});

JavaScript:
var click=document.getElementById("click");
if(window.attachEvent){        
    click.attachEvent("click",function(){          //IE8或之前
        //your code
    });
}else{                         
    click.addEventListener("click",function(){    //除了IE8或之前
        //your code
    });
}

解綁事件

jQuery: 
//jQuery自動判斷瀏覽器類型并做調(diào)整

$("#click").unbind("click");     刪除 click 事件
$("#click").unbind();            刪除所有事件

JavaScript:
var click=document.getElementById("click");
click.removeEventListener("click");    //除了IE8或之前
click.detachEvent("click");            //IE8或之前

單擊

jQuery:
$("#click").click(function(){
    //your code
});

JavaScript:
document.getElementById("click").onclick=function(){
    //your code
};

觸發(fā)事件trigger()

jQuery:
$("#click").click(function(){
    //your code
});

$("#click").trigger("click");

綁定并只執(zhí)行一次事件

jQuery:
$("#button").one("事件名稱",function(){    //事件名稱:click/mousemove/keypress...
    //your code
})

遍歷

each()

jQuery:
$("p").each(function(){
    //your code
});

JavaScript:
var p=documentElementsByTagName("p");
for(var i in p){
    p[i] = //yourcode;
};

jQuery集成了很多效果,很好用
slideUP()              向上收起
slideDown()            向下展開
slideToggle()   
fadeIn(速度/ms)         漸入

$.contains(xxx,yyy);    判斷 元素xxx 中是不是有 元素yyy
對元素的操作

添加元素

jQuery:
$("div").append("

hello!

"); 直接在 div 后面添加元素 p ,p 的內(nèi)容為 hello! $("div").append($("#color")); 在 div 后面添加本代碼中 id="color" 的元素 JavaScript: var div=document.getElementById("div"); var p=doucment.createElement("p"); div.appendChild(p);
 $("div").before("

hello!

"); //在 div 上(前)面插入 "

hello!

" $("div").after("

hello!

"); //在 div 下(后)面插入 "

hello!

"
$("div").wrap("i`m yellow!");    // 
下添加子元素

刪除元素

$("div#color").empty();      //empty 方法將元素內(nèi)容清除,但不刪除元素
$("div#color").remove();      //remove 方法直接將元素刪除
$("div#color").detach();     //detach 方法將元素刪除后暫存在瀏覽器的內(nèi)存里,
var $L=$("div#color").detach();  //可以將detach賦給一個變量,刪除的元素將可以像數(shù)組一樣存在變量里

獲取元素

$("#fish").eq(n);    //找到 $("#fish") 下面第 n 個子元素,并封裝成jquery對象
$("#fish").parent();        //id=fish 的元素的父元素
$("#fish").children();      //id=fish 的元素的子元素
$("#fish").prev();          //id=fish 的元素的上(前)一個元素
$("#fish").next();          //id=fish 的元素的下(后)一個元素

$("#fish").parents();       //id=fish 的元素的所有父元素
$("#fish").siblings();      //id=fish 的元素的所有同級元素
$("#fish").closest("ul");   //離 id=fish 最近的 ul

$(".fish").first();      //取所有 class=fish 元素中第一個元素
$(".fish").eq(n);        //取所有 class=fish 元素中第 n 個元素
$(".fish").last();       //取所有 class=fish 元素中最后一個元素
$(".fish").slice(a,b);   //取 class=fish 中 a 和 b 之間的所有元素,不包括 a 和 b
$(".fish").filter();     //取 class=fish 里面符合 括號里規(guī)則 的所有元素
$(".fish").not();        //取 class=fish 里面不符合 括號里規(guī)則 的所有元素

$("#fish").parent().parent().next().remove();    //隨意組合
$("#fish").closest("ul").parents();              //隨意組合
$(".fish").parents().filter(".yellow");          //隨意組合
$(".fish ul").children().not("#yellow");         //隨意組合

替換元素

$("#fish").replaceWith("

hello!

"); //把 id=fish 的元素替換成

hello!

查找元素index()

  • yellow
  • blue
  • purple
jQuery: var index = $("ul > li").index($("#yellow")); //查找ul下li里#yellow的元素的索引號

this
jQuery:
$(this).click(function(){});

JavaScript:
this.click=function(){};
CSS的操作

jQuery中有addClass、removeClass這樣的命令來直接對單個CSS類進行操作
JavaScript有classNameclassList這樣的命令,只能對全部CSS類進行操作

jQuery:
$("p").addClass("yellow");
$("p").removeClass("yellow");

JavaScript:
p.className= //your code;
p.classList.add("");
p.classList.remove("");

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/95206.html

相關(guān)文章

  • flint簡單體驗

    摘要:它能夠使得在不刷新瀏覽器的情況下,更改本地的前端代碼組件,瀏覽器自動更新預(yù)覽。直接集成了這項技術(shù),而且建立了專門的通道進行錯誤的實時反饋。命令行提供了三個主要的命令,。服務(wù)器關(guān)于服務(wù)器,其實是內(nèi)部起了一個基于的服務(wù)器,外加進行消息的通訊。 跟著初探了下flintjs,的確會很棒,超級熱更新! 學(xué)習(xí)地址: http://frontenddev.org/link/ali-11-11-...

    Batkid 評論0 收藏0
  • jQuery體驗

    摘要:優(yōu)化代碼的原則就是提出重復(fù)的代碼。新的叫它,它返回一個對象,對象里面有兩個函數(shù),也就是和,并用初始化。當(dāng)然了這只是的基本原理,實際遠比它復(fù)雜。 學(xué)習(xí)了DOM api 之后,做些簡單的小練習(xí) 在HTML寫5個無序列表 選項1 選項2 選項3 選項4 選項5 獲取item3的所以的兄弟節(jié)點如何做呢? DOM 提供了nextSbiling`prev...

    AlienZHOU 評論0 收藏0
  • 新手的node爬蟲體驗

    摘要:后來在爬取不到讓我一度懷疑人生的時候巧合下,發(fā)現(xiàn)磁力鏈接有小寫字母,有長度的,有長度的。。 原文博客: 羞羞的node爬蟲 前言 學(xué)了一陣子node,除了用 express 寫東西,就沒怎么做過東西突然就想寫個 爬蟲 來玩一玩,而且還是爬一些羞羞的東西 使用模塊 SuperAgent 是個 http 方面的庫,可以發(fā)起 get 或 post 請求。 cheerio 大家可以理解成一個 ...

    wemallshop 評論0 收藏0
  • 新手的node爬蟲體驗

    摘要:后來在爬取不到讓我一度懷疑人生的時候巧合下,發(fā)現(xiàn)磁力鏈接有小寫字母,有長度的,有長度的。。 原文博客: 羞羞的node爬蟲 前言 學(xué)了一陣子node,除了用 express 寫東西,就沒怎么做過東西突然就想寫個 爬蟲 來玩一玩,而且還是爬一些羞羞的東西 使用模塊 SuperAgent 是個 http 方面的庫,可以發(fā)起 get 或 post 請求。 cheerio 大家可以理解成一個 ...

    canopus4u 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<