复习前端知识（一）（基础h5+css+js）
笔记：
HTML 1、一套规则，浏览器认识的规则。 2、开发者： 学习Html规则 开发后台程序： - 写Html文件（充当模板的作用） ****** - 数据库获取数据，然后替换到html文件的指定位置（Web框架） 3、本地测试 - 找到文件路径，直接浏览器打开 - pycharm打开测试 4、编写Html文件 - doctype对应关系 - html标签，标签内部可以写属性 ====> 只能有一个 - 注释： <!-- 注释的内容 --> 5、标签分类 - 自闭合标签 <meta charset="UTF-8"> - 主动闭合标签 title>老男孩</title> 6、 head标签中 - <meta -> 编码，跳转，刷新，关键字，描述，IE兼容 <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" /> - title标签 - <link /> 搞图标，欠 - <style />欠 - <script> 欠 7、body标签 - 图标， > < - p标签，段落 - br，换行 ======== 小总结 ===== 所有标签分为： 块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距） 行内标签： span（白板） 标签之间可以嵌套 标签存在的意义，css操作，js操作 ps:chorme审查元素的使用 - 定位 - 查看样式 - h系列 - div - span - input系列 + form标签 input type='text' - name属性，value="赵凡" input type='password' - name属性，value="赵凡" input type='submit' - value='提交' 提交按钮，表单 input type='button' - value='登录' 按钮 input type='radio' - 单选框 value，checked="checked"，name属性（name相同则互斥） input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据） input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data" input type='rest' - 重置 <textarea >默认值</textarea> - name属性 select标签 - name,内部option value, 提交到后台，size，multiple - a标签 - 跳转 - 锚 href='#某个标签的ID' 标签的ID不允许重复 - img src alt title - 列表 ul li ol li dl dt dd - 表格 table thead tr th tbody tr td colspan = '' rowspan = '' - label 用于点击文件，使得关联的标签获取光标 <label for="username">用户名：</label> <input id="username" type="text" name="user" /> - fieldset legend - 20个标签 CSS 在标签上设置style属性： background-color: #2459a2; height: 48px; ... 编写css样式： 1. 标签的style属性 2. 写在head里面 style标签中写样式 - id选择区 #i1{ background-color: #2459a2; height: 48px; } - class选择器 ****** .名称{ ... } <标签 class='名称'> </标签> - 标签选择器 div{ ... } 所有div设置上此样式 - 层级选择器（空格） ****** .c1 .c2 div{ } - 组合选择器（逗号） ****** #c1,.c2,div{ } - 属性选择器 ****** 对选择到的标签再通过属性再进行一次筛选 .c1[n='alex']{ width:100px; height:200px; } PS: - 优先级，标签上style优先，编写顺序，就近原则 2.5 css样式也可以写在单独文件中 <link rel="stylesheet" href="commons.css" /> 3、注释 /* */ 4、边框 - 宽度，样式，颜色 (border: 4px dotted red;) - border-left 5、 height， 高度 百分比 width， 宽度 像素，百分比 text-align:ceter, 水平方向居中 line-height，垂直方向根据标签高度 color、 字体颜色 font-size、 字体大小 font-weight 字体加粗 6、float 让标签浪起来，块级标签也可以堆叠 老子管不住： <div style="clear: both;"></div> 7、display display: none; -- 让标签消失 display: inline; display: block; display: inline-block; 具有inline,默认自己有多少占多少 具有block，可以设置无法设置高度，宽度，padding margin ****** 行内标签：无法设置高度，宽度，padding margin 块级标签：设置高度，宽度，padding margin 8、padding margin(0,auto)
head中：
<!DOCTYPE html> <!-- 类似html这种格式,标签，html标签 <html>fasdfasdf</html> # 标签内部的属性--> <html lang="en"> <head> <!-- 声明编码 --> <meta charset="UTF-8"> <!-- 三秒刷新 --> <meta http-equiv="Refresh" Content="3"> <!-- 三秒后跳转到制定网站 --> <meta http-equiv="Refresh" Content="3;Url=http://www.autohome.com.cn"> <!-- 关键字，给搜索引擎用 --> <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/> <!-- 对网站的描述 --> <meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。"/> <!-- ie兼容 --> <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" /> <title>老男孩</title> <link /> 搞图标，欠 <style />欠 <script/> 欠 </head> <body> <div></div> <a href="http://www.oldboyedu.com">老男孩</a> </body> </html>
浏览器和python的小交互：
# -*- coding: utf-8 -*- import tornado.web # pip3 install tornado class MainHandler(tornado.web.RequestHandler): def get(self): print(111) u = self.get_argument('user') e = self.get_argument('email') p = self.get_argument('pwd') if u == 'alex' and p == '123' and e == 'alex@126.com': self.write("OK") else: self.write("滚") def post(self, *args, **kwargs): u = self.get_argument('user', None) e = self.get_argument('email', None) p = self.get_argument('pwd', None) print(u, e, p) self.write('POST') application = tornado.web.Application([ (r"/index", MainHandler), ]) if __name__ == "__main__": application.listen(8889) tornado.ioloop.IOLoop.instance().start()
<!DOCTYPE html> <html> <head> <title>title</title> </head> <body> <form action="http://localhost:8889/index"> <input type="text" name="user"/> <input type="text" name="email"/> <input type="password" name="pwd"/> <input type="button" value="button" /> <input type="submit" value="submit" /> </form> </body> </html>
form表单提交：
<!DOCTYPE html> <html> <head> <title>title</title> </head> <body> <form enctype="multipart/form-data"> <div> <input type="text" name="user"/> 男：<input type="radio" name="gener" value="1" /> 女：<input type="radio" name="gener" value="2" /> Alex:<input type="radio" name="gener" value="3"/> <p>爱好：</p> 足球：<input type="checkbox" name="favor" value="football"/> 篮球：<input type="checkbox" name="favor" value="basketball"/> <p>技能</p> 撩妹：<input type="checkbox" name="skill" value="up" checked="checked"/> 写代码<input type="checkbox" name="skill" value="coding" /> <p>上传文件</p> <input type="file" name="fname"> <textarea name="meno">asdas</textarea> <select name="city" size="10" multiple="multiple"> <optgroup label="江苏省"> <option value="nanking">南京</option> <option value="suzhou">苏州</option> <option value="others">others</option> </optgroup> <optgroup label="浙江省"> <option value="hangzhou">杭州</option> <option value="taizhou">台州</option> <option value="ningbo">宁波</option> </optgroup> </select> </div> <input type="submit" name="提交"/> <input type="reset" name="重置"/> </form> </body> </html>
a标签：跳转和锚点
<!DOCTYPE html> <html> <head> <title>title</title> </head> <body> <a href="http://www.baidu.com" target="_blank">百度</a> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <div id="i1" style="height: 600px;">第一章的内容</div> <div id="i2" style="height: 600px;">第二章的内容</div> <div id="i3" style="height: 600px;">第三章的内容</div> <div id="i4" style="height: 600px;">第四章的内容</div> </body> </html>
table标签
<!DOCTYPE html> <html> <head> <title>title</title> </head> <body> <table border="1"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> <th>表头4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="3">333</td> </tr> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table> </body> </html>
label：给input绑定标签，点击获取光标
<!DOCTYPE html> <html> <head> <title>title</title> </head> <body> <label for="username">用户名：</label> <input id="username" type="text" name="username"> </body> </html>
position：fixed，菜单固定在顶部
<!DOCTYPE html> <html> <head> <title>Title</title> <style> .header{ background-color: #aca9a9; position: fixed; top:0; left: 0; right: 0; height: 40px; } .content{ margin:42px 0 0; height: 5000px; background-color: #dddddd; } </style> </head> <body> <div class="header">头部</div> <div class="content">内容</div> </body> </html>
position的relative和absolute的联合使用：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <div style="position: relative;width: 500px;height: 200px;margin: 5px auto;border: 1px solid red;"> <div style="position: absolute;left: 3px;bottom: 3px;background-color: black;height: 50px;width: 50px;"> </div> </div> <div style="position: relative;width: 500px;height: 200px;margin: 5px auto;border: 1px solid red;"> <div style="position: absolute;left: 3px;bottom: 3px;background-color: black;height: 50px;width: 50px;"> </div> </div> <div style="position: relative;width: 500px;height: 200px;margin: 5px auto;border: 1px solid red;"> <div style="position: absolute;left: 3px;bottom: 3px;background-color: black;height: 50px;width: 50px;"> </div> </div> <div style="position: relative;width: 500px;height: 200px;margin: 5px auto;border: 1px solid red;"> <div style="position: absolute;left: 3px;bottom: 3px;background-color: black;height: 50px;width: 50px;"> </div> </div> </body> </html>
z-index：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <div style="/*display: none;*/z-index:10;position: fixed;top: 50%;left: 50%; margin-left: -250px;margin-top: -200px;background-color: white;height: 400px;width:500px;"> <input type="text" name=""/> <input type="text" name=""/> <input type="text" name=""/> </div> <div style="/*display: none;*/z-index:9;position: fixed;background-color: black; top: 0;left: 0;bottom: 0;right: 0;opacity: 0.5;"> </div> </body> </html>
overflow：hidden和auto
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <div style="height: 200px;width: 300px; overflow: auto;"> <img src="1.jpg"> </div> <div style="height: 200px;width: 300px; overflow: hidden;"> <img src="1.jpg"> </div> </body> </html>
图标效果
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <title>Title</title> <style> .user_input{ position: absolute; right: 6px; top: 10px; display: inline-block; height: 16px; width: 16px;" } </style> </head> <body> <div style="height: 35px;width: 400px;position: relative;"> <input type="text" name="username" style="width: 370px;height: 35px;padding-right: 35px;" /> <span class="user_input" style="background-image: url(i_name.jpg);"></span> </div> </body> </html>
js的定时器做个动态效果：
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <title>Title</title> </head> <body> <div id="show">欢迎来路飞学城玩呀</div> <script type="text/javascript"> function myfun() { var tag = document.getElementById('show'); var show = tag.innerText; var f = show.charAt(0); var left = show.substring(1,show.length); console.log(f); console.log(left); var new_content = left + f; tag.innerText = new_content; } setInterval('myfun()',800); </script> </body> </html>
Js遍历数组的另一种方式：
var arr =['f1','werwe2','wer3']; for(item in arr){ console.log(arr[item]) }
JS的 == 值相等即可 === 值和类型都相等
var a = '1'; var b = 1; console.log(a==b); console.log(a===b);
Js的Dom相关初级：
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <title>Title</title> </head> <body> <div id="i1">我是i1</div> <a href="">adsas</a> <a href="">fds</a> <a href="">fhs</a> </script> </body> </html>
对应的在控制台写的Js：
document.getElementById('i1').innerText = 'simon';
tags = document.getElementsByTagName('a');
for(var i=0;i<tags.length;i++){
tags[i].innerText='333';
}
插入个相关笔记：
上节作业问题： 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、作业中的数量输入框 上节内容回顾 1、块级和行内 2、form标签 <form action='http://sssss' methed='GET' enctype='multi'> <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. fiexd => 固定在页面的某个位置 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 hover background-image:url('image/4.gif'); # 默认，div大，图片重复访 background-repeat: repeat-y; background-position-x: background-position-y: 示例：输入框 JavaScript 独立的语言，浏览器具有js解释器 JavaScript代码存在形式： - Head中 <script> //javascript代码 alert(123); </script> <script type="text/javascript"> //javascript代码 alert(123); </script> - 文件 <script src='js文件路径'> </script> PS: JS代码需要放置在 <body>标签内部的最下方 注释 当行注释 // 多行注释 /* */ 变量： python： name = 'alex' JavaScript: name = 'alex' # 全局变量 var name = 'eric' # 局部变量 写Js代码： - html文件中编写 - 临时，浏览器的终端 console 基本数据类型 数字 a = 18; 字符串 a = "alex" a.chartAt(索引位置) a.substring(起始位置，结束位置) a.lenght 获取当前字符串长度 ... 列表(数组) a = [11,22,33] 字典 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); } 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 函数： 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 onclick='func();'>点我</div> <script> function func(){ } </script> c. checkbox 获取值 checkbox对象.checked 设置值 checkbox对象.checked = true 作业： 1、登录、注册，练习：position 2、后台管理页面 - 左侧菜单 - 右边表格，全选反向，模态框，返回顶部 3、商城页面
Js实现模态弹窗+表格反选：
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; right: 0; bottom: 0; top: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 550px; height: 400px; background-color: white; position: fixed; left: 50%; right: 50%; margin-top: 100px; margin-left: 100px; z-index: 10; } </style> </head> <body> <div> <input type="button" value="添加" onclick="ShowModel();"/> <input type="button" value="全选" onclick="ChooseAll();"/> <input type="button" value="取消" onclick="CancelAll();"/> <input type="button" value="反选" onclick="ReserveAll();"/> <table> <thead> <tr> <th>选择</th> <th>主机</th> <th>端口号</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" name=""/> </td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td> <input type="checkbox" name=""/> </td> <td>1.1.1.2</td> <td>190</td> </tr> <tr> <td> <input type="checkbox" checked="true" name=""/> </td> <td>1.1.1.3</td> <td>190</td> </tr> </tbody> </table> </div> <!-- 遮罩层开始 --> <div id="i1" class="c1 hide"></div> <!-- 遮罩层结束 --> <!-- 弹出框开始 --> <div id="i2" class="c2 hide"> <label for="username">用户名：</label> <input type="text" name="username"/> <label for="psd">密码：</label> <input type="text" name="psd"/> <input type="button" value="确定" name=""> <input type="button" value="取消" name="" onclick="HideModel();"> </div> <!-- 弹出框结束 --> <script type="text/javascript"> function ShowModel() { document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function HideModel() { document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } function ChooseAll(){ var tr_list = document.getElementById('tb').children; for (var i=0;i<tr_list.length;i++) { tr_list[i].children[0].children[0].checked = 1; } } function ReserveAll(){ var tr_list = document.getElementById('tb').children; for (var i=0;i<tr_list.length;i++) { tr_list[i].children[0].children[0].checked = !tr_list[i].children[0].children[0].checked; } } function CancelAll(){ var tr_list = document.getElementById('tb').children; for (var i=0;i<tr_list.length;i++) { tr_list[i].children[0].children[0].checked = 0; } } </script> </body> </html>
Js实现菜单显隐：
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <title></title> <style> .hide{ display: none; } .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px;"></div> <div style="width: 300px;"> <div class="item"> <div id="i1" class="header" onclick="ChangeMenu('i1')"> 菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <div class="item"> <div id="i2" class="header" onclick="ChangeMenu('i2')">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div id="i3" class="header" onclick="ChangeMenu('i3')">菜单3</div> <div class="content hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> <div class="item"> <div id="i4" class="header" onclick="ChangeMenu('i4')">菜单4</div> <div class="content hide"> <div>内容4</div> <div>内容4</div> <div>内容4</div> </div> </div> </div> <script type="text/javascript"> function ChangeMenu(nid){ var current_header = document.getElementById(nid); var item_list = current_header.parentElement.parentElement.children; for(var i=0;i<item_list.length;i++){ item_list[i].children[1].classList.add('hide'); } current_header.nextElementSibling.classList.remove('hide'); } </script> </body> </html>
另一种写法：传this，不传id
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <title></title> <style> .hide{ display: none; } .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px;"></div> <div style="width: 300px;"> <div class="item"> <div id="i1" class="header" onclick="ChangeMenu(this)"> 菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <div class="item"> <div id="i2" class="header" onclick="ChangeMenu(this)">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div id="i3" class="header" onclick="ChangeMenu(this)">菜单3</div> <div class="content hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> <div class="item"> <div id="i4" class="header" onclick="ChangeMenu(this)">菜单4</div> <div class="content hide"> <div>内容4</div> <div>内容4</div> <div>内容4</div> </div> </div> </div> <script type="text/javascript"> function ChangeMenu(ths){ // var current_header = document.getElementById(nid); var current_header = ths; var item_list = current_header.parentElement.parentElement.children; for(var i=0;i<item_list.length;i++){ item_list[i].children[1].classList.add('hide'); } current_header.nextElementSibling.classList.remove('hide'); } </script> </body> </html>
布局：左侧菜单栏固定
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <title></title> <style> body{ margin:0; } .pg-header{ height: 48px; background-color: #2459a2; color: white; } .left{ float: left; } .pg-content .menu{ position: fixed; top: 48px; left: 0; bottom: 0; width: 200px; background-color: #dddddd; } .pg-content .content{ position: fixed; top: 48px; right: 0; bottom: 0; left: 200px; background-color: purple; overflow: auto; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left">aaa</div> <div class="content left"> <p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p> </div> </div> <div class="pg-footer"></div> </body> </html>
布局：左侧以及上下不动
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <title></title> <style> body{ margin:0; } .pg-header{ height: 48px; background-color: #2459a2; color: white; } .left{ float: left; } .pg-content .menu{ position: absolute; top: 48px; left: 0; bottom: 0; width: 200px; background-color: #dddddd; } .pg-content .content{ position: absolute; top: 48px; right: 0; bottom: 0; left: 200px; background-color: purple; overflow: auto; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left">aaa</div> <div class="content left"> <p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p> </div> </div> <div class="pg-footer"></div> </body> </html>
这两种只在postion上有区别
缺两段：
1、hover（悬停的时候出现下拉）
2、border-radius (50%的时候是个圆形)
js的匿名函数和自执行函数：
/*js的匿名函数*/
setInterval(function(){console.log('234');},5000);
/*自执行函数，创建完成之后直接执行*/
(function(arg){
console.log(arg);
})('sad')
js序列化：
//字符串转成对象 var str = '[11,22,33,44,55]'; var arr = JSON.parse(str); console.log(arr); //对象转成字符串 var arr = [11,22,33,44,55]; var str = JSON.stringify(arr); console.log(str);
Js作用域（1、以函数为作用域；2、函数作用域在没有执行之前就已经被创建；3、函数的作用域存在作用域链，也是被调用之前就创建）：
xo = 'alex'; function func(){ var xo = 'eric'; function inner(){ console.log(xo); } return inner; } var ret = func(); ret();
js函数内 局部变量 声明提前：
function func(){ console.log(xo); var xo = 'alex'; } func(); //下面这种则会报错 function func2(){ console.log(xxo); } func2();
input type='text'的为空提醒：
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <title></title> </head> <body> <div style="width: 60px;margin: 0 auto;"> <input type="text" value="请输入关键字" id="i1" onfocus="Foucs();" onblur="Blur();"> <input type="text" name="" placeholder="请输入关键字"> </div> <script type="text/javascript"> function Foucs(){ var tag = document.getElementById('i1'); var val = tag.value; if(val=='请输入关键字'){ tag.value = ''; } } function Blur(){ var tag = document.getElementById('i1'); var val = tag.value; if(val.length==0){ tag.value = '请输入关键字'; } } </script> </body> </html>
js加入标签的两种方式：字符串形式和对象形式
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <title></title> </head> <body> <input type="button" name="" value="+" onclick="addlab1();"> <input type="button" name="" value="+" onclick="addlab2();"> <div id="i1"> <p><input type="text" name=""></p> </div> <script type="text/javascript"> function addlab1(){ /*创建一个标签，然后将标签添加到li中*/ var tag = "<p><input type='text'></p>"; document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag); } function addlab2(){ var tag = document.createElement('input'); tag.setAttribute('type','text'); tag.style.fontSize = '16px'; tag.style.color = 'red'; var p = document.createElement('p'); p.appendChild(tag); document.getElementById('i1').appendChild(p); } </script> </body> </html>
获取当前ip：
console.log(location.href);/*获得当前运行的url*/ location.href = 'http://www.baidu.com';/*指定跳转url*/ location.reload();
定时器相关：
var obj = setInterval(function(){console.log(123);clearInterval(obj);/*clear放这儿则执行一次就结束*/},1000); /*清除定时器*/ clearInterval(obj); /*表示执行到这儿的时候，3秒之后才去执行console.log(555);只执行一次，场景，比如成功之后，显示五秒就自动关闭*/ var timeout = setTimeout(function(){console.log(555);},3000); clearTimeout(timeout);/*清除*/
定时器实例：
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <title></title> </head> <body> <div id="status"></div> <input type="button" value="删除" onclick="deleteEle();" name=""> <script type="text/javascript"> function deleteEle(){ document.getElementById('status').innerText = '已删除！'; var obj = setTimeout(function(){ document.getElementById('status').innerText = ''; },3000); /* clearTimeout(obj); 清除*/ } </script> </body> </html>
行为 样式 结构 相分离，实现表格的onmouseover和onmouseout事件：
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <title></title> </head> <body> <table border="1" width="300px;"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> </table> <script type="text/javascript"> var myTables = document.getElementsByTagName('tr'); console.log(myTables); var len = myTables.length; for(var i=0;i<len;i++){ myTables[i].onmouseover = function(){ this.style.backgroundColor = 'red'; } myTables[i].onmouseout = function(){ this.style.backgroundColor = ''; } } </script> </body> </html>
submit 的emmet查件的快捷键，如table.test>td*3>tr*2>{$zhangsan$} 再按tab就生成了一个3列2行的table test是类名，zhangsan的内容
