天天看點
傳回

Web前端複習-11、jQuery基礎

Web前端複習-11、jQuery基礎

1、jQuery概述

  • JavaScript語言作為Web前端語言發展過程中的一個重要裡程碑
  • 随着浏覽器種類的推陳出新，JavaScript對浏覽器的相容性受到了極大挑戰
  • 2006年1月，美國John Resing建立了一個基于JavaScript的開源架構——jQuery
  • jQuery具有代碼高效、浏覽器相容性更好等特征，極大地簡化了對DOM對象、事件處理、動畫效果以及AJAX等操作

1.1 jQuery優勢

  1. 通路和操作DOM元素：jQuery中封裝了大量的DOM操作，可以非常友善地擷取或修改頁面中的某個元素，包含元素的移動、複制、删除等操作
  2. 強大的選擇器：jQuery允許開發人員使用CSS 1~CSS 3所有的選擇器，友善快捷地控制元素的CSS樣式，并很好地相容各種浏覽器
  3. 可靠的事件處理機制：使用jQuery将表現層與功能相分離，可靠的事件處理機制讓開發者更多專注于程式的邏輯設計；在預留退路（graceful degradation）、循序漸進以及非入侵式（unobtrusive）方面，jQuery表現的非常優秀
  4. 完善的Ajax操作：Ajax異步互動技術極大友善了程式的開發，提高了浏覽者的體驗度；在jQuery庫中将Ajax操作封裝到一個函數 $.ajax() 中，開發者隻需專心實作業務邏輯處理，而無需關注浏覽器的相容性問題
  5. 鍊式操作方式：在某一個對象上産生一系列動作時，jQuery允許在現有對象上連續多次操作，鍊式操作是jQuery的特色之一
  6. 完善的文檔：jQuery是一個開源産品，提供了豐富的文檔

1.2 搭建jQuery開發環境

  • 在jQuery的官方網站http://jquery.com/，下載下傳最新的jQuery庫
  • 在下載下傳界面可以直接下載下傳jQuery 1.x和jQuery 2.x兩種版本
  • jQuery 1.x版本在原來的基礎上繼續對IE 6、7、8版本的浏覽器進行支援；jQuery 2.x不再支援IE 8及更早版本
    Web前端複習-11、jQuery基礎
  • 每個版本又分為以下兩種：開發版（Development version）和生産版（Production version）
    Web前端複習-11、jQuery基礎
    Web前端複習-11、jQuery基礎
  • 在頁面中使用jQuery分為兩步：（1）引入jQuery庫，（2）使用jQuery實作界面操作。

    1. 引入jQuery庫

      jQuery不需要安裝，隻需将下載下傳的jQuery庫放到站點的一個公共目錄中，然後在頁面中通過

      <script />

       标簽引入即可。

    2. jQuery簡單測試

      在頁面中引入jQuery庫後，通過

      $()

       函數來擷取頁面中的元素，并對元素進行定位或效果處理。在沒有特别說明下，

      $

       符号即為jQuery對象的縮寫形式，例如：

      $(“myDiv”)

       與

      jQuery(“myDiv”)

       完全等價。

window.onload與$(document).ready()差別

Web前端複習-11、jQuery基礎

1.3 DOM對象和jQuery對象

  • 在JavaScript中，通過getElementById()、getElementsByClassName()和querySelector()等方法來擷取頁面中的HTML元素

    【示例】擷取DOM對象

var menuDiv = document.getElementById("menuDiv");
var baseSpan = menuDiv.getElementsByClassName("baseClass");
var span = document.querySelector("#menuDiv");
  • jQuery對象是指通過jQuery庫中提供的方法來擷取的元素對象
  • jQuery對象本身不能直接調用DOM對象的方法，需要将其轉換成DOM對象後再調用DOM對象的方法
1.3.1 DOM對象轉成jQuery對象

使用jQuery庫中的

$()

方法将DOM對象封裝起來，并傳回一個jQuery對象

//獲得DOM對象
var domObject=document.getElementById("myDiv");
//獲得DOM對象中的innerHTML屬性值
alert(domObject.innerHTML);
//将DOM對象轉換成jQuery對象
var jQueryObject=$(domObject);
//調用jQuery對象的html()方法
alert(jQueryObject.html());
1.3.2 jQuery對象轉成DOM對象

将jQuery對象轉換成DOM對象時，可以把jQuery對象看作一個數組，通過索引 [index] 或 get(index)方法來獲得DOM對象。

//擷取jQuery對象(由頁面中所有的DIV構成)
var jQueryObject = $("div");
//1.通過下标擷取DOM對象
var domObject1 = jQueryObject[0];
//2.通過get()方法擷取DOM對象
var domObject2=jQueryObject.get(1);
//獲得DOM對象中的innerHTML屬性值
alert("第一個DIV内容是："+domObject1.innerHTML
	+"\n第二個DIV内容是："+domObject2.innerHTML);

