第五模塊：WEB開發基礎 第3章·BootStrap&JQuery開發
阿新 • • 發佈：2018-08-09
btn class 彈出 bsp window 右下角 val nload 定義
- 01-JQuery介紹
- 02-jQuery文件引入和加載的區別
- 03-jQuery的基礎選擇器
- 04-jQuery的層級選擇器
- 05-jQuery的基本過濾選擇器
- 06-jQuery的屬性選擇器
- 07-jQuery的篩選選擇器
- 08-jQuery的對象和DOM對象的轉換
- 09-jQuery效果-顯示和隱藏
- 10-jQuery的效果-slide
- 11-jQuery的效果-fade
- 12-jQuery的效果-animate
- 13-右下角彈出小廣告
- 14-jQuery的屬性操作-attr和prop
- 15-jQuery的屬性操作-class和值操作
- 16-操作input中的value值
- 17-jQuery文檔操作-插入節點
- 18-jQuery文檔操作-復制、替換和刪除
- 19-jQuery的位置屬性
- 20-仿淘寶導航欄案例
- 21-jQuery的篩選方法
- 22-選項卡嵌套
- 23-小米官方部分案例
- 24-焦點式輪播圖
- 25-動態實現輪播圖
- 26-事件流
- 27-jQuery事件對象和事件冒泡
- 28-jQuery事件的綁定和移除
- 29-自定義事件和事件代理
- 30-jQuery的鼠標事件一
- 31-jQuery的鼠標事件二
- 32-JQuery的表單事件
- 33-jQuery的ajax技術
- 34-Bootstrap介紹和引入
- 35-相應式原理
- 36-BootStrap的柵格系統介紹
- 37-BootStrap的柵格系統使用
- 38-BootStrap的css全局樣式一
- 39-BootStrap的css全局樣式二
- 40-BootStrap的組件使用一
- 41-BootStrap的組件使用二
- 42-BootStrap插件介紹
01-jQuery介紹
1、jQuery官網；
https://jquery.com/
write less,do more;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01-jquery的介紹</title> <style type="text/css"> div{ width: 100%; height: 100px; margin: 10px 0px 0px 0px; display: none; background-color: red; } </style> </head> <body> <button id="btn">展示</button> <div></div> <div></div> <div></div> <div></div> </body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script type="text/javascript"> /*單獨書寫JavaScript的痛楚： 1、書寫繁瑣，代碼量大； 2、代碼復雜； 3、動畫，開啟定時器，小心定時器的清除，各種操作和處理事件，不好實現； 4、瀏覽器的兼容性； //jQuery解決了以上痛點； */ // window.onload = function(){ // var oBtn = document.getElementsByTagName(‘button‘)[0]; // var ODivs = document.getElementsByTagName(‘div‘); // // oBtn.onclick = function(){ // for(var i = 0;i < ODivs.length;i++){ // ODivs[i].style.display = ‘block‘; // ODivs[i].innerHTML = ‘div展示了‘; // } // } // // } //jQuery實現； $(function(){ $(‘#btn‘).click(function(){ $(‘div‘).css(‘display‘,‘block‘); $(‘div‘).html(‘div展示了‘) }) }) </script> </html>
02-jQuery文件引入和加載的區別
03-jQuery的基礎選擇器
04-jQuery的層級選擇器
05-jQuery的基本過濾選擇器
06-jQuery的屬性選擇器
07-jQuery的篩選選擇器
08-jQuery的對象和DOM對象的轉換
09-jQuery效果-顯示和隱藏
10-jQuery的效果-slide
11-jQuery的效果-fade
12-jQuery的效果-animate
13-右下角彈出小廣告
14-jQuery的屬性操作-attr和prop
15-jQuery的屬性操作-class和值操作
16-操作input中的value值
17-jQuery文檔操作-插入節點
18-jQuery文檔操作-復制、替換和刪除
19-jQuery的位置屬性
20-仿淘寶導航欄案例
21-jQuery的篩選方法
22-選項卡嵌套
23-小米官方部分案例
24-焦點式輪播圖
25-動態實現輪播圖
26-事件流
27-jQuery事件對象和事件冒泡
28-jQuery事件的綁定和移除
29-自定義事件和事件代理
30-jQuery的鼠標事件一
31-jQuery的鼠標事件二
32-JQuery的表單事件
33-jQuery的ajax技術
34-Bootstrap介紹和引入
35-相應式原理
36-BootStrap的柵格系統介紹
37-BootStrap的柵格系統使用
38-BootStrap的css全局樣式一
39-BootStrap的css全局樣式二
40-BootStrap的組件使用一
41-BootStrap的組件使用二
42-BootStrap插件介紹
第五模塊：WEB開發基礎 第3章·BootStrap&JQuery開發