jQuery就是一個輕量級JavaScript函數(shù)庫,是對JavaScript進行了封裝,簡化了開發(fā)。
(內(nèi)部仍然是調(diào)用JavaScript實現(xiàn)的,所以并不是代替JavaScript的)
對數(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;
}
}
}
Dom對象 var ele = document.getElementById("btn1");
jQuery對象 var jq = $(ele);
//把dom對象封裝成jQuery對象的方法;
//當(dāng)然,一般也不用這樣麻煩的封裝jq對象,因為我們有選擇器;
//jQuery對象只能調(diào)用jQuery封裝的方法,不能調(diào)用 dom對象原生的屬性或者方法了。
//window.onload事件執(zhí)行是在:頁面上所有的元素都加載完成后(指的:全部下載顯示完畢),才出發(fā)此事件的執(zhí)行。
//有可能頁面中一些較大的圖片或者是flash等阻塞了 js事件響應(yīng)方法的執(zhí)行,導(dǎo)致了頁面的一些效果展示給用戶的時候響應(yīng)速度非常低
//用戶體驗不是很好。
onload = function () {
};
//第一種方式:打醬油的
$(document).ready(function () {
});
//方式二:
//jQuery注冊的方法都是多播委托的形式
//給文檔加載完成【綁定】事件
$(function () {
});
$(function () {
});
1.DOM à Jquery :var dom = $v1.get(0); 或者 var dom = $v1[0];
2.Jquery à DOM :var jq = $( 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>