2、jQuery選擇器

  • 通過jQuery選擇器可以友善快捷地獲得頁面中的元素，然後為其添加相應行為，而無需擔心浏覽器的相容性問題
  • jQuery選擇器完全繼承了CSS選擇器的風格，将jQuery選擇器分為四類：
    1. 基本選擇器
    2. 層次選擇器
    3. 過濾選擇器
    4. 表單選擇器

2.1基本選擇器

基本選擇器是jQuery中最常用的選擇器，通過元素的id、className或tagName來查找頁面中的元素。

Web前端複習-11、jQuery基礎

由于ID是元素的唯一辨別、不能重複，是以ID選擇器傳回單個jQuery對象；而class屬性用于設定元素的樣式，允許多個元素使用同一樣式，是以class選擇器傳回一個jQuery對象類型的數組。

<div id="idDiv">DOM對象與jQuery對象的互相轉化</div>
	<div class="classDiv">jQuery對象不能直接使用DOM對象的方法，</div>
	<div class="classDiv">但可以通過将jQuery對象轉換成DOM對象後再調用其方法。</div>
	<span class="classSpan">基本選擇器是jQuery中最常用的選擇器</span>
	<script type="text/javascript">
		$(function(){
			$("#idDiv").css("color","blue");
			$(".classDiv").css("background-color","#ddd");
			$("span").css("background-color","gray").css("color","white");
			$("*").css("font-size","20px");
			$("#idDiv,.classSpan").css("font-style","italic");
		})
	</script>
Web前端複習-11、jQuery基礎

2.2層次選擇器

  • jQuery層次選擇器是通過DOM對象的層次關系來擷取特定的元素，如同輩元素、後代元素、子元素和相鄰元素等
  • 層次選擇器的用法與基本選擇器相似，也是使用$()函數來實作，傳回結果均為jQuery對象數組
    Web前端複習-11、jQuery基礎

  • $("prev+next")

     用于選取緊随prev元素之後的next元素，且prev元素和next元素有共同的父元素，功能與 $(“prev”).next(“next”) 相同。

  • $("prev~siblings")

     用于選取選prev元素之後的siblings元素，兩者有共同的父元素而不必緊鄰，功能與 $(“prev”).nextAll(“siblings”) 相同。 
<div>
    搜尋條件<input name="search" />
    <form>
	<label>使用者名:</label><input name="useName" />
	<fieldset><label>密　碼:</label><input name="password" /></fieldset>
    </form>
	身份證号：<input name="none" /><br/>
	聯系電話：<input name="none" />
</div>
<script type="text/javascript">
   $(function(e){
		$("form input").css("width","200px")
		$("form > input").css("background","pink");
		$("label + input").css("border-color","blue");
		//$("label").next("input").css("border-color","blue");
		$("form ~ input").css("border-bottom-width","4px");
		//$("form").nextAll("input").css("border-bottom-width","4px");
		$("*").css("padding-top","3px");
   });
</script>
Web前端複習-11、jQuery基礎

2.3過濾選擇器

過濾選擇器：要根據特定的過濾規則來篩選出所需要的頁面元素

  • 簡單過濾選擇器
  • 内容過濾選擇器
  • 可見性過濾選擇器
  • 屬性過濾選擇器
  • 子元素過濾選擇器
  • 表單對象屬性過濾選擇器
2.3.1 簡單過濾選擇器
Web前端複習-11、jQuery基礎
<table>
        <tr><td>商品名</td><td>商品價格</td><td>商品數量</td></tr>
        <tr><td>海俪恩太陽眼鏡</td><td>299</td><td>50</td></tr>
        <tr><td>田玉平安扣</td><td>1280</td><td>30</td></tr>
        <tr><td>湯美男士皮帶</td><td>198</td><td>36</td></tr>
        <tr><td>上海故事圍巾</td><td>159</td><td>67</td></tr>
        <tr><td>布奴邁基滑雪服</td><td>1298</td><td>10</td></tr>
        <tr><td>YIBOYO發飾</td><td>89</td><td>100</td></tr>
        <tr><td colspan="3">共計6種商品</td></tr>
 </table>
<script type="text/javascript">
	$(function(e){
		$("table tr:first").css("background-color","gray");
		$("table tr:last").css("text-align","right");
		$("table tr:eq(2)").css("color","red");
		$("table tr:lt(1)").css("font-weight","bold");
		$("table tr:odd").css("background-color","#dddddd");
		$(":root").css("background-color","#EFEFEF");
		$("table tr:not(:first)").css("font-size","11pt");
	});
</script>
Web前端複習-11、jQuery基礎
2.3.2 内容過濾選擇器

内容過濾選擇器是指根據元素的文字内容或所包含的子元素的特征進行過濾的選擇器。

Web前端複習-11、jQuery基礎
<table>
       <tr><td>商品名</td><td>商品價格</td><td>商品數量</td></tr>
        <tr><td class="myClass">海俪恩太陽眼鏡</td><td>299</td><td>50</td></tr>
        <tr><td>田玉平安扣</td><td>1280</td><td>30</td></tr>
        <tr><td>湯美男士皮帶</td><td><span>198</span></td><td>36</td></tr>
        <tr><td>POLISI滑雪眼鏡</td><td>149</td><td></td></tr>
        <tr><td>布奴邁基滑雪服</td><td>1298</td><td></td></tr>
        <tr><td >YIBOYO發飾</td><td><span>89</span></td><td></td></tr>
        <tr><td colspan="3">共計6種商品</td></tr>
 </table>
