JavaQuery

1、初识jQuery

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>初始jQuery</title>
	<!--
	初识jQuery: 就是一个简洁的javaScript框架！设计理念： write less do more!

	使用jQuery: 引入需要的js库！

	jquery-1.8.3.js 开发版便于阅读 200kb
	jquery-1.8.3.min.js 生产版压缩了文件 100kb
	-->
	</head>
	<body>

	<div id="myDiv"></div>
	<a href="javascript:" onclick="changeDiv();" name="haha">点击改变div的背景</a>



	<!-- 引入需要的js库必须位于第一个位置-->
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="../js/01base.js"></script>
	<script type="text/javascript" src="../js/02function.js"></script>

	</body>
	</html>

	<!--
	window.onload 和 $(document).ready() 区别
	01.执行时机不同
	window.onload必须等待网页中所有的元素加载完毕，才会执行！
	$(document).ready()网页中的html结构加载完成之后就会执行，有可能图片，视频，音频还没有加载完毕！
	02. window.onload在页面中只能书写一次
	$(document).ready()可以书写N个
	03. window.onload没有简写方式
	$(document).ready() 简写方式是 $(function(){ })
	-->

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>显示和隐藏</title>

	<style type="text/css">
	div{
	display: none; /默认让所有的div隐藏/
	}
	li{
	list-style: none;/去掉li前面的标记/
	}

	</style>

	</head>
	<body>
	<ul>
	<li>
	<a href="#">可爱的小猫咪1</a>
	<div><img src="../images/cat.jpg" height="50px" width="50px"/></div>
	</li>
	<li>
	<a href="#">可爱的小猫咪2</a>
	<div><img src="../images/cat.jpg" height="50px" width="50px"/></div>
	</li>
	<li>
	<a href="#">可爱的小猫咪3</a>
	<div><img src="../images/cat.jpg" height="50px" width="50px"/></div>
	</li>
	</ul>

	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="../js/03showAndHidden.js"></script>


	</body>
	</html>

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>html和text</title>
	</head>
	<body>

	<div id="myDiv"></div>

	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="../js/04htmlAndText.js"></script>

	</body>
	</html>

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>链式操作</title>

	<style type="text/css">
	div{
	width: 50px;
	height: 50px;
	border: 1px solid red;
	}
	</style>
	</head>
	<body>
	<h1>标题</h1>
	<div>第2个盒子</div>
	<div>第3个盒子</div>
	<div>第4个盒子</div>


	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="../js/05link.js"></script>
	</body>
	</html>

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>动态增加类样式</title>

	<style type="text/css">
	div{
	width: 50px;
	height: 50px;
	border: 1px solid red;
	}
	/事先书写完毕/
	.haha{
	background-color: pink;
	}

	</style>
	</head>
	<body>
	<div>第1个盒子</div>
	<div>第2个盒子</div>
	<div>第3个盒子</div>
	<div>第4个盒子</div>

	<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="../js/06addClass.js"></script>




	</body>
	</html>

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Dom和jquery互换</title>
	<!--
	所有通过js的getElement系列获取的对象！我们称之为DOM对象！
	那么这个DOM对象不可能用jquery中的方法！
	$("选择器")这种方式获取的对象！我们称之为jQuery对象！
	jQuery对象也不能使用DOM对象的方法！
	这两个对象分别有自己的一套方法！不能混用！除非转换成对应的对象！
	-->
	</head>
	<body>


	<div id="myDiv">第一个盒子</div>
	<div id="second">第2个盒子</div>


	<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="../js/07changeAll.js"></script>
	</body>
	</html>

<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	</head>
	<body>
	<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
	<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
	<div class="over" style="padding:20px;width:40%;float:left">
	<h2 style="">被触发的 Mouseover 事件：<span></span></h2>
	</div>
	<div class="enter" style="padding:20px;width:40%;float:right">
	<h2 style="">被触发的 Mouseenter 事件：<span></span></h2>
	</div>

	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	x=0;
	y=0;
	$(document).ready(function(){
	$("div.over").mouseover(function(){
	$(".over span").text(x+=1);
	});
	$("div.enter").mouseenter(function(){
	$(".enter span").text(y+=1);
	});
	});
	</script>

	</body>
	</html>