jquery備忘學習筆記

$.map(array,fn);

對數組array中的每一個元素調用fn函數逐個進行處理，fn函數将處理傳回，最後得到一個新的數組。

var array = {1,2,3};

var array2 = $.map(array,function(item){return item*2;});

注意點：$.map();不能處理Dictionary風格的數組。

$.each(array,fn);

對數組array每個元素調用fn函數進行處理，沒有傳回值。

var array = {"tom":"湯姆","jack":"傑克"};

$.each(array,function(key,value){alert(key+"中文名是:"+value);});

注意點：

函數2個參數，是鍵值對

1個參數，是鍵(索引值0,1,2...) $.each(array,function(item){alert(item);});

0個參數，是值 $.each(array,function(){alert(this);});

普通數組土建使用無參，用Dictionary風格的使用key和value（鍵值對）

jquery對象和Dom對象：

jquery對象就是通過jquery包裝DOM對象後産生的對象。

alert($("#div").html()); DOM對象要想通過jquery進行操作，要首先轉換為jquery對象

無參數取值，有參數指派

$("#div").css("background","red");

$("#div").text();

$("#div").val();

$("#div").val(new Date());

$("#div").html();

$("#div").html("<font color='red'>Hello</font>");

jquery選擇器：

$(function(){

$("#btn").click(function(){ //#是getElementById

$("p").html("我們都是P标簽！"); //getElementByTagName

});

CSS選擇器：同時選擇擁有樣式的多個元素

$(".test").click(function(){

alert($(this).text());

});

多條件選擇器：

$("p,div,span.menuItem");同時選擇p标簽，div标簽和擁有menuItem樣式的span标簽元素

注意：選擇器表達式中的空格不能多也不能少

層次選擇器：

$("div li"); 擷取div下的所有li元素（包括前套下的子嵌套）

$("div > li"); 擷取div下的直接li子元素标記之間有空格

$(".menuItem + div");擷取樣式名為menuItem之後的第一個div元素

$(".menuItem ~ div ");擷取樣式名為menuItem之後的所有div元素

判斷對象是否存在，jquery選擇器傳回的是一個對象數組，調用text(),html(),click()之類方法的時候其實是對數組

中每個元素疊代調用每個方法，是以即使通過id選擇的元素不存在也不會報錯，如果需要判斷指定的id是否存在，如

下：

if($("#btn").length<=0){

alert("id為btn的元素不存在！");

}

節點的周遊：

next()方法用于擷取節點之後的緊挨着的第一個同輩元素

$(".menuItem").next("div");

nextAll()方法用于擷取節點之後的所有同輩元素

$(".menuItem").nextAll("div");

siblings()方法用于擷取所有同輩（兄弟）元素

$(".menuItem").siblings("li");

一系列div标記，當點選一個div時，其後面所有的div背景顔色變紅色顯示

$("div").click(function(){

$.each($(this).nextAll("div"),function(){

$(this).css("background","red");

});

高亮選擇：

$(this).css("background","red");

$(this).siblings("div").css("background","white");

更簡便的寫法

$(this).css("background","red").siblings("div").css("background","white");

一個評分控件實作：

<tr>

</tr>

</table>

$("#ratings td").html("<img src='images/empty.png'/>").onmouseover(function(){

$("#ratings td").html("<img src='images/fill.png'/>");

$(this).nextAll().html("<img src='images/empty.png'/>");

另一種寫法：

$(this).html("<img src='images/fill.png'/>");

$(this).siblings().html("<img src='images/fill.png'/>");

高亮選中項：給所有的menuItem樣式的元素添加Click監聽事件，當click時，向被點選的元素添加這個highlight樣式

，然後從其兄弟節點中移除highlight風格。

$(".menuItem").click(function(){

$(this).addClass("highlight").siblings().removeClass("highlight");;

一些基本的過濾器：

:first 選取第一個元素 $("div:first") 選擇第一個div

:last 選取最後一個元素 $("div:last") 選擇最後一個div

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

:even(奇數) :odd（偶數）

:eq(索引序号) :gt(索引序号) :lt(索引序号)

選取索引序号等于、大于、小于索引序号的元素，比如$("input:lt(5)")選取索引号小于5的input

$(":header")選取所有的h1...h6元素

$("div:animated")選取正在執行動畫的div元素

<div>

<ul>

</ul>

</div>

<div>

<ul>

</ul>

</div>

$("#div1").click(function(){

$("ul",$(this)).css("background","red");

屬性過濾選擇器

$("div[id]") 選擇有id屬性的<div>

$("div[title=test]")

$("div[title!=test]")

表單對象選擇器：(注意沒有空格)

$("#form1:enabled")選擇id為form1的表單内所有啟用的元素

$("#form1:disabled")

$("input:checked") Radio、CheckBox中選中元素

$("select:selected") 下拉清單中所有選擇的元素

<input type="checkbox" name="names" value="tom"/>tom

<input type="checkbox" name="names" value="jack"/>jack

<input type="checkbox" name="names" value="jim"/>jim

$("input[name=names]").click(function(){

var names = $("input[name=names]:checked");

var arr = new Array();

names.each(function(key,value){arr[key]=$(value).val();});

$("#msg").text("共選中:"+names.length+"條資料:"+arr.join(','));

$(":input") 擷取所有的<input>、<textarea>、<select>、<button>元素

$(":text") 選取所有單行文本框

$(":password")選取所有密碼框

$(":radio")

$(":checkbox")

$(":submit")

$(":image")

$(":button")

$(":file")

$(":hidden")

$("a:first").attr("href"); //擷取href屬性

$("a:first").attr("href","http://www.baidu.com"); //設定href屬性

使用removeAttr删除屬性

$("div:first").append($("<a href='www.baidu.com'>百度</a>"));

append 追加在後面

prepend 追加在前面

before

after

var data = ["百度":"http://www.baidu.com","新浪":"http://www.sina.com"];

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

var tr = $("<tr><td>"+key+"</td><td><a href="+value+">"+key+"</a></td></tr>");

$("#tableSite").append(tr);

</select>

$("#moveToRight").click(function(){

var items = $("#select1 option:selected").remove();

$("#select2").append(items);

var v1 = parseInt(val,10); //轉換十進制數字

var intervalId;

var leftSecond = 10;

$(function(){

$("#btnReg").attr("disabled",true);

intervalId= setInterval("CountDown()",1000);

function CountDown(){

if(leftSecond<=0){

$("#btnReg").val("同意");

$("#btnReg").attr("disabled",false);

clearInterval(intervalId);

return;

}else {

leftSecond--;

$("#btnReg").val("請仔細閱讀注冊說明,還剩下:"+leftSecond+"秒結束!");

}

</script>

一系列文本框，當焦點離開時，沒有填寫的内容文本框背景顔色變紅，填寫過的為白色。

$(":text").blur(function(){

if($(this).val.length<=0){

$(this).css("background","red");

}else{

$(this).css("background","white");

}

});

球隊選擇

</ul>

$("#ul1 li").css("cursor","pointer").mouseover(function(){

$(this).css("background","red").siblings().css("background","white");

}).click(function(){

$(this).css("background","white").appendTo($("#ul2"));

});

節點操作

$("br").replaceWith("<hr/>"); 批量替換

$("b").wrap("<font color='red'></font>"); 包裹節點，将所有粗體字紅色顯示

擷取樣式 attr("class")設定樣式 attr("class","myClass1")

追加樣式 addClass("myClass1") 删除樣式 removeClass("myClass1")

toggleClass("myClass")如果樣式存在則去掉樣式，沒有則添加樣式

hasClass("myClass")判斷是否有樣式

網頁開關燈效果，利用toggleClass即可。

body { filter:gray;} //灰白色的過濾器

.night {background-color:black;}

</style>

$(document.body).toggleClass("night");

找一個網頁下所有控件

$("body *")

搜尋框

.waiting{color:gray;}

$("#search").val("請輸入關鍵詞").addClass("waiting").blur(function(){

if($("#search").val()==""){

$("#search").val("請輸入關鍵詞").addClass("waiting");

}

}).focus(function(){

if($("#search").val()=="請輸入關鍵詞"){

$("#search").val("").removeClass("waiting");

}

});

RadioButton操作：

取得RadioButton的選中值

<input type="radio" id="radio1" name="gender" checked="checked" value="男"/>男

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

$("input[name=gender]:checked").val();

設定選中值

$(":radio[name=gender]").val(["女"]); //注意加中括号

checkbox全選，全部選和反選

$("#selectAll").click(function(){

$("#div1 :checkbox").attr("checked",true);

$("#unselectAll").click(function(){

$("#div1 :checkbox").attr("checked",false);

$("#reverse").click(function(){

$("#div1 :checkbox").each(function(){

$(this).attr("checked",!$(this).attr("checked"));

});

hover(fun1,fun2)是mouseenter和mouseleave的綜合

$("p").hover(functon(){$(this).text("滑鼠進入")},function(){$(this).text("滑鼠移出")});

事件冒泡：

</td>

逐個輸出提示 p->td->tr->table

使用事件對象的stopPropagation()方法終止冒泡

$("tr").click(function(e){alert("tr被點選!");e.stopPropagation();}); //注意函數的參數是e

阻止預設行為 preventDefault()方法

$("a").click(function(e){ alert("所有超連結暫時全部禁止點選!");e.preventDefault();});

阻止表單送出

</form>

$(":submit").click(function(e){

if($("#name").length<=0){

alert("使用者名不能為空!");

e.preventDefault();

}

事件的其他屬性：

pageX pageY target獲得觸發事件的元素。which如果是滑鼠事件獲得按鍵（1：左鍵 2：中鍵 3：右鍵）

altKey、shiftKey、ctrlKey獲得alt、shift、ctrl是否按下，為bool值，keyCode、charCode屬性發生時間時的keyCode、charCode。

$("#p1").click(function(e){

alert(e.pageX+":"+e.pageY);

alert($(e.target).html());

one()方法，事件隻觸發一次（一次性觸發事件）。

$(":button").one("click",function(){

alert("按鈕被點選了！");

跟着滑鼠走的圖檔

<div id="fly" style="position:absolute"> //這裡的position要設定成absolute，這樣改變xy坐标才能跟着改變

$("document").mouseover(function(e){

$("#fly").css("left",e.pageX).css("top",e.pageY);

var data = {"0.jpg":["00.jpg","AA","123"],"1.jpg":["11.jpg","BB","234"],"3.jpg":["33.jpg","AA","345"]};

$(fuction(){

var smallImg = $("<img src='>"+key+"'/>");

smallImg.attr("bigImg",value[0]);

smallImg.attr("pname",value[1]);

smallImg.attr("pheight",value[2]);

smallImg.mouseover(function(e){

$("#detailImg").attr("src",$(this).attr("bigImg"));

$("#detailHeight").attr("src",$(this).attr("pheight"));

$("#detailName").attr("src",$(this).attr("pname"));

$("#details").css("top",e.pageY).css("left",e.pageX).css("display","");

});

$("body").append(smallImg);

$("#closeDetail").click(function(){

$("#details").css("display","none");

關于動畫 show()和hide()方法

用toggle()方法在顯示和隐藏之間切換

$(this).hide();

$("#btnToggle").click(function(){

$("#div1").toggle();

show和hide方法内不帶參數就是立即顯示和隐藏，如果帶參數，有fast（200ms）、normal（400ms）和slow（600ms）或者是設定一個時間數值，如1000（1s）

類似QQ的Tab效果實作

ul {list-style-type:none;} //去掉ul前面的小黑點

.header {background:grey;cursor:pointer;}

.body {border-color:blue;border-style:solid;border-width:1px;}

$("#QQ li:odd").addClass("body");

$("#QQ li:even").addClass("header").click(function(){

$(this).next("li.body").show("fast").siblings("li.body").hide("fast");

$("#QQ li:first").click();//模拟點選事件

jquery cookie插件

使用方法，主要有三步：

1、添加對jquery.cookie.js

2、設定值 $.cookie('key','value'),cookie中儲存的值都是文本。

3、讀取值，var v = $.cookie('key');

設定值的時候還可以指定第三個參數：

$.cookie('key','value',{expires:7,path:'/',domain:'www.baidu.com',secure:true});

expires表示要求浏覽器保留cookie幾天，這個值隻是給浏覽器的建議。

jquery備忘學習筆記

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條