日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

分享

1.JQUERY簡介

 昵稱10504424 2013-11-18

jQuery就是一個輕量級JavaScript函數(shù)庫,是對JavaScript進行了封裝,簡化了開發(fā)。

(內(nèi)部仍然是調(diào)用JavaScript實現(xiàn)的,所以并不是代替JavaScript的)

2.兩個遍歷函數(shù)MAP和EACH

對數(shù)組array中的每個元素調(diào)用方法fn進行處理

返回值為處理后的一個新數(shù)組,原數(shù)組不變。

1.4.1不能處理Dictionary風(fēng)格數(shù)組,1.7.1可以

應(yīng)用舉例:

var arr = [1, 3, 5, 7, 9];

var newarr = $.map(arr, function (arri, i, arg) {

if (arri < arg) {

return arri * 2;

}

else {

return arri ;

}

}, 7);

//map:第一參數(shù):數(shù)組。第二個參數(shù):遍歷集合中每個元素時候執(zhí)行的一個回調(diào)函數(shù),第三個參數(shù):是給回調(diào)函數(shù)傳遞參數(shù)用的,可以省略

var newarr1 = $.map(arr, function (arri) {

if (arri < 7) {

return arri * 2;

}

else {

return arri;

}

});

原理模擬:

function myMap(arr, func, arg) {

var arrtemp=[];

for (var i = 0; i < arr.length; i++) {

if(func(arr[i])){

arrtemp[arrtemp.length] = func(arr[i],i,arg);

//或者

// arrtemp.push(func(arr[i]));

//壓棧

}

}

return arrtemp;

}

對數(shù)組arry每個元素調(diào)用fn函數(shù)進行處理,沒有返回值。

fn函數(shù)有兩個參數(shù):key,value。對于普通數(shù)組key就是索引。可以直接在fn中使用this

一般都是對數(shù)據(jù)的遍歷。【除非key、value中,value是引用類型否則不能修改數(shù)組,修改請用$.map()方法?!?/a>

普通數(shù)組推薦用無參,用dict風(fēng)格的就用key、value。

與map函數(shù)相對應(yīng),主要處理鍵值對型的數(shù)組;

參數(shù):第一個:要處理的數(shù)據(jù)源數(shù)組,第二個參數(shù):處理數(shù)組中每個元素的回調(diào)函數(shù)【第一個參數(shù)是:key,第二個是元素的value】

如果在each 方法中 其中一個 回調(diào)函數(shù)返回了false,那么就不再繼續(xù)往下執(zhí)行了。所以可以用return false來退出循環(huán)。

應(yīng)用舉例:

$.each(arr, function (key, value) {

if (key == "age") {

return false;

}

});

原理模擬:

function myEach(arry,callback) {

for (var i = 0; i < arry.length; i++) {

var result = callback(i, arry[i]);

if (result == false) {

break;

}

}

}

3.JQUERY和DOM對象的區(qū)別.

(1)對象的差異

Dom對象 var ele = document.getElementById("btn1");

jQuery對象 var jq = $(ele);

//把dom對象封裝成jQuery對象的方法;

//當(dāng)然,一般也不用這樣麻煩的封裝jq對象,因為我們有選擇器;

//jQuery對象只能調(diào)用jQuery封裝的方法,不能調(diào)用 dom對象原生的屬性或者方法了。

(2)窗口加載的區(qū)別:

//window.onload事件執(zhí)行是在:頁面上所有的元素都加載完成后(指的:全部下載顯示完畢),才出發(fā)此事件的執(zhí)行。

//有可能頁面中一些較大的圖片或者是flash等阻塞了 js事件響應(yīng)方法的執(zhí)行,導(dǎo)致了頁面的一些效果展示給用戶的時候響應(yīng)速度非常低

//用戶體驗不是很好。

onload = function () {

};

//第一種方式:打醬油的

$(document).ready(function () {

});

//方式二:

//jQuery注冊的方法都是多播委托的形式

//給文檔加載完成【綁定】事件

$(function () {

});

$(function () {

});

(3)jquery對象和Dom對象相互轉(zhuǎn)換

1.DOM à Jquery :var dom = $v1.get(0); 或者 var dom = $v1[0];

2.Jquery à DOM :var jq = $( dom);

4.JQUERY的DOM操作

//一般情況下,不傳參數(shù)就是取里面的值,傳參數(shù)就代表設(shè)置數(shù)據(jù)到 dom元素上去。

//===================val()=======================//

//val()是$里獲得value的方法

//設(shè)置value的方法

//=====================text()===========================//

//$里.click是獲得onclick效果的方法

//=====================html()===========================//

//=====================css()===========================//

//=====================attr()設(shè)置屬性==================//

//============================================================//

追加元素的方法

子元素.appendTo(父元素);//主動巴結(jié)!到最后一個

子元素.prependTo(父元素);//主動巴結(jié)到第一個。

(*)A.insertBefore(B);將A插入到B的前面,等同于B.before(A);

(*)X.insertAfter(Y);將X插入到Y(jié)的后面,等同于Y.after(X);

刪除元素的方法

emptys();

清空某元素下的所有子節(jié)點

內(nèi)部實現(xiàn):while(ele.firstChild){ele.removeChild(ele.firstChild);}

元素.remove(expr)

刪除當(dāng)前元素,返回值為被刪除的元素。還可以繼續(xù)使用被刪除的節(jié)點。比如重新添加到其他節(jié)點下:

var lis = $("#ulSite li").remove();

經(jīng)典案例:動態(tài)創(chuàng)建表格

var data = [{ name: "百度", url: "http://www.baidu.com" },

{ name: "新浪", url: "http://www.sina.com.cn" },

{ name: "傳智播客", url: "http://www." }];

var strHtml = "";

for (var i = 0; i < data.length; i++) {

strHtml += "<tr>";

strHtml += "<td>" + data[i].name + "</td><td>" + data[i].url + "</td>";

strHtml += "</tr>";

}

//動態(tài)創(chuàng)建表格

經(jīng)典案例:10秒之后跳轉(zhuǎn)

<input type="button" id="btn" value="請仔細閱讀協(xié)議(5s)" disabled="disabled"/>

$(function () {

var sec = 4;

var intervalId = setInterval(function() {

if (sec > 0) {

sec--; } else {

clearInterval(intervalId);//計數(shù)完成后,移除 計數(shù)器 }

}, 1000); });

例子:評分控件

1.獲取兄弟元素的幾個方法

next(); 當(dāng)前元素之后的緊鄰著的第一個兄弟元素(下一個)

nextAll();當(dāng)前元素之后的所有兄弟元素

prev();當(dāng)前元素之前的緊鄰著的兄弟元素(上一個)

prevAll();當(dāng)前元素之前的所有兄弟元素

siblings();當(dāng)前元素的所有兄弟元素

$(function() {

//當(dāng)鼠標(biāo)移進來之后,把當(dāng)前的五角星設(shè)置為 實體的,然后之前的設(shè)置為實體的,之后的設(shè)置為空心的

//end()方法是將當(dāng)前的函數(shù)計算的結(jié)果返回到最近一次破壞傳遞的集合的地方去。 //回到最近的一個"破壞性"操作之前。即,將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)。

Html中自己寫一個talbe,td用☆表示就可以實現(xiàn)效果啦。

2.基本過濾選擇器

:first 選取第一個元素。$("div:first")選取第一個<div>

:last 選取最后一個元素。$("div:last")選取最后一個<div>

:not(選擇器) 選取不滿足“選擇器”條件的元素,$("input:not(.myClass)")選取樣式名不是myClass的<input>

:eq(索引序號)、gt(索引序號)、:lt(索引序號) 選取索引等于、大于、小于索引序號的元素,比如$("input:lt(5)")選取索引小于5的<input>

例子:第一行是表頭,所以顯示大字體(fontSize=30),

最后一行是匯總,所以顯示紅色字體。正文的前三行是前三名,所以顯示傻大的字體(22)表格的偶數(shù)行是紅色色背景[非最后一行]。

//最后一行是匯總,所以顯示紅色字體

//正文的前三行是前三名,所以顯示傻大的字體(22),注意這里的索引是從0開始的

//1,2,3 執(zhí)行的時候,gt(0)之后就直接將第0個拋棄后,再進行后面的過濾

//表格的偶數(shù)行是紅色色背景【非最后一行】

不僅可以使用選擇器進行進行絕對定位,還可以進行相對定位,只要在$()指定第二個參數(shù),第二個參數(shù)為相對的元素.

$( “ul”, $(this) ).css(“background”, “red”);

context參數(shù)可以是用dom對象集合或jQuery對象

默認如果不傳遞context則,會在整個文檔中搜索。

屬性過濾器

還可以選擇開頭[name^=值]、結(jié)束[ name$=值]、包含[ name*=值]等,條件還可以復(fù)合。[[屬性1=a][屬性2=b]…](*)

//搜索 當(dāng)前頁面中所有的div中帶有 id屬性的標(biāo)簽

//給帶有 name屬性 并且值=xiaoyang的 div標(biāo)簽設(shè)置 字體顏色為綠色

//給div中 帶有name屬性并且 以 x開頭的標(biāo)簽選擇出來,并設(shè)置字體 為 30px

//屬性復(fù)合 選擇過濾: 是一個并且的過濾

5.表單選擇器

//從整個Select標(biāo)簽 去拿到 選擇的屬性值 是從val()拿的。 如果使用text會把select下面的所有的選項的text拿到。

經(jīng)典案例:全選 全不選 反選

//反選

//在each函數(shù)內(nèi)部的 調(diào)用的callback函數(shù)中 的this指向的是當(dāng)前的遍歷的元素

/this===v 返回 true }); });

單選框的處理:

<input type="button" value="獲取 性別的 選擇的值" id="btnGetRadioValue"/>

<hr/>

<input type="radio" value="1" name="gender"/>男

<input type="radio" value="2" name="gender"/>女

<input type="radio" value="3" name="gender" />曾哥

<hr/>

<input type="radio" name="other" value="2"/>shit

//獲取單選組的值 alert($(":checked[name='gender']").val());

//給單選組 設(shè)置 值 $("input[name='gender']").val(["1"]);

});

6.樣式操作

獲取樣式 attr("class"),設(shè)置樣式attr("class","myclass"),追加樣式addClass("myclass")(不影響其他樣式),移除樣式removeClass("myclass"),切換樣式(如果存在樣式則去掉樣式,如果沒有樣式則添加樣式)toggleClass("myclass"),判斷是否存在樣式:hasClass("myclass")

案例:網(wǎng)頁開關(guān)燈的效果

<style type="text/css">

.dark

{

background-color:Black;

}</style>

<script type="text/javascript">

$(function() {

}); }); </script>

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多