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