页面布局方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>页面布局</title> 6 <style> 7 body{ 8 margin:0; 9 } 10 .left{ 11 float: left; 12 } 13 .right{ 14 float: right; 15 } 16 .pg-header{ 17 height: 48px; 18 background-color: #2459a2; 19 } 20 .pg-body .pg-menu{ 21 width: 10%; 22 background-color: bisque; 23 position: absolute; 24 top:48px; 25 left: 0; 26 bottom: 0; 27 } 28 .pg-body .pg-content{ 29 width: 90%; 30 position: absolute; 31 top:48px; 32 right: 0; 33 bottom: 0; 34 overflow: auto; 35 background-color: blue; 36 z-index: 9; 37 } 38 .pg-header .logo{ 39 color: black; 40 text-align: center; 41 width: 10%; 42 line-height: 48px; 43 background-color: wheat; 44 } 45 .pg-header .userinfo img{ 46 border-radius: 50%; 47 } 48 .pg-header .userinfo{ 49 border: 1px solid red; 50 margin-top: 4px; 51 width: 140px; 52 } 53 .pg-header .userinfo .infolist{ 54 display: none; 55 } 56 .pg-header .userinfo:hover .infolist{ 57 display: block; 58 color: red; 59 } 60 .pg-header .userinfo .infolist{ 61 /*background-color: green;*/ 62 /*position: absolute;*/ 63 /*top:43px;*/ 64 /*right: 36px;*/ 65 } 66 .pg-header .userinfo .infolist a{ 67 display: block; 68 color: white; 69 width: 140px; 70 } 71 </style> 72 </head> 73 <body> 74 <div class="pg-header"> 75 <div class="logo left"> 76 <span>欢迎光临</span> 77 </div> 78 <div class="userinfo right" style="position: relative"> 79 <a href=""><img src="1.jpg" alt="" width="40" height="40"></a> 80 <div class="infolist" style="position: absolute;top:42px;right: 20px;z-index: 10;"> 81 <a>我的信息</a> 82 <a>登录</a> 83 </div> 84 </div> 85 </div> 86 <div class="pg-body"> 87 <div class="pg-menu"> 88 这是菜单侧边栏 89 </div> 90 <div class="pg-content"> 91 这是内容 92 <p>这是内容</p> 93 <p>这是内容</p> 94 <p>这是内容</p> 95 </div> 96 </div> 97 </body> 98 </html>
JavaScript介绍
1.被设计用来向html页面添加交互行为
2.是一种脚本语言
3.由数行可执行的计算机代码组成
4.通常直接嵌入html页面
5.是一种解释性语言
JS能做什么
表单数据验证
动态HTML
用户交互
少量数据查找
AJAX核心技术
语法规范
<script> <script> 写在head里面
最常用的写在body里面的最下面
两个最常用的方法：
console.log() 以及alert()
变量
JS对大小写敏感
第一个字符必须是字母、下划线、美元符号
规则 var 变量名 = 变量值
数据类型
和python基本一致
var num1 = 1.1; 浮点数1.1
var num2 = .1; 表示0.1
JS系统函数
parseInt()
解析一个字符串，返回一个整数。
如果中间遇到不合法的字符，马上停止解析，返回已经解析过的数值
例如： parsent("23") 返回23
parseInt("23xy") 返回23
parseInt("xs23xy") 返回NaN
parseFloat()
剖析参数字符返回浮点数
例如： parseInt("23.09") 返回23.09
parseInt("23.09xy") 返回23.09
parseInt("xs23.08xy") 返回NaN
JS字符串
变量 = ‘字符串’
字符串对象名称 = new String(字符串)
JavaScript数组
创建数组：
var arrname=[元素0.元素1，元素2.......];
跑马灯案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <marquee behavior="" direction="">alex is sb</marquee> 9 <div id="wel">欢迎光临</div> 10 </body> 11 <script> 12 function test(){ 13 var mywel = document.getElementById("wel"); 14 var content = mywel.innerText; 15 var f_content = content.charAt(0); 16 var l_content = content.substring(1,content.length); 17 var new_content = f_content + l_content; 18 //mywel.innerText; 19 mywel.innerText = new_content; 20 } 21 22 setInterval("test();",500); 23 </script> 24 </html>
遍历数组
1. for(var i=0;1<obj.length;i++)
2.for(var i in 数组/对象)
注意：前者只可以遍历普通的数组，后者可以遍历数组或对象
var arr = ['zhagnsan','lisi','ergouzi']; for(var i=0;i<arr.length;i++){ //第一种 console.log('nihao,zhaodole') } var dict={"name":"lisi","age":23}; for(var i dict){ //第二种 console.log(arr[i]); }
JAvaScript算数类
Math.ceil（数值）
Math.floor(数值)
Math.round(数值)
Math.min(数值1，数值2)
运算符
和python类似
JS流程控制
顺序结构
分支结构
if..elif..elif...else
switch...case
1 <script> 2 var alex_age = 66; 3 switch(alex_age){ 4 case 66: 5 console.log("快了") 6 break 7 case 73: 8 console.log("走了") 9 break 10 case 88: 11 console.log("早走了") 12 break 13 } 14 </script>
循环结构
do.....while
done
函数
三种书写方式：
1.function test(){
console.log();
}
2.var func = function(){ //把函数赋值给变量
console.log("test");
}
3.(function(){ //直接调用
console.log("test");
})
系统函数JSON
JSON.stringify() 序列化
JSON.parse() 反序列化
var arr = ['zs','lisi','tao'];
undefined
JSON.stringify(arr);
>>"["zs","lisi","tao"]"
var res = JSON.stringify(arr);
JSON.parse(res);
>>["zs", "lisi", "tao"]
转义
时间对象
时钟案例
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="clock"> 9 10 </div> 11 <script> 12 function clock() { 13 var mydate = new Date(); 14 var myyear = mydate.getFullYear(); 15 var mymonth = mydate.getMonth() + 1; 16 var myday = mydate.getDate(); 17 var myhour = mydate.getHours(); 18 var myminuts = mydate.getSeconds(); 19 var mysec = mydate.getSeconds(); 20 var res = myyear + "-" +mymonth+"-"+myday+" " +myhour+":"+myminuts+":"+mysec; 21 console.log(res) 22 var myclock = document.getElementById("clock") 23 myclock.innerText = res 24 } 25 setInterval("clock();",1000); 26 27 </script> 28 </body> 29 </html>
JS之DOM操作
文档对象模型(Document Object Model)
定义了访问和操作html文档的标准方法
把html呈现为带有元素、属性和文本的树结构
直接查找
document.getElementById("name")
document.getElementByTagName("tagname")
document.getElementsByName("name")
document.getElementsByClassName("name")
间接查找
parentElement //父节点标签元素
children //所有子标签
firstElementChild //第一个子标签元素
lastElementChild //最后一个子标签元素
nextElementtSibling //下一个兄弟标签元素
previousElementSibling //上一个兄弟标签元素
属性节点的操作
tag.className ==>直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样式
获取文本节点的值
innerText innerHtml
value获取当前选中的value值
1.input value获取当前标签中的值
2.select (selectIndex)
3.textarea
innerHTML 给节点添加html代码
该方法不是w3c的标准，但是主流浏览器支持
tag.innerHTML = "<p>显示内容</p>"