<script type="text/javascript">
	 $(function(e){
		$("td:contains('滑雪')").css("font-weight","bold");
		$("td:parent").css("background-color","#dddddd");
		$("td:empty").css("background-color","white");
		$("td:has('span')").css("background-color","gray")
		//$("td").has('span').css("background-color","gray")
	 });
</script>
Web前端複習-11、jQuery基礎
2.3.3 可見性過濾選擇器

可見性過濾選擇器是指根據元素的可見性來篩選元素的選擇器。

Web前端複習-11、jQuery基礎
  • :hidden選擇器用于選取所有不可見元素，包括

    <input type="hidden" />

     、

    <div style="display:none;">

     等形式的不可見元素。
  • 而visibility:hidden和opacity:0修飾的元素在頁面中占據一定的實體空間，是以都被視為可見的。 
<div id="topDiv">頁面頂部</div>
<div id="menuDiv" style="display:none;">菜單欄</div>
<div id="mainDiv" style="height:60px;">
              使用者ID:<input type="hidden" value="使用者ID" /><br/>
     使用者名：<input type="text" name="userName" value="請輸入使用者名" />
</div>
<img src="images/showHidden.jpg" width="120" id="showHidden"  onClick="showHiddenElement()"/>
<script type="text/javascript">
     $(function(e){
	$("div:visible").css("background-color","#dddddd");
	$("input:visible").css("border","2px solid blue");
	$(":visible").css("font-size","18px");
     });
     function showHiddenElement(){
          $("div:hidden").show(1000);
          $("input:hidden").attr("type","text");
     }
</script>
Web前端複習-11、jQuery基礎
Web前端複習-11、jQuery基礎
2.3.4 屬性過濾選擇器

屬性過濾選擇器是指根據元素的屬性來篩選元素的選擇器，在屬性比對時以“[”号開始、以“]”号結束。

Web前端複習-11、jQuery基礎
<div id="topDiv" title="top" desc="頁面頂部">頁面頂部</div>
<div id="menuDiv" title="menu">菜單欄</div>
<div id="mainDiv" >主題區</div>
<div id="leftDiv" title="mainLeft">左側欄</div>
<div id="rightDiv" title="mainRight">右側欄</div>
<div id="bottomDiv" title="bottom" desc="頁面底部">底部欄</div>
<div id="advDiv" title="advbottom">廣告欄</div>
<script type="text/javascript">
   $(function(e){
      $("div[title]").css({width:"300px",height:"30px",margin:"3px"});
      $("div[title=menu]").css("border","2px solid #AAA");
      $("div[title!=menu]").css({backgroundColor:"#DDD"});
      $("div[title^=main]").css("margin-left","20px");
      $("div[title$=bottom]").css("padding-left","15px");
      $("div[title*=o]").css("font-style","italic");
      $("div[title*=o][desc]").css("font-weight","bold");
   });
</script>
Web前端複習-11、jQuery基礎

注意：

css()方法用于設定元素的樣式，在設定單個樣式時格式如下：css(“font-style”,“italic”);當同時進行設定多個樣式時，需要用到properties格式（鍵值對）的資料作為參數，例如：

css( {fontStyle:“italic”,fontWeight:“bold”} )

當font-style屬性在jQuery中出現時，應寫成fontStyle格式，其他樣式屬性以此類推。

2.3.5 子元素過濾選擇器

通過子元素過濾選擇器可以輕松地選取所有父元素中的指定元素

Web前端複習-11、jQuery基礎
<script type="text/javascript">
$(function(e){
   $("#dataTable tr td:first-child").css("background-color","#CCC");
   $("#dataTable tr td:last-child").css("background-color","#AAA");
   $("#dataTable tr td:only-child").css("border","2px solid #666");
   $("#dataTable tr td:nth-child(even)")
	.css({fontStyle:"italic",fontWeight:"bold"});
   //從第2個開始，每隔3個選取一個
   //$("#dataTable td:nth-child(3n+2)").css("background-color","#AAA");
   $("li:first-child").css("background-color","#CCC");	//無效果
   $("li:last-child").css("background-color","#DDD");		//無效果	
   $("li:nth-child(odd)").css({fontStyle:"italic",fontWeight:"bold"});
   $("li:first-of-type").css({backgroundColor:"#DDD",color:"blue"});
   $("li:last-of-type").css({backgroundColor:"#DDD",color:"red"});
   //first-of-type、last-of-type、only-of-type均起作用，後面設定覆寫前面的設定
   $("li:only-of-type").css("color","green");
});
</script>
Web前端複習-11、jQuery基礎
2.3.6 表單對象屬性過濾選擇器

