正文
小菜鸟之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
