标签：javascrip section text 可见 last otto char color 创建对象
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
标签：javascrip section text 可见 last otto char color 创建对象
原文地址：https://www.cnblogs.com/czg-0705/p/11664781.html