表單對象屬性過濾選擇器是指通過表單對象的屬性特征進行篩選的選擇器

Web前端複習-11、jQuery基礎
<script type="text/javascript">
$(function(e){
   //設定複選框以外的input樣式
   $("input:not([type='checkbox'])")		.css({marginTop:"3px",width:"200px"});
   $("#myform input:disabled")
	.css({backgroundColor:"#CCC",borderColor:"#999"});
   $("#myform input:enabled").css({color:"#f66"});
   var goodsType=$("#myform input:checked");
   var province=$("#myform option:selected").text();
   $("#result").html("銷售區域："+province+"<br/>銷售類型有："	 	+goodsType.length+"個");
   });
</script>
Web前端複習-11、jQuery基礎
  • text() 方法用于設定或顯示元素的文本内容
  • html() 方法用于設定或顯示元素的HTML内容
  • length屬性表示所選取的元素集合的數量

2.4 表單選擇器

  • 表單在Web前端開發中占據重要的地位
  • jQuery中引入的表單選擇器能夠讓使用者更加友善地處理表單資料
    Web前端複習-11、jQuery基礎
$(function(e){
	var result="統計結果如下：<hr/>";
	result+="<br />&lt;input&gt;标簽的數量為："+$(":input").length;
	result+="<br />單行文本框的數量為："+$(":text").length;
	result+="<br />密碼框的數量為："+$(":password").length;
	result+="<br />單選按鈕的數量為："+$(":radio").length;
	result+="<br />上傳文本域的數量為："+$(":file").length;
	result+="<br />複選框的數量為："+$(":checkbox").length;
	result+="<br />圖檔按鈕的數量為："+$(":image").length;
	result+="<br />送出按鈕的數量為："+$(":submit").length;
	result+="<br />普通按鈕的數量為："+$(":button").length;
	$("#showResult").html(result);
});
Web前端複習-11、jQuery基礎

3、jQuery基本操作

通過jQuery提供的選擇器快速定位到頁面的每個元素後，對元素可以進行各種操作

  • 屬性操作
  • 樣式操作
  • 内容操作
    Web前端複習-11、jQuery基礎
    當元素屬性（如checked、selected、disabled等）取值為true或false時，通過prop()方法對屬性進行操作，而其他普通屬性通過attr()方法對進行操作。

3.1 屬性操作

3.1.1 attr()方法

attr()方法用于擷取所比對元素的集合中第一個元素的屬性，或設定所比對元素的一個或多個屬性。

attr(name)
attr(properties)
attr(key,value)
attr(key,function(index, oldAttr))
           
$("img").attr("src")              //用于傳回<img>集合中第一個圖像的src屬性值
$("#myImage").attr("src")		//傳回ID為myImage圖像的src屬性值
$("#myImage").attr("src","images/flower2.png") //設定myImage的src屬性

//通過properties(名/值對)的方式，設定圖像的屬性
$("#myImage").attr({src:"images/flower2.png",title:"鮮花之王-玫瑰花"});
//使用函數的傳回值作為屬性值
$("#myImage").attr("title", function(){ return this.src });
3.1.2 removeAttr()方法

removeAttr()方法用于删除比對元素的指定屬性。

3.1.3 prop()方法
  • prop()方法用于擷取匹所配元素的集合中第一個元素的屬性，或設定所比對元素的一個或多個屬性
  • prop()方法多用于boolean類型屬性操作，例如checked、selected和disabled等 
prop(name)
prop(properties)
prop(key,value)
prop(key,function(index, oldAttr))
           
$("input[type='checkbox']").prop("checked")	//傳回第一個複選框的狀态
$("input[type='checkbox']").prop("checked",true);	//将所有複選框選中

//通過properties(名/值對)的方式，将所有複選框設為禁用、選中狀态
$("input[type='checkbox']").prop({disabled: true,checked:true});
//使用函數的傳回值作為屬性值，對所有複選框進行反選
$("input[type='checkbox']").prop("checked",
	function(index,oldValue) { return !oldValue; }
);
3.1.4 removeProp()方法

removeProp()方法用于删除由prop()方法設定的屬性集。

var flowerSrc= $("#flower1").attr("src");
$("#flower1").attr("src",function(){ return $("#flower2").attr("src")});
$("#flower2").attr("src",flowerSrc);
$("input[type='checkbox']").prop("checked",true);
$("input[type='checkbox']").prop("checked",
	function(index, oldValue){return !oldValue;});
$("input[type='checkbox']").prop({checked: true,:disabled true});
$("input[type='checkbox']").removeProp("disabled");
Web前端複習-11、jQuery基礎

3.2 樣式操作

  • 在HTML代碼中，通過class屬性指定HTML标簽的樣式名；
  • 在jQuery中，可以使用attr()方法操作元素的class屬性，以擷取或改變元素的樣式。 
$("#myDiv").attr("class")		  //傳回myDiv的class屬性值 
$("#myDiv").attr("class","newClass")//設定myDiv的class屬性值，如果存在則替換
  • jQuery還提供了addClass()、removeClass() 和 toggleClass() 方法，實作對頁面元素的樣式追加、移除和替換等操作。
