jQuery初體驗(yàn)

Towers 發(fā)布于2019-08-22 17:28 / 2177人閱讀

摘要：就像一個(gè)大的功能庫(kù)，給我們返回一個(gè)有很多方法屬性的對(duì)象，然后我們調(diào)用它的方法屬性就行了。和一樣，使用鏈?zhǔn)酱a。一旦找到新的元素，之后的鏈就操作在新元素上，而不是一開(kāi)始的元素。一般的變量無(wú)法使用方法，使用封裝，使其可以使用方法。

jQuery

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

和Javascript一樣，使用鏈?zhǔn)酱a。一旦找到新的元素，之后的鏈就操作在新元素上，而不是一開(kāi)始的元素。

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

var fish = document.getElementById("fish");
$("fish").remove();

獲取一個(gè)元素

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

$("div")
$(".color")
$("#mylove")
$("div ul .yellow")
$("#color.yellow")
$("#blur > .pic")

頁(yè)面準(zhǔn)備就緒時(shí)

jQuery:
$(document).ready(function(){
    //your code
});

JavaScript:
window.onload=function(){
    //your code
};

監(jiān)聽(tīng)事件

綁定事件

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

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

綁定多個(gè)事件

jQuery:
$("#click").bind("click",function(){             //jQuery自動(dòng)判斷瀏覽器類型并做調(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自動(dòng)判斷瀏覽器類型并做調(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()            向下展開(kāi)
slideToggle()   
fadeIn(速度/ms)         漸入

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

對(duì)元素的操作

添加元素

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賦給一個(gè)變量，刪除的元素將可以像數(shù)組一樣存在變量里

獲取元素

$("#fish").eq(n);    //找到 $("#fish") 下面第 n 個(gè)子元素，并封裝成jquery對(duì)象

$("#fish").parent();        //id=fish 的元素的父元素
$("#fish").children();      //id=fish 的元素的子元素
$("#fish").prev();          //id=fish 的元素的上（前）一個(gè)元素
$("#fish").next();          //id=fish 的元素的下（后）一個(gè)元素

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

$(".fish").first();      //取所有 class=fish 元素中第一個(gè)元素
$(".fish").eq(n);        //取所有 class=fish 元素中第 n 個(gè)元素
$(".fish").last();       //取所有 class=fish 元素中最后一個(gè)元素
$(".fish").slice(a,b);   //取 class=fish 中 a 和 b 之間的所有元素，不包括 a 和 b
$(".fish").filter();     //取 class=fish 里面符合 括號(hào)里規(guī)則 的所有元素
$(".fish").not();        //取 class=fish 里面不符合 括號(hào)里規(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的元素的索引號(hào)

this

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

JavaScript:
this.click=function(){};

對(duì)CSS的操作

jQuery中有addClass、removeClass這樣的命令來(lái)直接對(duì)單個(gè)CSS類進(jìn)行操作
JavaScript有className、classList這樣的命令，只能對(duì)全部CSS類進(jìn)行操作

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

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

云服務(wù)器 GPU云服務(wù)器初體驗(yàn) 初長(zhǎng)成小白初小白初入

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95206.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Towers

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

WebHorizon：日本vps/新加坡vps，2核/4GB內(nèi)存/80GB NVMe硬盤(pán)/2TB流量

閱讀 2657·2021-10-19 11:41
國(guó)家網(wǎng)信辦：禁止PUSH彈窗推送八卦緋聞等內(nèi)容

閱讀 2482·2021-09-01 10:32
JS基礎(chǔ)入門(mén)篇（一）

閱讀 3430·2019-08-29 15:21
純CSS實(shí)現(xiàn)網(wǎng)站常用的五角星評(píng)分和分?jǐn)?shù)展示交互效果

閱讀 1871·2019-08-29 12:20
前端實(shí)例練習(xí) - 提示框

閱讀 1215·2019-08-29 12:13
webpack4 中的最新 React全家桶實(shí)戰(zhàn)使用配置指南！

閱讀 682·2019-08-26 12:24
Storage 接口

閱讀 2592·2019-08-26 10:26
JS判斷移動(dòng)端、PC端、iOS端、安卓端

閱讀 906·2019-08-23 18:40

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

jQuery初體驗(yàn)

相關(guān)文章

flint簡(jiǎn)單初體驗(yàn)