小菜鳥之HTML第三課
jquery的引入
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery的引入</title> 6 <!--引入（導入）jquery jar包--> 7 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> 8 <script type="text/javascript"> 9 //將腳本寫在這裏 10 //jq的基本語法 11 /* $("選擇器或者對象").ready(function () { 12 13 }); 14 var $doc=$(document 或者選擇器) :表示將javascript對象變成 jq對象 15 $doc能夠調用jq的一些方法和屬性 16 17 */ 18 // 第一個jq的使用,輸出警示框 19 $(document).ready(function () { 20 //選擇器 21 //docuemnt.getElementById("#idname") 22 $("#idname").show(function () { 23 alert("show alert"); 24 25 }); 26 }); 27 28 //jq簡寫 29 $(function () { 30 $("#idname").show(function () { 31 alert("show alert2"); 32 }) 33 }); 34 35 </script> 36 </head> 37 <body> 38 <div id="idname"></div> 39 </body> 40 </html>
基本選擇器的使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>2.基本選擇器的使用</title> 6 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> 7 <script type="text/javascript"> 8 /*jq的基本選擇器 9 * 標籤選擇器 $("p") 10 * id選擇器 $("#idName") 11 * 類選擇器 $(".className") 12 * 並集選擇器 $("p,#idName ,.className") 13 * 全局選擇器 $("*") 14 * */ 15 $(document).ready(function () { 16 $("#idName").css("color","red"); 17 $(".className").css("font-size","30px"); 18 $("dd").css("color","blue"); 19 $("#sanwei,#huozhe,#baicao").css("color","yellow"); 20 $("*").css("font-weight","bold"); 21 22 }); 23 24 </script> 25 </head> 26 <body> 27 <section> 28 <div class="textRigt"> 29 <h1 id="idName">先鋒書店</h1> 30 <p>先鋒書店的介紹</p> 31 <p class="className">先鋒書店的地理位置</p> 32 <div> 33 <dl> 34 <dt>書名</dt> 35 <dd>三味書屋</dd> 36 <dd>百草園</dd> 37 <dd>活着</dd> 38 </dl> 39 <div> 40 <div id="bookName">書名2</div> 41 <div id="sanwei">三味書屋2</div> 42 <div id="baicao">百草園2</div> 43 <div id="huozhe">活着2</div> 44 </div> 45 </div> 46 </div> 47 <div></div> 48 <div></div> 49 <div></div> 50 </section> 51 <div> 52 53 </div> 54 </body> 55 </html>
層次選擇器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>2.層次選擇器</title> 6 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> 7 <script type="text/javascript"> 8 /*層次選擇器是指經過document對象的層次關係進行選擇。 9 後代選擇器：語法 ancentor descendent 10 好比：$("#family span") ：#family 下的全部apan 11 子選擇器： 語法 ancentor>descendent 12 好比：$("#family>span") :表示的 family的兒子被選擇，孫子沒有被選擇 13 相鄰選擇器： 語法 prev+next 14 好比：$("#son1+span") :表示 相鄰的同輩元素被選擇 15 同輩元素選擇器： 語法 prev~sibings 16 好比： $("#son1~div"): 表示 和id爲son1的同輩的全部div 17 18 * */ 19 $(function () { 20 //後代選擇器 21 // $("#family span").css("color","red"); 22 //子選擇器 23 // $("#family>span").css("color","blue"); 24 //相鄰選擇器 25 // $("#son1+span").css("color","yellow"); 26 //同輩元素選擇器 27 // $("#son1~div").css("color","green"); 28 }); 29 30 31 32 </script> 33 </head> 34 <body> 35 <div id="family"> 36 <div id="son1"> 37 <div id="son11">son11</div> 38 <div id="son12">son12</div> 39 <div id="son13">son13</div> 40 <span>son1的親兒子</span><br> 41 <span>son1的親兒子</span> 42 </div> 43 <div>上一個div和下面的span不相鄰</div> 44 <span>family的親兒子</span><br> 45 <span>family的親兒子2</span> 46 47 <div id="son2"> 48 <div id="son21">son21</div> 49 <div id="son22">son22</div> 50 <div id="son23">son23</div> 51 </div> 52 <div id="son3"> 53 <div id="son31">son31</div> 54 <div id="son32">son32</div> 55 <div id="son33">son33</div> 56 </div> 57 </div> 58 </body> 59 </html>
屬性選擇器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3.屬性選擇器</title> 6 <script src="js/jquery-1.8.3.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 /* 9 * 屬性選擇器 :是指經過html元素的屬性選擇元素 10 * 分類： 11 * [attribute^=value] 表示選取的屬性以value開頭的元素 12 * 好比：$("[href^='en']") 表示存在屬性href的值是以en開頭,這種狀況就被選擇 13 * [attribute$=value] 表示以value結尾的元素 14 * 好比 $("[href$='.jpg']") 以.jpg結尾的屬性的元素被選擇 15 * [attribute*=value] 表示屬性值中含value的元素 16 * 好比 $("[href*='abc']") 表示屬性值中含abc字符串的元素 17 * 18 * */ 19 $(function () { 20 //以什麼爲開頭 21 // $("#news a[href^='sale']").css("background","yellow"); 22 //以什麼結尾 23 // $("#news a[href$='.html']").css("background-color","green"); 24 //包含什麼字符串（或者字符） 25 $("#news a[href*='news']").css("background-color","red"); 26 }); 27 </script> 28 </head> 29 <body> 30 <section id="news"> 31 <ul> 32 <li><a href="sale.jd.com/act/h7mf8.html">新聞1</a></li> 33 <li><a href="www.jd.com/news.aspx?id=29257">新聞2</a></li> 34 <li><a href="sale.jd.com/act/k2ad45v.html">新聞3</a></li> 35 <li><a href="www.jd.com/news.aspx?id=29252">新聞4</a></li> 36 <li><a href="sale.jd.com/act/ugk2937w.html" class="last">新聞5</a></li> 37 </ul> 38 </section> 39 </body> 40 </html>
基本過濾選擇器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>4.基本過濾選擇器</title> 6 <script src="js/jquery-1.8.3.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 //基本過濾選擇器 9 /* 10 * 過濾選擇器的格式 ：header 11 * 12 * */ 13 $(function () { 14 //得到頭部元素 15 // $("#container :header").css({"background":"yellow","color":"red"}); 16 //得到列表中的第一個元素 17 // $("#container li:first").css({"background":"yellow","color":"red"}); 18 //得到列表中的最後一個元素 19 // $("#container li:last").css({"background":"yellow","color":"red"}); 20 //得到偶數元素 :even 21 // $("#container li:even").css({"background":"yellow","color":"red"}); 22 //得到奇數元素 ：odd 23 // $("#container li:odd").css({"background":"yellow","color":"red"}); 24 //得到指定元素 :好比想要得到第2個元素 equal 25 // $("#container li:eq(1)").css({"background":"yellow","color":"red"}); 26 //得到某一個範圍的元素 lt <2 < less than >: greater than 27 // $("#container li:lt(2)").css({"background":"yellow","color":"red"}); 28 $("#container li:gt(2)").css({"background":"yellow","color":"red"}); 29 30 }) 31 </script> 32 </head> 33 <body> 34 <div id="container"> 35 <h2>課程列表</h2> 36 <ul> 37 <li>語文</li> 38 <li>數學</li> 39 <li>化學</li> 40 <li>英語</li> 41 <li>體育</li> 42 <li>物理</li> 43 <li>政治</li> 44 </ul> 45 </div> 46 </body> 47 </html>
可見性過濾選擇器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>5.可見性過濾選擇器</title> 6 <script src="js/jquery-1.8.3.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 /* 9 * 可見性過濾選擇器 10 * :hidden 選擇的是隱藏的元素 11 * ：visible 選擇的是顯示的元素 12 * 配合：style的display進行操做的。 13 * */ 14 $(function () { 15 $("#show").click(function () { 16 $("p:hidden").show(); 17 }); 18 $("#hide").click(function () { 19 $("p:visible").hide(); 20 }); 21 }); 22 </script> 23 <style> 24 #text_show{ 25 display: none; 26 color: #00c; 27 } 28 #text_hide{ 29 display:block; 30 color:#ff3300; 31 } 32 </style> 33 </head> 34 <body> 35 <div> 36 <p id="text_hide">點擊按鈕，我會被隱藏</p> 37 <p id="text_show">顯示我，哈哈</p> 38 <input id="show" name="show" value="顯示出來" type="button"> 39 <input id="hide" name="hide" type="button" value="隱藏起來"> 40 </div> 41 42 </body> 43 </html>
.addClass()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>6.addClass()</title> 6 <script src="js/jquery-1.8.3.js"></script> 7 <script type="text/javascript"> 8 /* 9 * 經過jq實現樣式的實際，在行內添加class屬性 10 * */ 11 $(function () { 12 $("#current").click(function () { 13 $("#current").addClass("current") 14 }); 15 }); 16 </script> 17 <style> 18 .current{ 19 background-color: blue; 20 font-weight: bold; 21 } 22 li{ 23 list-style: none; 24 line-height: 20px; 25 cursor: pointer; 26 } 27 </style> 28 </head> 29 <body> 30 <div> 31 <ul> 32 <li id="current">a</li> 33 <li>b</li> 34 <li>c</li> 35 <li>d</li> 36 <li>e</li> 37 </ul> 38 </div> 39 </body> 40 </html>
show方法和hide方法
1 <!doctype html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>7.show方法和hide方法</title> 6 <script src="js/jquery-1.8.3.js"></script> 7 <script type="text/javascript"> 8 $(function () { 9 $("li").mouseover(function () { 10 $(this).children("div").show(); 11 }).mouseout(function () { 12 $(this).children("div").hide(); 13 }); 14 }); 15 </script> 16 <style> 17 li div{ 18 display:none; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="nav-box"> 24 <div class="nav-top"><a href="">商品分類導航</a></div> 25 <ul> 26 <li> 27 <a href="">家用電器</a> 28 <div><img src="a.jsp"/></div> 29 </li> 30 <li> 31 <a href="">手機</a>、 32 <div><img src="b.jpg"/></div> 33 </li> 34 <li> 35 <a href="">電腦</a> 36 <div><img src="c.jpg"/></div> 37 </li> 38 <li> 39 <a href="">家居</a> 40 <div><img src="d.jpg"/></div> 41 </li> 42 <li> 43 <a href="">男裝</a> 44 <div><img src="e.jpg"/></div> 45 </li> 46 </ul> 47 </div> 48 49 </body> 50 </html>
css()方法的使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>8.css()方法的使用</title> 6 <style> 7 p{ 8 display: none;/*先將p內容隱藏起來*/ 9 } 10 </style> 11 <script src="js/jquery-1.8.3.js"></script> 12 <script> 13 $(function () { 14 $("h2").click(function () { 15 $(this).css("color","red").next(). 16 css({"color":"green","display":"block"}); 17 }) 18 }); 19 </script> 20 </head> 21 <body> 22 <div> 23 <h2>百度百科是什麼？</h2> 24 <p>百度百科是。。。。。。。。。。</p> 25 </div> 26 </body> 27 </html>
盒子模型
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>9.盒子模型</title> 6 <style> 7 /*padding 內邊距 就是div元素離邊框的距離 8 margin 外邊距 就是 邊框裏網頁邊緣的舉例 9 盒子的寬和高:是 邊框寬度+內邊距+元素的大小 10 */ 11 .box1{ 12 width: 50px; 13 height: 50px; 14 background-color: #ff3300; 15 border: 10px solid; 16 padding: 20px; 17 margin: 30px; 18 19 } 20 .box2{ 21 /*默認狀況下，都存在margin的兩個盒子之間外邊距會重疊*/ 22 margin:30px; 23 width: 50px; 24 height: 50px; 25 background-color: #0000cc; 26 } 27 /* 28 border 粗細 樣式 顏色 29 border-style 邊框的樣式 30 無邊框樣式，默認 none 31 實線邊框： solid 32 虛線邊框： dashed 33 點狀邊框： dotted 34 雙線邊框： double 35 hidden ：與none相同，能夠解決邊框衝突 36 border-top-style 37 border-bottom-style 38 border-left-style 39 border-right-style 40 border-color 邊框的顏色 41 border-top-color上邊框的顏色 42 border-bottom-color 43 border-left-color 44 border-right-color 45 邊框的粗細 46 border-width 47 值：thin（默認細）medium(默認中)thick(默認粗) 48 像素值： px 49 border-top-width 50 border-bottom-width 51 border-left-width 52 border-right-width 53 統一寫法（簡寫） 54 border:粗細 樣式 顏色(注意點：順序不能顛倒) 55 好比 border: thick solid red 56 只針對一邊： 57 border-top:thick solid red 58 border-bottom:thick solid red 59 border-left:thick solid red 60 border-right:thick solid red 61 */ 62 .box3{ 63 width: 100px; 64 height: 100px; 65 background-color:red; 66 border-top:20px dashed #0000cc; 67 border-bottom: 10px solid gray ; 68 /*如果只設置粗細，不設置樣式，那麼粗細就無效*/ 69 border-left: 5px gold; 70 border-right: 30px solid greenyellow; 71 } 72 /* 73 內邊距：padding 研究的就是它的粗細 74 如何給padding賦值設置粗細 75 padding-top 76 padding-bottom 77 padding-left 78 padding-right 79 統一寫法（簡寫） 80 padding：10px;（四邊都是10px） 81 padding: 5px 10px;（上 右 下等於上 右等於左 ） 82 padding: 5px 10px 15px;（上 右 下 左等於右） 83 padding: 4px 2px 1px 3px;(順序：上 右 下 左 的順時針方向) 84 85 */ 86 .box4{ 87 width: 50px; 88 height: 50px; 89 background: blue; 90 border:10px solid red; 91 padding: 10px 20px; 92 93 } 94 /* 95 margin外邊距的粗細 96 寫法同padding 97 margin-top 98 margin-right 99 margin-bottom 100 margin-left 101 margin:10px 102 margin:10px 20px 103 margin:10px 20px 30px 104 margin:10px 20px 30px 40px 105 */ 106 </style> 107 </head> 108 <body> 109 <div class="box1"></div> 110 <div class="box2"></div> 111 <div class="box3"></div> 112 <div class="box4"></div> 113 114 </body> 115 </html>
margin-top塌陷
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin-top塌陷</title> 6 7 <style> 8 /* 9 如何解決margin的top塌陷？ 10 第一種方法：在外盒子上設置一個邊框 11 第二種方法：給外盒子添加overflow:hidden 12 13 */ 14 .box1{ 15 width:100px; 16 height:100px; 17 background: red; 18 margin: 10px; 19 /*border:3px solid gold;*/ 20 overflow: hidden; 21 22 } 23 .box2{ 24 width:50px; 25 height:50px; 26 background: blue; 27 margin: 10px; 28 border: 10px solid greenyellow; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="box1"> 34 <div class="box2"></div> 35 </div> 36 </body> 37 </html>
1 引入課題 2 java 建立對象，調用屬性和方法。 3 導入jar，使用中的類，建立對象 4 javascript 使用內置js對象（document），調用屬性和方法。 5 jquery就是比如一個jar，導入jar包 6 使用jar中的jq對象，調用其中的方法和屬性 7 javascipt和jquery的關係 8 jquery將javscript語言進行封裝後造成jar包。 9 學習js或者jq的思路 10 三部曲（3步） 11 1 定位選擇 12 2 觸發事件或者調用方法 13 3 執行一些效果 14
相關文章
- 1. 小菜鳥之HTML第二課
- 2. 小菜鳥之HTML第一課
- 3. 小菜鳥之HTML經常使用
- 4. springboot菜鳥第一課
- 5. 小菜鳥之Phyhon
- 6. 小菜鳥之servlet
- 7. 菜鳥成長之路 第三週
- 8. 小程序之菜鳥到小鳥
- 9. 小菜鳥學 MQ（三）
- 10. 小菜鳥的第二天
- 更多相關文章...
- • Eclipse 菜單 - Eclipse 教程
- • HTML 指南 - 網站建設指南
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • RxJava操作符（三）Filtering
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 小菜鳥之HTML第二課
- 2. 小菜鳥之HTML第一課
- 3. 小菜鳥之HTML經常使用
- 4. springboot菜鳥第一課
- 5. 小菜鳥之Phyhon
- 6. 小菜鳥之servlet
- 7. 菜鳥成長之路 第三週
- 8. 小程序之菜鳥到小鳥
- 9. 小菜鳥學 MQ（三）
- 10. 小菜鳥的第二天