【jQuery】jQuery框架

阿新 • • 發佈：2020-09-08

jQuery 框架

1).jQuery特點、使用方法

概念：封裝javascript程式碼一個框架 標語： write less do more
特點：①簡化程式碼獲得標籤物件的程式碼
②遮蔽瀏覽器差異
③jquery外掛 拿來即用，自帶UI效果
④支援批量操作
使用步驟：
①引用jquery.js檔案：實際開發中，使用jquery-xxx.min.js，功能一樣、檔案小、載入速度快
②在網頁中使用script標籤引入js檔案
③使用:
	$("選擇器") 	/ 作用：根據引數從網頁中選擇對應標籤，返回
    基本選擇器：
    	$("#id值")
		$(".class的值")
		$("標籤名")
常用方法：
jquery的dom物件 .css("樣式name","樣式的值")
jquery的dom物件 .text();	//獲得標籤體的內容
jquery的dom物件 .text("值");	//設定標籤體的內容
jquery的dom物件 .html();	//獲得標籤體內內容，包括標籤
例如：jdom.css(“name”, “value”).css(“name”, “value”); //可以多次呼叫，每次呼叫又返回一個jQuery的dom
JavaScript的dom物件轉化為jQuery物件：
var jsdom = ...;
var jqdom = $(jsdom)

2).jQuery的選擇器、DOM相關方法

選擇器：
	（1）基本選擇器:【重點】
		ID選擇器:		 $('#id值')	
		標籤選擇器:		$('標籤名')	
		類選擇器:  		 $('.class值')	
	（2）層級選擇器[組合選擇器]：
		$(selA SelB)  後代選擇器:選擇selA標籤內部所有後代中的selB標籤
		$(selA>SelB)  子代選擇器:選擇selA的直接子代元素中的SelB
		$(selA+selB)  緊鄰弟弟選擇器(1個)
		$(sel~sel後續弟弟)  後續所有弟弟選擇器
	（3）過濾選擇器
	①簡單過濾選擇器
    	語法: $("選擇器:過濾xxx")
		:first	$(sel:first)	獲得第一個元素
		:last					獲得最後一個元素
		:eq(i)					獲得下標i的元素
		:gt(i)					下標大於i的元素				
		:lt(i)					下標小於i的元素
		:even					下標為偶數元素
		:odd					下標為奇數元素
		:not(selector)【重點】	獲得所有元素,不包含select元素	
	②內容過濾器
		:empty						標籤體內部為空的標籤
		:parent						標籤體不為為空的元素,如果標籤體內部是空白
		:contains(text)【重點】   	 包含某個text文字元素
		:has(內部後代標籤selector)	過濾保留內部包含selector對應標籤的元素
	③可見性過濾選擇器【重點】		針對--display:none
		:visible	獲得顯示的標籤
		:hidden		獲得隱藏標籤
	④屬性過濾選擇器：【重要】
		選擇器[prop]	  含有prop屬性的標籤物件(明確寫了prop屬性)
		選擇器[prop=value]	含有prop屬性並且prop的屬性值為value		
		*表單特有的過濾:
			:checked	過濾保留被選中的元素(複選框,單選扭)
			:selected	被選中的元素
DOM相關方法：
訪問屬性方法：包括屬性、標籤體、樣式
①.text()  						獲得標籤體的普通文字
	  	.text("")  					修改籤的普通文字
②.css("樣式名字","樣式的值")  	設定標籤的樣式.
	 	.css("樣式名字")  				獲得樣式的值
③.html()  						獲得標籤體的內容(包含了標籤)
	  	.html("內容")					修改標籤體內容，可包含標籤
④.val()  						獲得input標籤的value屬性值 [相當js   dom.value]
	  	.val("文字")					修改input標籤的value值。
⑤.prop("屬性名","屬性值")  		設定標籤的屬性名對應的值
      .prop("屬性名")   			獲得標籤的屬性值
⑥select標籤獲得被選中的選項的下標
			$("下拉列表").prop("selectedIndex");
      獲得所有選項：
			$("select").prop("options");

3).jQuery基於程式設計的事件繫結、及DOM操作方法、函式操作

（1）事件繫結
核心語法：jQuery的dom物件.on("事件名稱",事件函式);
例項程式碼:
$("xx").on("click",function(event){ 	// event是事件物件，是一次單機事件
    // event.target   	事件的源標籤  	javascript型別的dom物件
    // this 			事件源物件      javascript型別的dom物件
    $(this).text(); //將JavaScript物件轉為jQuery的dom物件，在呼叫其方法
})
動態繫結事件：
$("xx").live("click",function(){
    //動態為後新增的元素，只要符合 選擇器的條件，動態增加事件繫結
});
事件名稱：
click、dblclick、blur、change、focus、load、mouseover、mousemove、submit
網頁載入繫結事件：
$(function(){
    //網頁載入完畢之後，呼叫
});
（2）jQueryDOM操作方法
① 建立標籤：var jqDom = $("<td colspan='2'></td>");
② 新增標籤：$("#tr").append($("<td>武松</td>"));
③ 刪除本標籤：dom.remove();
④ 清空內部：
		dom.empty();
		dom.html("");
