js包

1、base.js

/*語法： $("選擇器") 工廠函數 */
	/*尋找頁面中name屬性值是haha的元素*/
	$("[name='haha']").click(function(){
	$("#myDiv").css({"height":50,"width":50,"background":"red"});
	/*css(json格式)*/
	})
	/*js書寫*/
	function changeDiv(){
	document.getElementById("myDiv").style.height="50px";
	document.getElementById("myDiv").style.width="50px";
	document.getElementById("myDiv").style.backgroundColor="pink";
	}

2、function.js

$(function(){ // 簡寫方式 等同於 window.onload
	alert("頁面的html結構加載完畢之后就執行！");
	})
	$(document).ready(function(){
	})

3、showAndHidden.js

/*初識jQuery(function(){
	當我們的鼠標移動到li上面，div中的圖片顯示
	$("li").mouseover(function(){
	//$(this).children("div").css({"display":"block"});
	$(this).children("div").show();
	}).mouseout(function(){鼠標移出
	//$(this).children("div").css({"display":"none"});
	$(this).children("div").hide();
	})
	})*/
	$(function(){
	/*復合事件 整合了鼠標移出和移入*/
	$("li").hover(function(){//mouseover
	$(this).children("div").show();
	},function(){ //mouseout
	$(this).children("div").hide();
	})
	})

4、htmlAndText.js

$(function(){
	//獲取頁面中的div innerHTML="" 會編譯html標簽
	//$("#myDiv").html("<img src='../images/cat.jpg' height='50px' width='50px'/>");
	// innerText 文本內容
	$("#myDiv").text("<img src='../images/cat.jpg' height='50px' width='50px'/>");
	})

5、link.js

$(function(){
	/*鏈式操作 在操作第一個div的同時 操作 第2個div
	$("h1").css({"background":"red"}).next().css({"background":"pink"})
	.next().css({"background":"yellow"});
	*/
	$("div").css({"background":"yellow"});
	})
	/**
	注釋的說明：
	01. 開發階段： 便於團隊內部人員閱讀，方便后續維護
	02. 維護階段： 把我們寫好的注釋提取成文檔！哪怕我們在項目中刪除注釋！不影響維護！
	03. 生產階段： 建議刪除注釋，減少文件的大小！提升用戶的體驗！
	*/

6、addClass.js

$(function(){
	//獲取頁面中所有的div動態增加類樣式 之前js中使用的是 className="類名"
	/*$("div").hover(function(){
	$(this).addClass("haha"); 增加樣式
	},function(){
	$(this).removeClass("haha");刪除樣式
	})*/
	/*所有div的點擊事件*/
	$("div").click(function(){
	$(this).toggleClass("haha");
	})
	})

7、changeAll.js

$(function(){
	//通過js獲取dom對象
	var domDiv= document.getElementById("myDiv");
	// domDiv.html(); 是jquery對象才能使用的
	//把dom對象轉換成jquery對象
	$(domDiv).html("就這么神奇的轉換成了query對象");
	//獲取第二個盒子
	var $jqueryDiv= $("#second");
	// 需要把jquery轉換成dom對象
	//$jqueryDiv[0].innerHTML="轉換成dom對象了！";
	$jqueryDiv.get(0).innerHTML="轉換成dom對象了!!！";
	})

8、overAndEnter.js

$(function(){
	//獲取div的鼠標移入事件
	/* $("#father").mouseover(function(){
	$(this).css({"border":"1px solid red"});
	})*/
	$("#father").mouseenter(function(){
	$(this).css({"border":"1px solid red"});
	})
	})

jquery-1.8.3.js

jquery-1.8.3.min.js

jquery-ui.js

jquery.ui.tabs.js

jquery.validate.js