Web前端基礎——jQuery（三）_ZenDei技術網路在線

本文主要從以下幾方面介紹jQuery應用中的內容： 1 jQuery 節點遍歷2 jQuery 中的過濾器3 jQuery 屬性操作4 jQuery Dom節點操作5 幾個jQuery例子6 jQuery 中的事件7 jQuery 中的動態效果一、 jQuery 節點遍歷 == next() // ...

本文主要從以下幾方面介紹jQuery應用中的內容：

1 jQuery 節點遍歷
2 jQuery 中的過濾器
3 jQuery 屬性操作
4 jQuery Dom節點操作
5 幾個jQuery例子
6 jQuery 中的事件
7 jQuery 中的動態效果

一、 jQuery 節點遍歷

== next() //用於獲取節點之後的第一個同輩元素註意,next() 中可以加過濾器例如 next("div")

== nextAll() //獲取節點之後的所有同輩元素(註意: 是節點之後,這一點是和siblings不同的)

<html>
     <head>
      <script type="text/javascript" src="js\jquery-1.4.4.js"></script>
      <script type="text/javascript">
       $(function(){
        $("#ulAAAA li").click(function(){
         $(this).css("background","yellow");
         $(this).next().css("background","pink");
        });
       });
      </script>
     </head>
     <body>
      <form>
            <table id="table1" width="80%" border="1" cellspacing=0>
            <tr><td>姓名</td><td>年齡</td><td>職業</td><td>愛好</td></tr>
            <tr style="display:none"><td>楊帆</td><td>38</td><td>運營</td><td>唱歌（這一行不可見）</td></tr>
            <tr><td>王小花</td><td>23</td><td>設計師</td><td>繪畫</td></tr>
            <tr><td>張明明</td><td>34</td><td>產品經理</td><td>書法</td></tr>
            <tr><td>趙志明</td><td>21</td><td>大學生</td><td>電腦</td></tr>
            <tr><td>馬大利</td><td>46</td><td>董事長</td><td>旅游</td></tr>
            </table>
      </form>
      <ul id="ulAAAA">
       <li>劉備</li>
       <li>關羽</li>
       <li>張飛</li>
       <li>諸葛</li>
       <li>孫權</li>
       <li>曹操</li>
       </ul>
     </body>
</html>

==siblings() //獲取所有的同輩元素 (可以不是同類的,只要是同輩就行) 註意它也可以傳參例如 siblings(li)

//表格的被點擊行高亮 : 
("#table1 tr").click(function(){
   $(this).css("background","pink");
   $(this).siblings().css("background","white");
});

//用鏈式風格寫:  
//本例為用滑鼠滑過的時候,加亮滑過的表格
$("#table1 tr").mouseover(function(){
$(this).css("background","springgreen").siblings().css("background","white");
     });

//星級評分的例子     
     $(function(){
     $("#table2 td").html("<img src='star.jpg' />");
     $("#table2 td").mouseover(function(){
     $("#table2 td").html("<img src='star2.jpg' />" );
     $(this).nextAll().html("<img src='star.jpg' />" );
    });
});

二、jQuery 中的過濾器

$("#table1 tr:eq(3)").css("background","green"); //將table1中第四行置成綠色 這是前面用的
$("#table1 tr").eq(2).css("background","red");  //這個用的是過濾

註意: 過濾與上面的不同之處在於,過濾,是對已選出來的元素,再進行過濾

例子：

//第一行加大,變粗體
$("#tableScore tr:first").css("font-size","35").css("font-weight","bold");
//第二,三,四行變紅
$("#tableScore tr:gt(0):lt(3)").css("color","red") //註意,它是從前一個gt(0)選擇後的集合中再過濾
//最後一行背景變綠色
$("#tableScore tr:last").css("color","green")
//改變最後一行,最後一個單元格的文字
$("#tableScore tr td:last").html("打狼了");
//隔行變色
$("#tableScore tr:gt(0):even").css("background","pink"); //註意,隔行變色,要把第一行刨出去,所以用了 gt(0)
//$("#table1 tr:gt(0):even").css("background","pink").next().css("background","silver") 這樣也行, next() 取的是該奇數行下麵的一行

三、jQuery 屬性操作

在幫助文檔的屬性標簽下,有三大類屬性 CSS HTML代碼,文本/值

== 屬性

--attr(key,value) //為所有匹配的元素設置一個屬性值

<img />     <img />
$("img").attr("src","star2.jpg").attr("title","這是動態加上的屬性");

--attr(key)

alert($("img").attr('src'));             