⑤ 找到弟弟標籤（同級下一個）
		dom.next();
⑥ 找到哥哥標籤（同級上一個）
		dom.prev();
⑦ 所有兒子標籤（所有下級）
		dom.children();
⑧ 找到直接父標籤標籤（上一級）
		dom.parent();
（3）補充函式
①jquerydom物件多個
	jqdom.size();//jquery物件中元素個數
②獲得i下標元素
	jqdom.get(i);		//獲得i下標的dom物件(javascript型別的dom物件)
	jqdom.eq(i);		//獲得i下標的dom物件(jQuery型別的dom物件)
③專門遍歷jqueyrdom的方法
jqDom陣列.each(function(i,e){
    //每次遍歷執行
    //得到當前物件 e(javascript型別的dom物件)
    // $(e) jquery型別的
    $(e)
    //得到當前遍歷的下標 i
});
④資料繫結函式
	jqDom.data("key",value);//將value的以key為名字，繫結在jqDOmd的標籤上
	jqDom.data("key");//獲得繫結在jqDOm標籤上名字為key的值
⑤find("選擇器")[jQuery自定義外掛][瞭解]
	語法： jqDOM.find("選擇器");
	從jqDOm標籤內部(後代標籤中)查詢，符合引數選擇器的標籤返回

4).jQuery動畫效果

效果方法
①顯示消失
    show();			將標籤從隱藏狀態下逐步變成顯示狀態
    show(毫秒);		顯示過程所花的時間
    hide();			將標籤消失。
    hide(毫秒);		消失過程所消耗的時間
②淡入淡出
	fadeIn(毫秒)		淡入（顯示）
	fadeOut(毫秒)；	淡出（消失）
③捲動效果:(捲簾門效果)
	slideDown(毫秒)	卷下顯示
	slideUp(毫秒)    	捲上消失
④自定義效果:
標籤dom.animate(樣式物件,毫秒值); 		//含義： 使用一定的事件變化成指定的樣式效果
	樣式物件:
		{"font-size":"100px","margin-left":"100px"}

5).jQuery外掛使用(訊息框、圖片放大鏡、日期輸入框、表單驗證)

（1）訊息框：toastr
① 引入js檔案
	jquery的js檔案
	toastr js檔案
② 引入相關的css檔案
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.validate.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/message_zh_CN.js"></script>
語法：toastr.info("訊息文字");
	  toastr方法：
    	 info("訊息框文字","標題")    	普通訊息(主題)
		 success("綠色文字")   		成功訊息
         warning("")
		 error("");
（2）放大鏡
① 匯入資源：jquery檔案、放大鏡的js檔案、css檔案
   	<script src="${pageContext.request.contextPath }/js/jquery-1.8.3.min.js"></script>
   	<script src="${pageContext.request.contextPath }/js/jquery.jqzoom-core.js"></script>
   	<link rel="stylesheet" href="${pageContext.request.contextPath }/css/jquery.jqzoom.css" />
② 使用放大
a. 準備一個img圖(小)：<img src="small.jpg">
b. img外部套一個a標籤，將大圖的路徑放在a標籤的href
   	<a href="大圖路徑">  <img src="small.jpg"> 	</a>
c. 使用放大鏡外掛，新增放大效果和事件繫結。
   $("a標籤").jqzoom();
（3）日期外掛
① 引入資源
	注意：	匯入專案的資源全部匯入，檔案相對路徑最好不要改變
引入：<script src="${pageContext.request.contextPath }/datepicker/WdatePicker.js"></script>
② 給input輸入框新增日曆圖示效果.
	<input class="Wdate">
③ 提供好了顯示日曆的事件函式  WdatePicker
	<input class="Wdate" onclick="WdatePicker()">
（4）表單驗證外掛
①匯入資原始檔、引入頁面
<script src="${pageContext.request.contextPath }/js/jquery-1.8.3.min.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.validate.js"></script>
<script src="${pageContext.request.contextPath }/js/message_zh_CN.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath}/datepicker/WdatePicker.js"></script>
②驗證:
	$(function() {
		$("#fm").validate({   		//獲取form表單、呼叫validate({ })
			"rules" : {				//給對應的表單項加驗證規則
				"user.username" : {"required" : true, "minlength" : 2},		//根據name值獲取標籤、後面為驗證物件
				"user.password" : {"required" : true, rangelength : [2, 10]}, //不為空、長度在2~10
				"user.realName" : {"required" : true, "minlength" : 2},
				"user.mobile" : {"required" : true, "minlength" : 11,"maxlength" : 11}
			},
			"messages" : {
				"user.username" : {"required" : "不能為空", "minlength" : "長度不能小於2"}//修改提醒文字
}
		});
	});
注意：
<style>
	.error{ color: red;} //將所有的文字框提醒文字為紅色
</style>