小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

1.JQUERY簡(jiǎn)介

 昵稱10504424 2013-11-18

jQuery就是一個(gè)輕量級(jí)JavaScript函數(shù)庫(kù),是對(duì)JavaScript進(jìn)行了封裝，簡(jiǎn)化了開發(fā)。

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

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

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

返回值為處理后的一個(gè)新數(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ù)組。第二個(gè)參數(shù)：遍歷集合中每個(gè)元素時(shí)候執(zhí)行的一個(gè)回調(diào)函數(shù)，第三個(gè)參數(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;

}

對(duì)數(shù)組arry每個(gè)元素調(diào)用fn函數(shù)進(jìn)行處理，沒有返回值。

fn函數(shù)有兩個(gè)參數(shù)：key,value。對(duì)于普通數(shù)組key就是索引?？梢灾苯釉趂n中使用this

一般都是對(duì)數(shù)據(jù)的遍歷?！境莐ey、value中，value是引用類型否則不能修改數(shù)組，修改請(qǐng)用$.map()方法?！?/a>

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

與map函數(shù)相對(duì)應(yīng)，主要處理鍵值對(duì)型的數(shù)組；

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

如果在each 方法中 其中一個(gè) 回調(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對(duì)象的區(qū)別.

（1）對(duì)象的差異

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

jQuery對(duì)象 var jq = $(ele);

//把dom對(duì)象封裝成jQuery對(duì)象的方法；

//當(dāng)然，一般也不用這樣麻煩的封裝jq對(duì)象，因?yàn)槲覀冇羞x擇器；

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

（2）窗口加載的區(qū)別：

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

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

//用戶體驗(yàn)不是很好。

onload = function () {

};

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

$(document).ready(function () {

});

//方式二：

//jQuery注冊(cè)的方法都是多播委托的形式

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

$(function () {

});

$(function () {

});

（3）jquery對(duì)象和Dom對(duì)象相互轉(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(父元素);//主動(dòng)巴結(jié)!到最后一個(gè)

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

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

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

刪除元素的方法

emptys();

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

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

元素.remove(expr)

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

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

經(jīng)典案例：動(dò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>";

}

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

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

<input type="button" id="btn" value="請(qǐng)仔細(xì)閱讀協(xié)議（5s）" disabled="disabled"/>

$(function () {

var sec = 4;

var intervalId = setInterval(function() {

if (sec > 0) {

sec--; } else {

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

}, 1000); });

例子：評(píng)分控件

1.獲取兄弟元素的幾個(gè)方法

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

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

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

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

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

$(function() {

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

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

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

2.基本過濾選擇器

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

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

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

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

例子:第一行是表頭，所以顯示大字體（fontSize=30），

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

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

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

//1,2,3 執(zhí)行的時(shí)候，gt（0）之后就直接將第0個(gè)拋棄后，再進(jìn)行后面的過濾

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

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

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

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

默認(rèn)如果不傳遞context則，會(huì)在整個(gè)文檔中搜索。

屬性過濾器

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

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

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

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

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

5.表單選擇器

//從整個(gè)Select標(biāo)簽 去拿到 選擇的屬性值 是從val（）拿的。 如果使用text會(huì)把select下面的所有的選項(xiàng)的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)頁(yè)開關(guān)燈的效果

<style type="text/css">

.dark

{

background-color:Black;

}</style>

<script type="text/javascript">

$(function() {

}); }); </script>

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

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多