3.2.1 addClass()方法

addClass()方法用于對一個或多個比對元素追加樣式

addClass(className)
addClass(className1 className2.. classNameN)
addClass(function(index, oldClassName))
  • 參數className1 className2… classNameN表示可以同時追加多個樣式，樣式名之間使用空格隔開
  • 參數function(index, oldClassName)表示使用函數的傳回值作為目前位置的樣式；index表示目前元素在集合中的索引值，oldClassName表示目前元素在修改之前的樣式名 
//追加baseClass樣式
$("p[title='desc']").addClass("baseClass");
//追加baseClass和fontColor樣式
$("p[title='desc']").addClass("baseClass fontColor");
3.2.2 removeClass()方法

removeClass()方法用于移除比對元素的一個或多個樣式，也可以一次性移除元素的所有樣式。

removeClass()
removeClass(className)
removeClass(className1 className2.. classNameN)
  • 無參方法用于移除比對元素的所有樣式
  • 參數className表示需要移除的樣式名
  • 參數className1 className2… classNameN表示可以同時移除多個樣式，樣式名之間使用空格隔開 
$("p").removeClass();                     //移除所有的樣式
$("p").removeClass("baseClass");          //移除baseClass樣式
$("p").removeClass("baseClass fontColor");//移除baseClass和fontColor樣式

addClass()和removeClass()方法的使用：

<script type="text/javascript">
$(function(e){
	$("#articleTitle").addClass("titleClass");                        //添加某種樣式
	$("p[title='desc']").addClass("baseClass fontColor");  //添加多種樣式

	//根據位置的不同，添加不同的樣式，index為索引	$("p[title='desc']").addClass(function(inde) {
		console.log(index);
		return 'p'+index;
	});
});
function removeClass(){
	//$("p").removeClass("fontSize");//移除指定的樣式
	$("p").removeClass();//移除所有的樣式
}
</script>
Web前端複習-11、jQuery基礎
3.2.3 toggleClass()方法

該方法用于元素樣式之間的重複切換，當元素的指定樣式存在則将該樣式進行移除，否則添加該樣式。

toggleClass(className)
toggleClass(className, switch)
  • 參數switch表示切換樣式開關，預設為true；當switch為true時允許樣式切換，否則不切換 
//ID為userName的元素添加樣式，如果存在foucsClass樣式則移除，沒有則添加該樣式
$("#userName").toggleClass("focusClass");
//第二個參數為真，樣式切換為inverseColor 
$("#saleDept").toggleClass("inverseColor", true);
3.2.4 css()方法

在jQuery 1.9+中新增了css()方法，用于傳回第一個比對元素的CSS樣式，或設定所有比對元素的樣式。

css(attrName)
css(key,value)
css(properties)
           
//一個參數時，用于傳回第一個比對元素的樣式；例如：傳回第一幅圖檔的寬度
$("img").css("width");
//多個參數時，用于設定比對元素的樣式；例如：設定圖檔的寬度為200像素
$("img").css("width","200px");
//使用properties（鍵值對）的方式一次設定多個樣式
$("img").css({backgroundColor:"#CCC",borderColor:"#999"});
//使用函數的傳回值作為css()方法的value值
$("img").css({
	width:function(index, value){
		return parseFloat(value)*0.9;
	}
});

使用toggleClass()和css()方法切換元素的樣式：

function userNameOnFocus(){
         $("#userName").toggleClass("focusClass");
}
function changeDept(){
         $("#saleDept").toggleClass("inverseColor", ++count%3==0);
}
//圖檔放大
function enlargeImage(){
         $("img").css({
	width:function(index, value){
	         return parseFloat(value)*1.1;
	},
	height:function(index, value){
	         return parseFloat(value)*1.1;
	}
         });
}
Web前端複習-11、jQuery基礎

3.3 内容操作

  • html()和text()方法用于操作頁面元素的内容，val()方法用于操作表單元素的值。
  • 上述方法的使用方式基本相同，當方法沒有提供參數時表示擷取比對元素的内容或值；當方法攜帶參數時表示對比對元素的内容或值進行修改。
3.3.1 html()方法
  • html()方法用于擷取第一個比對元素的HTML内容或修改比對元素的HTML内容，此方法僅對XHTML文檔有效，不能用于XML文檔。 
html()
html(htmlCode)
html(function(index, oldHtmlCode))
  • 參數htmlCode表示将所比對元素的HTML内容設定為htmlCode
  • 參數function(index,oldHtmlCode)表示将函數的傳回值作為目前元素的HTML内容，index表示目前元素在集合中的索引位置，oldHtmlCode表示目前元素在修改之前的HTML内容

html()方法的使用：