alert($("img").attr('dog')); //可以取自己寫上去的屬性值

--attr(properties) // 將一個“名/值”形式的對象設置為所有匹配元素的屬性(即可同時設置多個屬性)

$("img").attr({ src: "test.jpg", alt: "Test Image" });

--removeAttr //移除屬性

$("img").removeAttr("src");

== CSS

--addClass(class) //為每個匹配的元素添加指定的css類名,註意,它會進行疊加

//例子,點擊一個按紐,給一個<p>加上樣式
.waring{
    color: red;
}
   <p> dog</p>
     $("button").click(function(){
     $("p").addClass("waring");
});

//  例子,處理文本框的得到焦點和失去焦點事件
$(function(){
$("#userName").focus(function(){
$("#lblMsg").removeClass("ok").addClass("info");
}).blur(function(){
$("#lblMsg").removeClass("info").addClass("ok");
    });
});

// 上例也可以這樣寫
$(function(){
$("#userName").focus(function(){
$("#lblMsg").attr("class","info");   //這裡的class 也可以寫成 className
                              }).blur(function(){
$("#lblMsg").attr("class","error");
                              });
    });        
});

--toggleClass(class) //如果存在（不存在）就刪除（添加）一個類

--removeClass([class]) // 刪除css

$("p").removeClass("waring");

== 文本/值

--html() //取得第一個匹配元素的html內容

--html(val) //設置每一個匹配元素的html內容

--text() //略

--text(val) //略

--val() //獲得第一個匹配元素的當前值

註意：在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多選，將返回一個數組，其包含所選的值。

$(function(){
$("button").click(function(){
$("p").empty();
$("p").append(
  "單選的值:"+$("#country").val() +"<br>"+ "多選的值" +$("#badMan").val().join('-')
   );
});
 });
<select id="country">
  <option>中國</option>
  <option selected>德國</option>
  <option>馬來西亞</option>
</select>
                                        
<select id="badMan" multiple="multiple">
  <option selected="selected">安倍晉三</option>
  <option>秦檜</option>
  <option selected="selected">奧八馬</option>
</select>
<p>
.......
</p>

-- val(array) // checkbox,select,radio等都能使用為之賦值

<select id="country">
   <option>中國</option>
   <option>德國</option>
   <option>馬來西亞</option>
</select>
                                
   <hr>
                                    
<select id="badMan" multiple="multiple">
   <option selected="selected">安倍晉三</option>
   <option>秦檜</option>
   <option >奧八馬</option>
</select>
                                    
<hr>
  <input type="checkbox" value="西瓜"/> check1
  <input type="checkbox" value="魚"/> check2
  <input type="radio" value="水蜜桃"/> radio1
  <input type="radio" value="蝦"/> radio2
                                    
<button>開選</button>
                            
$("button").click(function(){
$("#country").val("馬來西亞");
$("#badMan").val(["奧八馬", "秦檜"]); //給能多選的下拉框同時選兩個值
$("input").val(["魚", "蝦"]);
});

四、jQuery Dom節點操作

在幫助文檔的文檔處理項下,有四大類內部插入,外部插入,包裹,替換,刪除,複製動態創建Dom結點，使用 $(html字元串)來創建Dom結點,並且返回一個jQuery對象，然後調用append等方法,將新創建的節點添加到Dom中。

//例:
$("#divNewNode").append("<a href='http://www.sin.com'>新浪</a>"); // 這個沒有使用$強轉也行,在幫助手冊中,就沒有使用強轉
  <% List<CateInfo> cateList=CateDao.getCateList(); %>
  <% for(CateInfo c:cateList) { %>
$("#select1").append("<option value='<%=c.getCateId()%>'><%=c.getCateName()%></option>");
  <%
   }
  %>
});
                                
                                            
 var link=$("<a href='http://www.sin.com'>餿狐</a>"); //本例使用了強轉
 link.css("font-size",30); //因為強轉後的對象就是一個jQuery對象,所以可以使用jQuery的任何方法
$("#divNewNode").append(link);

== 內部插入

---append(content) //向每個匹配的元素內部追加內容。上例用的就是這個方法

---prepend(content) //向每個匹配的元素內部前置內容。

<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>");

例子:根據給定數據,動態創建一個table

var tData={"陳某":"95","張某某":"80","孫某某":"80","範跑跑":"56","楊達才":"80"};
$.each(tData,function(key,value){
var tr="<tr><td>"+key+"</td><td>"+value+"</td></tr>"  這裡為什麼沒寫 value.value? 因為它不是對象類型的,就是一個常量
$("#tableBBB").append(tr);
});

