标签：function color 菜鸟 HTML red 第三课 border 选择器 css
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
标签：function,color,菜鸟,HTML,red,第三课,border,选择器,css 来源： https://www.cnblogs.com/czg-0705/p/11664781.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。