//傳回#mainContentDiv标簽的HTML内容
$("#mainContentDiv").html();
//設定#mainContentDiv标簽的HTML内容為紅色标題格式的“漫步時尚廣場”
$("#mainContentDiv").html("<h1><font color='red'>漫步時尚廣場</font><h1/>");
//根據元素在集合中的位置不同，設定不同的HTML内容
$("p").html(function(index,htmlCode){
         switch(index){
	case 0 : return "<h1>"+htmlCode+"<h1/>";
	case 1 : return "<h2>"+htmlCode+"<h2/>";
         }
});
3.3.2 text()方法

text()方法用于讀取或設定比對元素的文本内容；與html()方法差別在于，text()方法傳回純文字内容，能夠适用于XHTML和XML文檔。

text()
text(textContent)
text(function(index, oldTextContent))
  • 參數textContent表示将比對元素的文本内容設定為textContent
  • 參數function(index,oldTextContent)表示将函數的傳回值作為目前元素的文本内容，index表示目前元素在集合中的索引位置，oldTextContent表示目前元素在修改之前的文本内容

text()方法的使用：

//傳回#mainContentDiv标簽的文本内容，即使該标簽包含HTML标簽，傳回的内容僅僅是純文字内容
$("#mainContentDiv").text();
//設定#mainContentDiv标簽的文本内容為“漫步時尚廣場”
$("#newsDiscuss").text("<hr/>評論如下："+$("#inputDiscuss").val()+"<hr/>");

使用html()和text()方法修改頁面的内容：

console.log("<div>中的HTML内容如下："+$("#newsContent").html());
console.log("<div>中的text内容如下："+$("#newsContent").text());
function changeContent(){
  $("p").html(function(index,htmlCode){
	switch(index){
		case 0 :  return "<h1>"+htmlCode+"<h1/>";
		case 1 :  return "<h2>"+htmlCode+"<h2/>";
	}
  });
}
Web前端複習-11、jQuery基礎
3.3.3 val()方法

val()方法用于設定或擷取表單元素的值，包括文本框、下列清單、單選框和複選框等元素；當元素允許多選時，傳回一個包含被選項的數組。

val()
val(newValue)
val(arrayValue)
val(function(index, oldValue))
  • 參數newValue表示将比對的表單元素的value值設定為newValue
  • 參數arrayValue用于設定多選表單元素（如check和select等）的選中狀态
  • 參數function(index,oldValue)表示将函數的傳回值賦給目前比對的表單元素，index表示目前元素在比對集合中的索引位置，oldValue表示目前元素在修改之前的value值

html()和val()方法修改頁面元素及表單元素：

<script type="text/javascript">
function submitNewsDiscuss(){
	var inputDiscuss=$("#inputDiscuss").val();
	//鍊式操作方式
	$("#newsDiscuss").html("<hr/>評論如下："+inputDiscuss)
		.css("color",$("#discussColor").val())
		.css("font-size",$("[name=discussSize]:checked").val());
	}
</script>
Web前端複習-11、jQuery基礎

注意：

所謂的鍊式操作方式是指在同一個jQuery對象上的一系列動作，通過直接連寫形式無需重複擷取該對象。采用鍊式操作時，jQuery會自動緩存每一步操作的結果，比非鍊式方式（手動緩存）要快。

4、jQuery事件處理

  • 當頁面或某些元素發生變化或操作時，浏覽器會自動觸發一個事件，例如：文檔加載完畢和點選按鈕
  • 事件處理是指在某一時刻頁面元素對某種操作的響應處理
  • jQuery中的事件處理是在JavaScript事件處理機制的基礎上進一步擴充與增強，極大地增強了事件處理能力

4.1 頁面加載事件

  • 在jQuery中 $(document).ready() 方法用于處理頁面加載完畢時的事件，極大地提高了Web應用程式的響應速度。
  • 當通路一個含有大量圖檔的網站時，使用window.onload方式需要等待所有幅圖檔加載完畢後才能進行操作；而使用 $(document).ready()方式處理時，當DOM元素就緒時便會進行事件處理，無需等到所有的圖檔下載下傳完畢
  • 使用window.onload方式多次綁定事件處理函數時，隻保留最後一個，執行結果也隻有一個
  • $(document).ready()允許多次設定處理事件，事件執行結果會相繼輸出 
//第一次設定頁面加載事件處理
$(document).ready(function(){
        alert("第一次執行");
});
//第二次設定頁面加載事件處理
$(document).ready(function(){
       alert("第二次執行");
});
           
//簡寫形式（一）
$(function(){
        //jQuery處理代碼
});
//簡寫形式（二）
$().ready(function(){
       //jQuery處理代碼
});

4.2 事件綁定

所謂事件綁定是指将頁面元素的事件類型與事件處理函數關聯到一起，當事件觸發時調用事先綁定的事件處理函數。

在jQuery中，提供了強大的API來執行事件的綁定操作，例如：

  • bind()
  • one()
  • toggle()
  • live()
  • delegate()
  • on()
  • hover()
4.2.1 bind()方法

