yunfeioliver 2017-11-04 18:52 原文
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(){ }) |
|
--> |
2、显示和隐藏
<!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> |
3、html和text
<!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> |
4、链式操作
<!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> |
5、动态增加类样式
<!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> |
6、Dom和jquery互换
<!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> |
7、over和enter的区别
<!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> |
谦卑若愚
好学若饥
不忘初心
推荐阅读