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選擇器：同時選擇擁有樣式的多個元素

<p class="test">AA</p>
<p class="test">BB</p>
<p class="test">CC</p>
$(function(){
    $(".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");
    });
});

高亮選擇：
$("div").click(function(){
   $(this).css("background","red");
   $(this).siblings("div").css("background","white");
});

更簡便的寫法
$("div").click(function(){
   $(this).css("background","red").siblings("div").css("background","white");
});

一個評分控制元件實現：
<table id="ratings">
   <tr>
      <td></td><td></td><td></td><td></td><td></td>
   </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'/>");
});
另一種寫法：
$("#ratings td").html("<img src='images/empty.png'/>").onmouseover(function(){
   $(this).html("<img src='images/fill.png'/>");
   $(this).siblings().html("<img src='images/fill.png'/>");
   $(this).nextAll().html("<img src='images/empty.png'/>");
});

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

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

$(function(){
  $(".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>
   <div id="div1">
        <ul>
            <li>AA</li>
            <li>BB</li>
        </ul>
   </div>
   <div>
       <ul>
           <li>CC</li>
           <li>DD</li>
       </ul>
   </div>
</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
<p id="msg"/>

$(function(){
    $("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

<table id="tableSite">
</table>

$(function(){
   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 style="float:left" id="select1" multiple="multiple">
   <option>新增</option>
   <option>修改</option>
   <option>刪除</option>
</select>
<div style="float:left">
   <input type="button" id="moveToRight" value=">">
</div>
<div id="select2" multiple="multiple">
</div>

$(function(){
    $("#moveToRight").click(function(){
       var items = $("#select1 option:selected").remove();
       $("#select2").append(items);
  });

});

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

<textarea>註冊須知</textarea>
<input type="button" id="btnReg" value="註冊"/>

<script type="text/javascript">
   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>

一系列文字框，當焦點離開時，沒有填寫的內容文字框背景顏色變紅，填寫過的為白色。
<input type="text"/><input type="text"/><input type="text"/><input type="text"/>
$(function(){
     $(":text").blur(function(){
       if($(this).val.length<=0){
         $(this).css("background","red");
      }else{
         $(this).css("background","white");
      }   
   });
 });

球隊選擇
<ul id="ul1" style="float:left;width:200px">
   <li>AA</li>
   <li>BB</li>
   <li>CC</li>
   <li>DD</li>
</ul>
<ul id="ul2" style="float:left;width:200px">
</ul>

<script type="text/javascript">
   $(function(){
      $("#ul1 li").css("cursor","pointer").mouseover(function(){
         $(this).css("background","red").siblings().css("background","white");
     }).click(function(){
          $(this).css("background","white").appendTo($("#ul2"));
       });
  });
</script>

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

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

獲取樣式 attr("class")設定樣式 attr("class","myClass1")
追加樣式 addClass("myClass1") 刪除樣式 removeClass("myClass1")
toggleClass("myClass")如果樣式存在則去掉樣式，沒有則新增樣式
hasClass("myClass")判斷是否有樣式

網頁開關燈效果，利用toggleClass即可。
<style type="text/css">
   body { filter:gray;} //灰白色的過濾器
   .night {background-color:black;}    
</style>
$(document.body).toggleClass("night");

找一個網頁下所有控制元件
$("body *")

搜尋框
<style type="text/css">
   .waiting{color:gray;}
</style>
<script type="text/javascript">
   $(function(){
     $("#search").val("請輸入關鍵詞").addClass("waiting").blur(function(){
          if($("#search").val()==""){
             $("#search").val("請輸入關鍵詞").addClass("waiting");
         }
       }).focus(function(){
           if($("#search").val()=="請輸入關鍵詞"){
              $("#search").val("").removeClass("waiting");               
            }
         });
 });

</script>

<input type="text" id="search"/>


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全選，全部選和反選
$(function(){
   $("#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("滑鼠移出")});


事件冒泡：
<table onclick="alert('table')">
   <tr onclick="alert('tr')">
      <td onclick="alert('td')">
          <p onclick="alert('p')"/>
      </td>
   </tr>
</table>
逐個輸出提示 p->td->tr->table

使用事件物件的stopPropagation()方法終止冒泡
$("tr").click(function(e){alert("tr被點選!");e.stopPropagation();}); //注意函式的引數是e

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

阻止表單提交
<form action="www.baidu.com">
  <input type="text" id="name"/>
  <input type="submit" value="提交"/>
</form>

$(function(){
   $(":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()方法，事件只觸發一次（一次性觸發事件）。

<input type="button" value="按鈕"/>

$(function(){
   $(":button").one("click",function(){
        alert("按鈕被點選了！");  
   });
});

跟著滑鼠走的圖片
<div id="fly" style="position:absolute">  //這裡的position要設定成absolute，這樣改變xy座標才能跟著改變
  <img src="logo.jpg"/>
</div>
$(function(){
  $("document").mouseover(function(e){
    $("#fly").css("left",e.pageX).css("top",e.pageY);
  });
});


<div  style="display:none;position:absolute" id="details">
   <img src="" id="detailImg"/>
   <p id="detailHeight"></p>
   <p id="detailName"></p>
   <p><input type="button" value="關閉" id="closeDetail"/></p>
</div>

var data = {"0.jpg":["00.jpg","AA","123"],"1.jpg":["11.jpg","BB","234"],"3.jpg":["33.jpg","AA","345"]};
$(fuction(){
   $.each(data,function(key,value){
      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()方法在顯示和隱藏之間切換
$("#div1").click(function(){
    $(this).hide();
});


$("#btnToggle").click(function(){
    $("#div1").toggle();
});

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


類似QQ的Tab效果實現

<style type="text/css">
  ul {list-style-type:none;} //去掉ul前面的小黑點
  .header {background:grey;cursor:pointer;}
  .body {border-color:blue;border-style:solid;border-width:1px;}
</style>

<ul id="QQ">
  <li>我的好友</li>
  <li>AA<br/>BB</li>
  <li>我的同學</li>
  <li>CC<br/>DD</li>
  <li>陌生人</li>
  <li>EE<br/>FF</li>
</ul>
$(function(){
   $("#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幾天，這個值只是給瀏覽器的建議。