== 外部插入

----after(content) // $("p").after("<b>Hello</b>"); 註意它是添加兄弟

----before(content)

== 刪除

--- remove([expr]) //從DOM中刪除所有匹配的元素。這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外，其他的比如綁定的事件，附加的數據等都會被移除

<p>哈嘍</p>你<p>好</p>

$("p").remove(); //結果  你

註意:remove 方法,有返回值,返回被刪除的結點對象,還可以繼續使用被刪除的節點,比如將其移動到別的地方

比如：

ar list=$("#ul1 li").remove();

$("#ul2 ").append(list);

其實寫成一句即可 $("#ul2 ").append($("#ul1 li").remove());

--- empty() ///刪除匹配的元素集合中所有的子節點

<p>Hello, <span>Person</span> <a href="#">and person</a></p>        
$("p").empty(); // <p></p>

--- detach([expr]) //從DOM中刪除所有匹配的元素這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數據等都會保留下來。

//例子:
<style type="text/css">
.shengxiu{background:pink        }
</style>
                    
    <ul id="ulRemove">
        <li>劉備</li>
        <li class="shengxiu">關雨生鏽了</li>
        <li>張非</li>
        <li class="shengxiu">孫權生鏽了</li>
        <li>黃蓋</li>
        <li class="shengxiu">呂布生鏽了</li>
    </ul>    
<button id="btnRemove">除銹</button>    
$("#btnRemove").click(function(){
$("#ulRemove li.shengxiu").remove();        
});

//許可權列表的添加
<select id="selRole" multiple="multiple" style="width:15%; height:15%"> 
    <option>增加</option>
    <option>刪除</option>
    <option>修改</option>
    <option>查詢</option>
</select>    
<button id="btnGo" >>></button>
                    
    $("#btnGo").click(function(){
    $("#descRole").append(    
        $("#selRole option:selected").remove());    
});

五、幾個jQuery例子

//例一：設置一排覆選框,在勾選時,將已經勾選的項取出,列在一個<p>內
<input type="checkbox" name="ckStudent" value="趙明明">趙明明
<input type="checkbox" name="ckStudent" value="楊顯彪">楊顯彪
<input type="checkbox" name="ckStudent" value="矯咪">矯咪
<input type="checkbox" name="ckPerson" value="楊國福">楊國福  //註意,它的name與其他不同,要過濾掉
<input type="checkbox" name="ckTeacher" value="老王頭">老王頭 //註意,它的name與其他不同,要過濾掉
                
    <p id="pMsg"> </p>
                
    $("input[name=ckStudent]").click(function(){
    var array=new Array();
    $("input[name=ckStudent]:checked").each(function(key,obj){
        array[key]=obj.value;
                          }); 

   /* 這是以前用過的,也可以
      $.each($("input[name=ckStudent]:checked"),function(key,obj){
         array[key]=obj.value;
                          });
  */

    $("#pMsg").text(" 共選中了"+array.length+"項   "+ array.join(","));
                         
});

//例二,計算器
<input type="text" id="num1" />+<input type="text" id="num2"/><button id="btnAdd" >=</button><input type="text"  id="num3" />
 $("#btnAdd").click(function(){
    var num1=$("#num1").val();
    var num2=$("#num2").val();
                                    
    var result= parseInt(num1)+parseInt(num2);
 $("#num3").val(result);
});

//例三 10秒鐘後可用的按鈕
var second=10;
var interval;
                      
$(function(){
$("#btnArgee").attr("disabled" ,true );
                             
 interval=setInterval("tick()",1000);    
});
                        
 function tick(){
 if(second ==0){
$("#btnArgee").val("同意");
$("#btnArgee").attr("disabled" ,false );
 clearInterval(interval);
               }
else{
$("#btnArgee").val("看好點協議內容,你還有 "+second-- +" 秒");
               }
}
                 
<button id="btnArgee">  </button>

//例子 
$(function(){
$("#btnPub").click(function(){
                                 
var title=$("#txtTitle").val();
var content=$("#txtContent").val();
                                 
var tr="<tr><td>"+title+"</td><td>"+content+"</td></tr>";
                                  
$("#tableTTT").append(tr);
                                 
   });
});
                        
<p>十一快放假了,都樂的不是動靜了</p>
                            
   <table id="tableTTT">
   <tr><td>匿名</td><td>沙發</td></tr>
   </table>
                            
   <input type="text" id="txtTitle" /> <br />
   <textarea id="txtContent" rows="10" cols="30"></textarea>
                            