bind()方法用于對比對元素的特定事件綁定的事件處理函數。

  • 參數types表示事件類型，是一個或多個事件類型構成的字元串，類型之間由空格隔開
  • 事件類型包括滑鼠事件或鍵盤事件，滑鼠事件包括click、submit、mouseover和mouseup等，鍵盤事件包括keydown和keyup等
  • 參數data（可選），表示傳遞給函數的額外資料，在事件處理函數中通過event.data來獲得所傳入的額外資料
  • 參數fn是指所綁定的事件處理函數 
//綁定click事件
$("p").bind("click", function(){
           alert($(this).text());
});
//為一個對象同時綁定mouseenter和mouseleave事件
$("p").bind("mouseenter  mouseleave",function(){
           $(this).toggleClass("entered");
});
//為一個對象同時綁定多個事件，且每個事件具有單獨的處理函數
$("button").bind({
           click:function(){$("p").slideToggle();},
           mouseover:function(){$("body").css("background-color","red");},
           mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
//事件處理之前傳遞一些附加的資料
function handler(event){
           alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler);

jQuery為常用的事件提供了一種簡寫方式，與bind()方法實作的效果完全相同。

$("input[type=button]").click(function(){
	$(this).toggleClass("entered");
});

其中：

  • this是執行上下文（Execution Context）的一個重要對象，用于指明觸發事件的對象本身；
  • $(this)是jQuery對this對象的封裝，用于在事件進行中收集事件觸發者的資訊。
4.2.2 one()方法

one()方法用于對比對元素的特定事件綁定一個一次性的事件處理函數，事件處理函數隻會被執行一次。

  • 參數types表示事件類型，是一個或多個事件類型構成的字元串，類型之間由空格隔開
  • 參數data（可選），表示傳遞給函數的額外資料
  • 在事件處理函數中通過event.data來獲得所傳入的額外資料

one()方法綁定事件：

//綁定click事件
$("p").one("click",function(){
	alert($(this).text());
});
4.2.3 toggle()方法

toggle()方法用于模拟滑鼠連續單擊事件。

  • 參數speed用于設定元素的隐藏（或顯示）速度，預設是0，取值範圍是slow、normal、fast或毫秒數
  • 參數easing用于指定動畫的切換效果，取值範圍是swing（預設）和linear
  • 參數fn1,fn2,fn3, … fnN表示1~n個事件處理函數；fn1表示第一次點選時所執行的事件處理函數；fn2表示第二次點選時所執行的事件處理函數；當有更多函數時依次進行觸發直到最後一個，然後在從開始位置循環調用
  • 同時具有參數speed、fn時，表示以speed速度顯示或隐藏，在動畫完成後再執行fn事件處理函數 
//模拟連續多次單擊事件
	$("#toggleBtn").toggle(function(){
			$(this).css("background-color","red");
		},function(){
			$(this).css("background-color","green");
		},function(){
			$(this).css("background-color","yellow");
		},function(){
			$(this).css("background-color","white");
		}
	);
	$("#toggleAnimateBtn").click(function(){
		//$("#newsContent").toggle(10000);
		$("#rightDiv").toggle("slow","swing",function(){
			$("#toggleAnimateBtn").css("background-color","red");
		});
	});
4.2.4 live()方法
  • 使用bind()方式綁定事件時，隻能針對頁面中存在的元素進行綁定，而bind()綁定後新增的元素上沒有事件響應
  • 使用live()方法能夠對頁面所有比對元素綁定事件，包含存在的元素和将來新增的元素 
//live()方法的使用
$("div").live("click", function(){
    alert($(this).html());
});
4.2.5 delegate()方法

delegate()方法可以在比對元素的基礎上，對其内部符合條件的元素綁定事件處理函數

$("div").delegate("button","click",function(){
    $("p").slideToggle();
});
$("div").delegate("#DataBindBtn","click",{msg: "傳遞額外資料"},function(e){
    alert(e.data.msg);
});

使用live()和delegate()方法綁定事件：

<span><button>div顯示與隐藏</button></span><button>普通按鈕</button><hr/>
<div id="leftDiv">已存在的Div</div>
<script type="text/javascript">
	$(function(){
		//綁定事件
		$("div").live("click", function(){
			alert($(this).html());
		});
		//通過代碼新增的Div
		$("body").append("<div id='rightDiv'>通過代碼新增的Div</div>");
		//對span元素中button按鈕綁定click事件處理
		$("span").delegate("button","click",function(){
			$("div").slideToggle();
		});
	});
</script>
Web前端複習-11、jQuery基礎
4.2.6 on()方法

優先使用on()方法替代live()和toggle()方法，需要注意前參數的順序和位置有所不同。

//使用live()方法綁定事件
$("div[id!=leftDiv]").live("click",function(){
	//事件處理代碼
});
//使用on()方法替代live()方法
$(document).on("click","div[id!=leftDiv]",function(){
	//事件處理代碼
});
//使用delegate()方法綁定事件
$("div").delegate("#DataBindBtn","click",{msg:"傳遞額外資料"},function(e){
	alert(e.data.msg);
});
//使用on()方法替代delegate()方法
$("div").on("click","#DataBindBtn",{msg:"傳遞額外資料"},function(e){
	alert(e.data.msg);
});
4.2.7 hover()方法

hover()方法用于模拟滑鼠懸停事件；當滑鼠懸停在某元素上時觸發第一個函數，滑鼠移出時觸發第二個函數。

//使用hover()方法設定單元格懸停特效
$("td").hover(
	function(){
		$(this).addClass("hover");
	},function(){
		$(this).removeClass("hover");
	}
);

使用on()和hover()方法綁定事件處理函數：

//綁定事件（替代bind()方法）
$("#leftDiv").on("click","#bindBtn",function(){
	alert("使用bind()方法綁定事件處理");
});
//事件綁定，并傳遞額外資料（替代delegate()方法）
$("div").on("click","#dataBindBtn",{msg:"傳遞額外資料"},function(e){
	alert(e.data.msg);
});
//綁定事件（替代live()方法）
$(document).on("click","div[id!=leftDiv]",function(){
	alert($(this).html());
});
$(“#rightDiv”).hover(function(){

},function(){

});
Web前端複習-11、jQuery基礎

4.3 解除事件綁定 

$("#removeBindBtn").on("click",function(){
   //1. 使用unbind()解除click事件綁定
   //$("#manyBindBtn").unbind("click");

   //2. 使用unbind()解除該元素上的所有事件綁定
   //$("#manyBindBtn").unbind();

   //3. 使用off()方法解除bind()方法的click事件綁定
   $("#manyBindBtn").off("click");
   //$(document).off("click","#manyBindBtn");

   //4. 使用off()方法解除該元素上的所有事件綁
   //$("#manyBindBtn").off();

   //5. 使用undelegate()方法解除delegate()方法綁定事件
   //$(document).undelegate("#delegateBindBtn","click");

   //6. 使用off()方法解除delegate()方法綁定事件
   $(document).off("click","#delegateBindBtn");

   //7. 使用off()方法解除on()方法的click事件綁定
   $("#leftDiv").off("click","#bindBtn");

   //8. 使用off()方法解除所有按鈕上的所有的事件綁定
   $("input[type=button]").off();
});

4.4 事件對象（event）

  • 由于标準DOM和IE-DOM所提供的事件對象的方法有所不同，導緻使用JavaScript在不同的浏覽器中擷取事件對象比較繁瑣
  • jQuery針對該問題進行了必要的封裝與擴充，以便解決浏覽器相容性問題，進而在任意浏覽器中都可以輕松擷取事件處理對象
事件對象的屬性和方法
Web前端複習-11、jQuery基礎
Web前端複習-11、jQuery基礎
$("#stopSubmitBtn").on("click",function(event){
    console.log("點選'阻止預設按鈕',阻止預設元素的預設行為（如表單送出等）"); 
    event.preventDefault();
    event.stopPropagation();
});
$("#middleDiv").on("mousemove",function(event){
    var x=parseInt(event.pageX-$(this).offset().left);
    var y=parseInt(event.pageY-$(this).offset().top);
    $(this).html("滑鼠位置："+x+","+y);
});
$("#rightDiv").on("mousedown",{user:'jCuckoo'},function(event){
    if(event.which==1){
	$("#rightDiv").html(event.data.user+"點選了滑鼠左鍵")
		.css("background-color","#FFC");
	}else if(event.which==2){
									}else if(event.which==3){
    }
});
Web前端複習-11、jQuery基礎

總結

  • jQuery的設計理念是“少寫多做”（write less, do more），是一種将JavaScript、CSS、DOM、Ajax等特征集于一體的強大架構，通過簡單的代碼來實作各種頁面特效
  • jQuery提供的功能包括通路和操作DOM元素、強大的選擇器、可靠的事件處理機制、完善的Ajax操作等
  • jQuery對象不能直接使用DOM對象中的方法，但可以将jQuery對象轉換成DOM對象後再調用其方法
  • 根據頁面元素的不同，jQuery選擇器可分為基本選擇器、層次選擇器、過濾選擇器、表單選擇器四大類
  • jQuery還提供了功能更加強大的過濾選擇器，可以根據特定的過濾規則來篩選出所需要的頁面元素，主要包括簡單過濾選擇器、内容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器
  • 通過jQuery提供的選擇器可以快速定位到頁面的每個元素，然後對元素進行各種操作，如屬性操作、樣式操作和内容操作等
  • jQuery還提供了addClass()、removeClass()和==toggleClass()==方法，實作對頁面元素的樣式追加、移除和替換等操作
  • jQuery提供了html()和text()方法用于操作頁面元素的内容，val()方法用于操作表單元素的值
  • jQuery中，提供了強大的API來執行事件的綁定操作，允許對事件進行多次綁定或一次性綁定
  • 常見的事件綁定方法有bind()、one()、toggle()、live()、delegate()、on()、hover() 等
複習 jquery
上一篇: GDB大法(四)
下一篇: #懂車之道訊#近日，懂車之道獲悉，ALEFModelA正式成為北美地區首款獲得美國聯邦航空管理局(FAA)準許的電動VT

繼續閱讀