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> |