note
上节作业问题： 1、css重用 <style> 如果整个页面的宽度 > 900px时： { .c{ 共有 } .c1{ 独有 } } .c2{ 独有 } </style> <div class='c c1'></div> <div class='c c2'></div> 2、自适应 和 改变大小变形 左右滚动条的出现 宽度，百分比 页面最外层：像素的宽度 => 最外层设置绝对宽度 自适应：media 3、默认img标签，有一个1px的边框 img{ border: 0; } 4、作业中的数量输入框 -js 上节内容回顾 1、块级和行内 2、form标签 <form action='http://sssss' methed='GET' enctype='multipart/form-data'> <div>asdfasdf</div> <input type='text' name='q' /> <input type='text' name='b' /> # 上传文件 <input type='file' name='f' /> <input type='submit' /> </form> GET: http://sssss?q=用户输入的值 http://sssss?q=用户输入的值&b=用户输入的内容 POST： 请求头 请求内容 3、display: block;inline;inline-block 4、float： <div> <div style='float:left;'>f</div> <div style='clear:both;'></div> </div> 5、margin: 0 auto; 6、padding, ---> 自身发生变化 CSS补充 position: a. fixed => 固定在页面的某个位置 b. relative + absolute <div style='position:relative;'> <div style='position:absolute;top:0;left:0;'></div> </div> opcity: 0.5 透明度 z-index: 层级顺序 overflow: hidden,auto(scroll) ---超过范围左右出现滚动条 hover background-image:url('image/4.gif'); # 默认，div大，图片重复放 background-repeat: repeat-y; background-position-x: background-position-y: 示例：输入框 ---s11 JavaScript 独立的语言，浏览器具有js解释器 JavaScript代码存在形式： - Head中 <script> //javascript代码 alert(123); </script> <script type="text/javascript"> //javascript代码 alert(123); </script> - 文件 <script src='js文件路径'> </script> PS: JS代码需要放置在 <body>标签内部的最下方 ---s15 注释 当行注释 // 多行注释 /* */ ---s16 变量： python： name = 'alex' JavaScript: name = 'alex' # 全局变量 var name = 'eric' # 局部变量 写Js代码： - html文件中编写 - 临时，浏览器的终端 console 基本数据类型 数字 a = 18; 字符串 a = "alex" a.chartAt(索引位置) a.substring(起始位置，结束位置) a.length 获取当前字符串长度 ... 定时器： setInterval('执行的代码',间隔时间) 列表(数组) a = [11,22,33] 字典(在JavaScript中属于对象类型) a = {'k1':'v1','k2':'v2'} 布尔类型 小写 for循环 1. 循环时，循环的元素是索引 a = [11,22,33,44] for(var item in a){ console.log(item); } a = {'k1':'v1','k2':'v2'} for(var item in a){ console.log(item); } break；continue与python一样 while循环 while(条件){} 与python一样 2. for(var i=0;i<10;i=i+1){ } a = [11,22,33,44] for(var i=0;i<a.length;i=i+1){ } 第二种不支持字典的循环 条件语句 if(条件){ }else if(条件){ }else if(条件){ }else{ } == 值相等 === 值和类型都相等 && and || or switch语句 name='1' switch(name){ case '1': age=123; break; case '2': age=456; break; default: age=777; } 函数： function 函数名(a,b,c){ } 函数名(1,2,3) Dom 1、找到标签 获取单个元素 document.getElementById('i1') 获取多个元素（列表）document.getElementsByTagName('div') 获取多个元素（列表）document.getElementsByClassName('c1') a. 直接找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 b. 间接 tag = document.getElementById('i1') parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素 2、操作标签 a. innerText 获取标签中的文本内容 标签.innerText 对标签内部文本进行重新赋值 标签.innerText = "" b. className tag.className =》 直接整体做操作 tag.classList.add('样式名') 添加指定样式 tag.classList.remove('样式名') 删除指定样式 PS： <div οnclick='func();'>点我</div> <script> function func(){ } </script> c. checkbox 获取值 checkbox对象.checked 设置值 checkbox对象.checked = true alert() 弹窗 console.log() ---百度招聘 实例： 莅临指导 多选 模态对话框 左侧菜单 返回顶部 作业： 1、登录、注册，练习：position 2、后台管理页面 - 左侧菜单 - 右边表格，全选反向，模态框，返回顶部 3、商城页面
s1
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 img{ 8 border: 0; 9 } 10 </style> 11 </head> 12 <body> 13 <a href="http://www.oldboyedu.com" >asdf</a> 14 <a href="http://www.oldboyedu.com"> 15 <img src="1.jpg" style="width: 200px;height: 300px;"> 16 </a> 17 </body> 18 </html>
s2
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white; 9 position: fixed; 10 bottom:20px; 11 right: 20px; 12 ">返回顶部</div> 13 <div style="height: 5000px;background-color: #dddddd;"> 14 asdfasdf 15 </div> 16 <script> 17 function GoTop(){ 18 document.body.scrollTop = 0; 19 } 20 </script> 21 </body> 22 </html>
s3
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .pg-header{ 8 height: 48px; 9 background-color: black; 10 color: #dddddd; 11 position: fixed; 12 top:0; 13 right: 0; 14 left: 0; 15 } 16 .pg-body{ 17 background-color: #dddddd; 18 height: 5000px; 19 margin-top: 50px; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="pg-header">头部</div> 25 <div class="pg-body">内容</div> 26 </body> 27 </html>
s4
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="width: 50px;height: 50px;background-color: black;position: absolute;right: 0;bottom: 0;">asdf</div> 9 <div style="height: 5000px;background-color: #dddddd;"> 10 asdfasdf 11 </div> 12 </body> 13 </html>
s5
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> 9 <div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div> 10 </div> 11 <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> 12 <div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div> 13 </div> 14 <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> 15 <div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div> 16 </div> 17 </body> 18 </html>
s6
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="display:none;z-index:10; position: fixed;top: 50%;left:50%; 9 margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; "> 10 <input type="text" /> 11 <input type="text" /> 12 <input type="text" /> 13 </div> 14 <div style="display:none;z-index:9; position: fixed;background-color: black; 15 top:0; 16 bottom: 0; 17 right: 0; 18 left: 0; 19 opacity: 0.5;"> 20 </div> 21 <div style="height: 5000px;background-color: green;"> 22 asdfasdf 23 </div> 24 </body> 25 </html>
s7
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="height: 200px;width: 300px;overflow: auto"> 9 <img src="1.jpg"> 10 </div> 11 <div style="height: 200px;width: 300px;overflow: hidden"> 12 <img src="1.jpg"> 13 </div> 14 </body> 15 </html>
s8
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .pg-header{ 8 position: fixed; 9 right: 0; 10 left: 0; 11 top: 0; 12 height: 48px; 13 background-color: #2459a2; 14 line-height: 48px; 15 } 16 .pg-body{ 17 margin-top: 50px; 18 } 19 .w{ 20 width: 980px; 21 margin: 0 auto; 22 } 23 .pg-header .menu{ 24 display: inline-block; 25 padding: 0 10px 0 10px; 26 color: white; 27 } 28 /*当鼠标移动到当前标签上时，以下css属性才生效*/ 29 .pg-header .menu:hover{ 30 background-color: blue; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="pg-header"> 36 <div class="w"> 37 <a class="logo">LOGO</a> 38 <a class="menu">全部</a> 39 <a class="menu">42区</a> 40 <a class="menu">段子</a> 41 <a class="menu">1024</a> 42 </div> 43 </div> 44 <div class="pg-body"> 45 <div class="w">a</div> 46 </div> 47 </body> 48 </html>
s9
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="height: 100px;"></div> 9 <div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;"></div> 10 </body> 11 </html>
s10
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div> 9 <input class="c1" type="radio" name="gender" value="1" /> 10 <input type="radio" name="gender" value="2" /> 11 </div> 12 </body> 13 </html>
s11
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style=" height: 35px;width: 400px;position: relative;"> 9 <input type="text" style="height: 35px;width: 400px;" /> 10 <span style="position:absolute;right:0;top:10px;background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block;"></span> 11 </div> 12 </body> 13 </html>
s12
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="text" id="user" > 9 <input type="button" onclick="GetData();" value="点我" /> 10 <script> 11 function GetData(){ 12 var i = document.getElementById('user'); 13 alert(i.value); 14 } 15 </script> 16 </body> 17 </html>
s13
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*css代码*/ 8 </style> 9 <!--<script>--> 10 <!--//javascript代码--> 11 <!--alert(123);--> 12 <!--</script>--> 13 </head> 14 <body> 15 </body> 16 </html>
s14
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="commons.js"></script> 7 <script type="text/javascript"> 8 //javascript代码 9 alert(123); 10 </script> 11 </head> 12 <body> 13 </body> 14 </html>
s15
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <h1>asdf</h1> 9 <h1>asdf</h1> 10 <h1>asdf</h1> 11 <h1>asdf</h1> 12 <h1>asdf</h1> 13 <h1>asdf</h1> 14 <h1>asdf</h1> 15 <script src="https://www.gstasdfasdfc.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script> 16 <script> 17 function 18 </script> 19 </body> 20 </html>
s16
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <h1>sadf</h1> 9 <script> 10 /* 11 name = 'alex'; 12 function func(){ 13 var name = 'eric' 14 }*/ 15 age = "18"; 16 i = parseInt(age); 17 </script> 18 </body> 19 </html>
s17
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script> 9 function f1(){ 10 console.log(1); 11 } 12 // 创建一个定时器 13 //setInterval("alert(123);", 5000); 14 setInterval("f1();", 2000); 15 </script> 16 </body> 17 </html>
s18
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="i1">欢迎老男孩莅临指导</div> 9 <script> 10 function func(){ 11 // 根据ID获取指定标签的内容,定于局部变量接受 12 var tag = document.getElementById('i1'); 13 // 获取标签内部的内容 14 var content = tag.innerText; 15 var f = content.charAt(0); 16 var l = content.substring(1,content.length); 17 var new_content = l + f; 18 tag.innerText = new_content; 19 } 20 setInterval('func()', 500); 21 </script> 22 </body> 23 </html>
s19
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="i1">我是i1</div> 9 <a>asdf</a> 10 <a>909</a> 11 <a>kafsufd</a> 12 </body> 13 </html>
s20
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div> 9 <div></div> 10 <div> 11 c1 12 </div> 13 </div> 14 <div> 15 <div></div> 16 <div id="i1"> 17 c2 18 </div> 19 </div> 20 <div> 21 <div></div> 22 <div> 23 c3 24 </div> 25 </div> 26 </body> 27 </html>
s21
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .c1{ 11 position: fixed; 12 left: 0; 13 top: 0; 14 right: 0; 15 bottom: 0; 16 background-color: black; 17 opacity: 0.6; 18 z-index: 9; 19 } 20 .c2{ 21 width: 500px; 22 height: 400px; 23 background-color: white; 24 position: fixed; 25 left: 50%; 26 top: 50%; 27 margin-left: -250px; 28 margin-top: -200px; 29 z-index: 10; 30 } 31 </style> 32 </head> 33 <body style="margin: 0;"> 34 <div> 35 <input type="button" value="添加" onclick="ShowModel();" /> 36 <input type="button" value="全选" onclick="ChooseAll();" /> 37 <input type="button" value="取消" onclick="CancleAll();" /> 38 <input type="button" value="反选" onclick="ReverseAll();" /> 39 <table> 40 <thead> 41 <tr> 42 <th>选择</th> 43 <th>主机名</th> 44 <th>端口</th> 45 </tr> 46 </thead> 47 <tbody id="tb"> 48 <tr> 49 <td> 50 <input type="checkbox" /> 51 </td> 52 <td>1.1.1.1</td> 53 <td>190</td> 54 </tr> 55 <tr> 56 <td><input type="checkbox"f id="test" /></td> 57 <td>1.1.1.2</td> 58 <td>192</td> 59 </tr> 60 <tr> 61 <td><input type="checkbox" /></td> 62 <td>1.1.1.3</td> 63 <td>193</td> 64 </tr> 65 </tbody> 66 </table> 67 </div> 68 <!-- 遮罩层开始 --> 69 <div id="i1" class="c1 hide"></div> 70 <!-- 遮罩层结束 --> 71 <!-- 弹出框开始 --> 72 <div id="i2" class="c2 hide"> 73 <p><input type="text" /></p> 74 <p><input type="text" /></p> 75 <p> 76 <input type="button" value="取消" onclick="HideModel();"/> 77 <input type="button" value="确定"/> 78 </p> 79 </div> 80 <!-- 弹出框结束 --> 81 <script> 82 function ShowModel(){ 83 document.getElementById('i1').classList.remove('hide'); 84 document.getElementById('i2').classList.remove('hide'); 85 } 86 function HideModel(){ 87 document.getElementById('i1').classList.add('hide'); 88 document.getElementById('i2').classList.add('hide'); 89 } 90 function ChooseAll(){ 91 var tbody = document.getElementById('tb'); 92 // 获取所有的tr 93 var tr_list = tbody.children; 94 for(var i=0;i<tr_list.length;i++){ 95 // 循环所有的tr，current_tr 96 var current_tr = tr_list[i]; 97 var checkbox = current_tr.children[0].children[0]; 98 checkbox.checked = true; 99 } 100 } 101 function CancleAll(){ 102 var tbody = document.getElementById('tb'); 103 // 获取所有的tr 104 var tr_list = tbody.children; 105 for(var i=0;i<tr_list.length;i++){ 106 // 循环所有的tr，current_tr 107 var current_tr = tr_list[i]; 108 var checkbox = current_tr.children[0].children[0]; 109 checkbox.checked = false; 110 } 111 } 112 function ReverseAll(){ 113 var tbody = document.getElementById('tb'); 114 // 获取所有的tr 115 var tr_list = tbody.children; 116 for(var i=0;i<tr_list.length;i++){ 117 // 循环所有的tr，current_tr 118 var current_tr = tr_list[i]; 119 var checkbox = current_tr.children[0].children[0]; 120 if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}} 121 </script> 122 </body> 123 </html>
s22
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .item .header{ 11 height: 35px; 12 background-color: #2459a2; 13 color: white; 14 line-height: 35px; 15 } 16 </style> 17 </head> 18 <body> 19 <div style="height: 48px"></div> 20 <div style="width: 300px"> 21 <div class="item"> 22 <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div> 23 <div class="content"> 24 <div>内容1</div> 25 <div>内容1</div> 26 <div>内容1</div> 27 </div> 28 </div> 29 <div class="item"> 30 <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div> 31 <div class="content hide"> 32 <div>内容2</div> 33 <div>内容2</div> 34 <div>内容2</div> 35 </div> 36 </div> 37 <div class="item"> 38 <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div> 39 <div class="content hide"> 40 <div>内容3</div> 41 <div>内容3</div> 42 <div>内容3</div> 43 </div> 44 </div> 45 <div class="item"> 46 <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div> 47 <div class="content hide"> 48 <div>内容4</div> 49 <div>内容4</div> 50 <div>内容4</div> 51 </div> 52 </div> 53 </div> 54 <script> 55 function ChangeMenu(nid){ 56 var current_header = document.getElementById(nid); 57 var item_list = current_header.parentElement.parentElement.children; 58 for(var i=0;i<item_list.length;i++){ 59 var current_item = item_list[i]; 60 current_item.children[1].classList.add('hide'); 61 } 62 current_header.nextElementSibling.classList.remove('hide'); 63 } 64 </script> 65 </body> 66 </html>
梳理
CSS补充： - position - background - hover - overflow - z-index - opacity 示例：输入框右边放置图标 JavaScript： 局部变量 var 基本数据类型： 数字 字符串 数组 字典 布尔值 For循环 条件语句 == != === !== || && 函数的定义： function func(){ ... } Dom 找标签 - 直接找 $('#id') $('.c1').siblings() - 简介找 操作： innerText checkbox: checked className classList 事件： <div οnclick='函数(123)'></div> <script> 。。。。 </script> 定时器 setInterval('函数()', 4000) 其他： alert() console.log() 实例： 莅临指导 多选 模态对话框 左侧菜单 返回顶部
扫一扫
682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
