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(){ }) | |
| --> |
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> |
