小菜鸟之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  &lt; less than  &gt: 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 

猜你喜欢

转载自www.cnblogs.com/czg-0705/p/11664781.html