<button id="btnPub">發佈</button>

//例子 選擇水果
<ul id="uiShuiguo">
    <li>香蕉</li>
    <li>蘋果</li>
    <li>哈蜜瓜</li>
    <li>芒果</li>
    <li>草梅</li>
    <li>水蜜桃</li>
</ul>
                      
$("#uiShuiguo li").css("cursor","pointer").mouseover(function(){
$(this).css("background","springgreen").siblings().css("background","white").click(function(){
$(this).css("background","lightskyblue").appendTo($("#ul2"));
                                            
    });
})

六、jQuery 中的事件

分為以下幾類頁面載入, 事件處理 ,事件委派,事件切換,事件

1.頁面載入

當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數

$(document).ready(function(){
// 在這裡寫你的代碼...
});

//簡單的寫法
$(function(){
// 在這裡寫你的代碼...
})

2.事件處理

-- bind(type, [data], fn) //為每個匹配元素的特定事件綁定事件處理函數

下例:在 btn1 這個按紐點擊的時候,給 div 這個元素加個 onclick事件

$("#btn1").click(function(){
$("#div1").bind("click",function(){
    alert($(this).html());
    });
});

思考:它和直接寫 $("#div1").click(function(){...}) 有什麼區別?

主要是後者一般都在 $.ready() 中初始,而bind可以隨時綁定事件

-- one(type, [data], fn) 綁定事件只執行一次

例子:將上例中的 bind 直接改成 one 即可

-- unbind([type], [fn]) //將綁定事件取消

$("p").unbind() //取消所有綁定事件
$("p").unbind( "click" )  //取消綁定的click事件

例子,動態給div的click綁定兩個函數,然後取消一個

$(function(){
$("#btn1").click(function() {
$("div").bind("click",test);
$("div").bind("click",eat);
            });
                                            
$("#btn2").click(function() {
$("div").unbind("click",test);
                         });
});
                                    
  function test(){
   alert("ok");
   }
  function eat(){
   alert("正在eat 東西");
   }
                            
<div>我是div </div>
<button id="btn1">激活div</button>
<button id="btn2">取消div事件</button>

3.事件委派

4.事件切換

-- hover(over,out) //一個模仿懸停事件（滑鼠移動到一個對象上面及移出這個對象）的方法。

參數 over 表示滑鼠移到元素上要觸發的函

參數 out 表示滑鼠移出元素時要觸發的函數

//滑鼠移動到表格上的時候高亮
                       
$("td").hover(
 function(){
$(this).addClass("light");
           },
 function(){
$(this).removeClass("light");
           }
);

-- toggle() //切換元素的可見狀態

-- toggle(speed, [easing], [callback]) // easing 用來指定切換效果，預設是"swing"，可用參數"linear"

$("p").toggle("fast",function(){
      alert("Animation Done.");
});

--toggle(switch) //根據switch參數切換元素的可見狀態（ture為可見，false為隱藏）。

var flip = 0;
$("button").click(function () {
$("p").toggle( flip++ % 2 == 0 );
});

5.事件

--blur() //調用被選中元素的 blur事件

--blur(fn) //設定blur事件

註:常用的事件

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, // mouseout, mouseenter 組合起來其實就是hover,mouseleave,change,select,submit,keydown,keypress,keyup,error

七、jQuery 中的動態效果

jQuery中動態效果主要有以下幾類：

基本、滑動、淡入淡出、自定義、設置

1.基本

--hide() //slow", "normal", "fast

--hide(speed, [easing], [callback]) //，easing 預設是"swing"，可用參數"linear"

用200毫秒將段落迅速隱藏，之後彈出一個對話框。

$("p").hide("fast",function(){
         alert("Animation Done.");
         });

--show()

--show(speed, [easing], [callback])

2.滑動

--slideDown(speed, [easing], [callback]) //通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成後可選地觸發一個回調函數

$("p").slideDown("slow"); //實驗發現,它的效果和show 和 hide很象,只不過它只在是垂直方向上動作

--slideToggle(speed, [callback])

--slideUp(speed, [easing], [callback])

3.淡入淡出

--fadeIn(speed, [easing], [callback])

--fadeOut(speed, [easing], [callback])

--fadeTo(speed, opacity, [easing], [callback]) // $("div").fadeTo("slow", 0.2); 調到指定的透明度

--fadeToggle(speed, [easing], [callback])

$("p").fadeToggle("slow");
<table id="table1"  width="80%" border="1" cellspacing=0 >
<tr><td>這是不變的</td><td>數據一</td><td>數據三</td></tr>
</table>