jQuery初體驗

Towers 發布于2019-08-22 17:28 / 2108人閱讀

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

jQuery

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

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

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

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

獲取一個元素

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

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

頁面準備就緒時

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

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

監聽事件

綁定事件

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自動判斷瀏覽器類型并做調整
    //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自動判斷瀏覽器類型并做調整

$("#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
};

觸發事件trigger()

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

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

綁定并只執行一次事件

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 的內容為 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 方法將元素內容清除，但不刪除元素
$("div#color").remove();      //remove 方法直接將元素刪除
$("div#color").detach();     //detach 方法將元素刪除后暫存在瀏覽器的內存里，
var $L=$("div#color").detach();  //可以將detach賦給一個變量，刪除的元素將可以像數組一樣存在變量里

獲取元素

$("#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 里面符合 括號里規則 的所有元素
$(".fish").not();        //取 class=fish 里面不符合 括號里規則 的所有元素

$("#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有className、classList這樣的命令，只能對全部CSS類進行操作

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

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

GPU云服務器云服務器初體驗初長成小白初小白初入

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95206.html

flint簡單初體驗

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

Batkid 2019-08-19 17:13 評論0 收藏0
jQuery初體驗

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

AlienZHOU 2019-08-22 17:22 評論0 收藏0
新手的node爬蟲初體驗

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

wemallshop 2019-08-20 16:53 評論0 收藏0
新手的node爬蟲初體驗

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

canopus4u 2019-08-01 16:54 評論0 收藏0