jQuery的筆記

1. 排除頭部給行添加樣式
例如:
<table>
 <thead>
    <tr><th>姓名</th></tr>
 </thead>
 <tbody>
    <tr><td>梁繼龍</td><td>男</td><td>廣東陽春</td></tr>
 </tbody>
</table>
//實現
$(function(){
 $('tbody>tr:odd').addClass('odd');  //給tbody中的奇數行添加樣式
 $('tbody>tr:even').addClass('even');  //給tbody中的偶數行添加樣式
}); 
2．普通的隔行變色
CSS代碼　
　.even{background:#FFFFFFF} //偶數行樣式
　.odd{background:#FFFFFFF} //奇數行樣式
實現
$(function(){
 $('tr:odd').addClass("odd");  　//給偶數行添加樣式
 $('tr:even').addClass("even");  //給奇數行添加樣式
})
 
/*注意:$('tr:odd')和$('tr:even')選擇器中索引是從0開始的，所以第一行是偶數
*/
 

3. 單選框控制表格行高亮
例如:給單擊的當前行添加高亮，而後將它的兄弟行的高亮樣式去掉，最後將當前行裏的單選設置爲選中
$('tbody>tr:').click(function(){
 $(this).addClass('selected').siblings().removeClass('selected').end()
 .find(':radio').attr('checked',true);
});
4. 處理默認已經有單選框被選中
$("table:radio:checked").parent().parent().addClass('selected');
//或者
$('table:radio:checked').parents('tr').addClass('selected');
5. 經過has選擇器進一步簡化，表示含有選中的單選框的<tr>行將被高度顯示
$('tbody>tr:has(":checked")').addClsss('selected');

6.複選框控制表格行高亮
注意:複選框與單選框不一樣，它並無限制被選擇的個數
例如:若是已經高亮了，則移除它並去掉當前複選框的選中的狀態，若是沒有，則添加樣式並將當前行的複選框選中。
$('tbody>tr').click(function(){
 if($(this).hasClass('selected')){  //判斷是否有selected高度樣式
  $(this).removeClass('selected').find(':checkbox').attr('checked',false);
 }else{
   $(this).addClass('selected').find(':checked').attr('checked',true);
 }
})
//或者用三元運算實現
$('tbody>tr').click(function(){
 //判斷當前是否選中
 var hasSelected=$(this).hasClass('selected');
 //若是選中,則移出selected類,不然就加上selected類
 $(this)[hasSelected?"removeClass":"addClass"]('selected')
 //查找內部的checkbox,設置對應的屬性
 .find(':checked').attr("checked",!hasSelected);
});
------------------------------------------------------------------------------------------
表格展開關閉實例
$(function(){
 $('tr.parent').click(function(){
  $(this).toggleClass('selected')
 .siblings('.child'+this.id)+toggle();   //隱藏/顯示的子行  (.chlid_+this.id)表 示.child class=".child"+某個值即:例如:.child1 或.child2
 })
});
表格的內容篩選
例如:高度顯示王五
 $(function(){
 $("table tbody tr").hide()fileter(":contains(王五)").show();
});
   ////----------------表單對象屬性過慮示例--------------///
1.改變表單內可用<input>元素的值 
  $(#form1 input:enabled).val("這裏變化了");
2.改變表單內不可用<input>元素的值 
  $(#form1 input:disabled).val("這裏變化了");
3.得到多選框選中的個數
  $("input:checked").length
4.得到下拉框選中的內容
  $("select:selected").text();
5.選中全部<input>、<textarea>,<select>和<button>元素 
  $(":input")
6.選中全部的上傳域
 $(":file")
7.總結：其餘屬性的全部選中都是$(":+屬性類型")
  例如:  $("image")   ....
8.選擇第一個元素
  :first
  $('div:first')選取全部<div>元素中第一個<div>元素
9.選取最後一個元素
  :last
  $("div:last")選取全部<div>元素中最後一個<div>元素
10.去除全部與給定選擇器匹配的元素
  :not(selector)
  $('inptu:not(.myClass)')選取clas不是myClass的<input>元素
11.選取索引是偶數的全部元素,索引從0開始
  :even
  $("input:even")選取索引是偶數的<input>元素
12.選取索引是奇數的全部元素,索引從0開始
  :odd
  $("input:odd")選取索引是奇數的<input>元素
13.選取索引是等於index的元素(索引從0開始)
  :eq(index)
  $("input:eq(1)")選取索等於1的<input>元素
14.選取索引是大於index的元素(索引從0開始)
  :gt(index)
  $("input:gt(1)")選取索大於1的<input>元素  //注意:大於1,而不包括1
15.選取索引是小於index的元素(索引從0開始)
  :lt(index)
  $("input:lt(1)")選取索小於1的<input>元素  //注意:小於1,而不包括1
16.選取全部的標題元素,例如h1 h2....
  :header
  $(":header")選取網頁中全部的<h1>....
17.選取當前正在執行動畫的全部元素
  :animated
  $('div:animated')選取當前正在執行動畫的<div>元素
//-----------------------事件綁定方法和方法的使用-----------------------
bind()方法
bind(type[,data],fn);
合成事件
1.hover()方法
 語法: hover(enter,leave);
 hover()方法
 準確來講代替bind("mouseenter") and bind("mouseleave")而不是代替bind("mouseover"); and bind("mouseout")
2. toggle()方法
語法  toggle(fn1,fn2,fnN);  fn1 到fnN依次被觸發直到完畢
3 .event.stopPropagation() //中止事件冒泡
4.event.preventDefault() //阻止默認行爲
5. event,target()方法
做用因而獲取觸發事件的元素
alert(event.target.href) //獲取觸發事件的<a>的href屬性值
6. event.relateTarget()方法
   mouseover和mouseout所發生的元素能夠經過event.target()方法來訪問
  event.relateTarget()方法在mouseover中至關於IE瀏覽器的event.fromElement()方法
  在mouseout中至關於IE瀏覽器的event.toElement()方法
7.event.pageX()方法和event.pageY()方法
做用是獲取到光標相對於頁面的x座標和y座標 
注意:若是沒有使用jquery時,IE瀏覽器是用event.x()/event.y()方法,而Firefox瀏覽器中用.event.pageX()/event.pageY()方法
8.event.which()方法
做用是在鼠標事件中獲取到鼠標的左,右,中鍵.在鍵盤事件獲取鍵盤的按鍵
$( function(){
   $("body").mousedown(function(e){
   alert(e.which);  //1=左鍵      2=中   ,3=右
  })
})

9.event.metaKey()方法
針對不一樣瀏覽器對鍵盤中的<ctrl>按鍵解釋不一樣,在jquery並規定event.metaKey()方法爲鍵盤事件中獲取<ctrl>按鍵
10.event.originalEvent()方法
做用指向原始的事件對象

11.fadeIn()和fadeOut()方法
.fadeIn()和fadeOut()只是改變元素的不透明度
fadeOut方法會指定的一段時間下降元素的不透明度,直到元素徹底消失,而fadeOut()剛相反

12.slideUp()和slideDown()方法
  只是改變元素的高度,若是一個元素的display屬性值爲none當調用slideDown()時,這個元素將會由上至下延伸顯示,slideUp正好相反,從下到上縮短隱藏.
 

1.offset()方法
  它的做用是獲取元素在當前視窗的相對偏移
  例如:
   var $offset=$('p').offset();  //獲取<p>元素的offset() 
   var $left=$offset.left;   //獲取左邊偏移
 
2.position()方法
    做用是獲取相對於最近的一個position樣式屬性爲relative或absolute的祖父節點的相對偏移,與offset()同樣
 它返回的對象也包括兩個屬性,即top和left
  例如:
  var $p=$('p').position() ;     //獲取<p>元素的position
  var $left=$p.left/top;     //獲取左邊/頭的偏移 

3.scrollTop()和scrollLeft()方法
  它們的做用分別是獲取元素的滾動條距頂端的距離和距左側的距離
  
 var $p=$('p');
 var $sT=$p.scrollTop(); //獲取元素的滾動條距頂端的距離
 var $sL=$p.scrollLeft(); //獲取元素的滾動條距左側的距離
//或者指定參數
 $('textarea').scrollTop(300 );  //元素的垂直滾動條到指定的位置
3-1-1
1.使用HTML-DOM來獲取表單對象的方法
document.forms  //html-dom提供一個forms對象
2.使用HTML-DOM來獲取元素的SRC屬性的方法
element.src
3-2-1
找節點
var $li = $("ul li:eq(1)");  //獲取<ul>裏第二個<li>節點
3-2-2
查找屬性節點
** attr() 方法能夠獲取各類屬性的值,而且方法能夠放參數
   eg:
 var   $p=$("p");        //獲取<p>節點
 var   p_txt=$p.attr("title");  //獲取<p>元素節點屬性title
3-2-3
建立節點
例如:建立<li>
</li>子節點到<ul>
下方
var $li=$("<li></li>");  //建立了一個子節點
$("ul").append("$li");      //把子節點添加到<ul>下方
****
注意:
     1.動態建立的新元素節點不會被自動添加到文檔中.
     2.當建立單個元素時,要注意閉合標籤和使用標準的XHTML格式.例如:建立 一個<p>元素,能夠用$("<p/">)或者$("<p></p>"),可是不要使用$("<p>")或者大寫$("P/");
 
插入節點的方法
1   append()  向每一個匹配的元素內部追加內容
eg:
html代碼:
<p>我想說:</p>
jQuery代碼
$("p").append("<b>你好</b>")
結果:
<p>我想說:<b>你好</b><p/>
2   appendTo()  將全部匹配的元素追加到指定的元素中實際上,顛倒了常規$(A).append(B)的操做即不是將B追加到A中,而是將A追加到B中
eg:
html代碼:
<p>我想說:</p>
jQuery代碼
$("<b>你好</b>").append("p")
結果:
<p>我想說:<b>你好</b><p/>
3.prepend()   向每一個匹配的元素內部前置內容
eg:
html代碼:
<p>我想說:</p>
jQuery代碼
$("p").prepend("<b>你好</b>");
結果:
<p><b>你好</b>我想說:<p/>
4  prependTo()  將全部匹配的元素前置到指定的元素中實際上,顛倒了常規$(A).append(B)的操做即不是將B前置到A中,而是將A前置到B中
eg:
html代碼:
<p>我想說:</p>
jQuery代碼
$("<b>你好</b>").append("p")
結果:
<p>我想說:<b>你好</b></p>

5.after()在每一個匹配的元素以後插入內容
html代碼:
<p>我想說:</p>
jQuery代碼
$("p").after("<b>你好</b>");
結果:
<p>我想說:</p><b>你好</b>
------------------------------------------複選框、下拉框-------------
//全選
$("#checkedAll").click(function(){    //checkedAll被點擊的ID
    $('[name=items]:checkbox').attr('checked',true)   //items被選name
}) 
//全不選
$("#checkedNo").click(function(){    //checkedNo被點擊的ID
    $('[name=items]:checkbox').attr('checked',false)   //items被選name
})
//反選
$("#checkedReturn").click(function(){    //checkedReturn被點擊的ID
    $('[name=items]:checkbox').each(function(){         //each是遍歷循環
 $(this).attr("checked",!$(this).attr("checked"));
   })   
}) 
或者
$("checkedReturn").click(function(){
 $('[name=items]:checkbox').each(function(){
 this.checked=!this.checked;
 })
});

//彈出被選的提交
$("#send").click(function(){
   var str="你 選中的是:\r\n";
   $('[name=items]:checkbox:checked').each(function(){
   str +=$(this).val()+"\r\n";
 });
   alert(str);
});

$('[name=items]:checkbox').click(function(){
var $st=$('[name=items]:checkbox');
$('#che').attr('checked'),$st.length==$st.filter(':checked').length
});

-----------------------------------------------------------------
假設將左邊的選項添加到右邊
$('#add').click(function(){    //dblclick --雙擊事件
    var $options=$('select1 option:selected');  //獲取選中的選項
   // var $remove=$options.remove();   //刪除下拉框列表中選中的選項
    $remove.appendTo("select2");;   //追加給對方
});
------------------------------------------------------------顯示和隱藏效果-----------
1.show()和hide()方法讓元素動起來
例如:指定一個速度關鍵字slow /normal /fast
$("element").show("slow");
2.指定時間使元素在時間內顯示/;隱藏
$("element").show(1000); 
$("element").hide(1000);
3.next的使用
$(this).next("div.content").hide(500);
4.自定義動畫animate()
語法:animate(params,speed,callback);
說明: parms:一個包含樣式屬性及值的映射,例如:{property1:"value1", ..........}
 speed:速度參數,可選
 callback:在動畫完成時執行的函數,可選
5.累加和累減動畫
"+ =" 或   "-  ="表示在當前位置累加/減
$(function(){
 $("#pane1").click(function(){
 $(this).animate({left: "+=500px"},300); //在當前位置累加500px
    });
});

6.多重動畫
A. 同時執行多個動畫
 eg: 在元素向右滑動的同時,放大的高度.
  $(function(){
     $("#myImag").click(function(){
      $(this).animate({left:"500px",height:"200px"},3000);
        //或者
       //$(this).animate({left:"500px"},3000).animate({height:"200px"},3000);
  })
})

7.綜合動畫
單擊<div>向右移動並增大高度,將它的不透明從50%變換到100%,而後讓它從上到下移動,同時它的寬度變大
當完成這些效果,讓它以談出的方式隱藏
$(function(){ 
     $("#pane1").css("opacity","0.5"); //(opacity)設置不透明度
        $("#pane1").click(function()){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
       .animate({top:"200px",with:"200px"}, 3000).fadeOut("slow");
  }
})
8.中止動畫和判斷是否處於動畫狀態
語法:stop([clearQueue][,gotoEnd]);
   clearQueue表明是否要清空未執行完的動畫隊列,  gotoEnd表明是否直接將正在執行的動畫跳轉到未狀態
 

   -----------層次選擇器----------
選擇器
  1.$('ancestor descendant')
  選取ancestor 元素裏的全部descendant(後代)元素
  $('div span')選取<div>裏的全部的<span>元素
  2.$('parent>child')
  選取parent元素下的child(子元素)與$('ancestor descendant')
  有區別,$('ancestor descendant')選擇後代元素
  3.$('prev+next')
   選擇緊接在prev元素後的next元素
   $('.one+div')選取class爲one的下一個<div>元素
  4.$('prev~siblings')
   選取prev元素以後的全部siblings
   $('#two~div')選取ID爲two的元素後面的全部<div>兄弟元素
   -------------------------------------------------------------選擇器的認識-----------------------------------
//注意:
  1.3.1版本完全放棄1.1.0版本遺留下的@符號,若是使用1.3.1以上的版本
那麼不能在屬性前添加@符號
Eg:
  $('div[@title="test"]')   //這是錯誤的
  $('div[title="test"]')   //這是正確的
1.帶空格的選擇器與不帶選擇器的區別
 eg:
  var $a=$('.test :hidden');
  var $b=$('.test:hidden');
 輸出長度
 var $a_len=$a.length;  //輸出4
 var $b_len=$b.length;  //輸出3
選擇器
 1. #id根據給定ID匹配一個元素，返回單個元素
 2 .class根據給定的類名匹配元素,返回集合
 3. element根據給定的元素名匹配元素,返回集合
   $('p') //選中全部的<p>元素
 4. *匹配全部元素,返回集合
5. selector1,selector2,...將每個選擇器匹配到的元素合併後一塊兒返回
  $('div,span,p.myClass')選取全部<div>,<span>,和擁有class爲myClass的<p>標籤的一組元素

1.改變id爲one的元素的背景
 $('one').css("background","bEEEEE");
2.改變class爲mini的全部元素的背景色
 $('.mini').css("background","bEEEEE");
3.改變元素名是<div>的全部元素的背景
 $('div').css("background","bEEEEE");
4.改變全部元素的背景色
 $('*').css("background","bEEEEE");
5.改變全部的<span>元素和id爲two元素的背景色
 $('span,#two').css("background","bEEEEE");

 //$('prev+next')選擇器與next()方法等價關係
  $('.one+div') 等價   $('.one').next("div");
  $('#prev+div') 等價  $('#prev').nextAll("div");
triggerHandler和trigger區別.txt
1.trigger("blur')不只會觸發爲元素邦定的blur事件,也會觸發瀏覽器默認的blur事件,即不能將瀏覽器光標定位到文本框上,而triggerHandler("blur")只會觸發爲元素邦定的blur事件,而不會觸發瀏覽器默認的的blur事件
2.執行默認操做
若是隻想觸發綁定的focus事件,而不想執行瀏覽器默認操做用 triggerHandler()方法
$("input").triggerHandler("focus");

$("div").trigger("click!");   //感嘆號的做用是匹配全部不包含在命名空間中的click方法
 
---------------------------1.移除事件---------------
1.移除全部click事件
$('#delall').click(function(){$("#btn").unbind("click")});
或者$("delall").click(function(){$("#btn").unbind()})

2.移除單個事件
$("delOne").click(function(){$("#btn").unbind("click",myOnes)})
3.移除節點,remove()和empty()
1).remove()方法的做用是從DOM中全部匹配的元素，傳入的參數用於根據jquery表達式來篩選元素
 Eg:從<ul>節點中的第二個<li>元素節點
 $('ul li:eq(1)').remove();  //獲取第二個<li>元素節點後,將它從網頁中刪除
 //或者刪除以後再從新添加到<ul>元素裏
 var $li=$('ul li:eq(1)').remove();
 $li.appendTo('ul');  //添加/追加到Ul元素裏
 2).empty()方法並非刪除節點，而是清空，它能清空元素中的全部的後代節點
 $('ul li:eq(1)').empty();
1.查找元素節點
 var $li==$('ul li:eq(1)');  //獲取<ul>裏第2個<li>節點
 var li=$li.text();   //獲取第2個<li>元素節點的文本內容
2.查找屬性節點
 var $p=$('p');    //獲取<p>節點
 var p_txt=$p.attr('title');  //獲取<p>元素節點屬性title