Web前端基礎——jQuery（三）
本文主要從以下幾方面介紹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> <scripttype="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>
Web前端基礎——jQuery（三）