day16 web前端之JavaScript
页面布局补充
样例页面：
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0; } .left{ float: left; } .right{ float:right; } .pg-header{ height: 48px; background-color: #2459a2; } .pg-body .pg-menu{ width:10%; height: 1000px;; background-color: antiquewhite; position: absolute; top: 48px;; left:0; /*bottom:0;*/ } .pg-body .pg-content{ width:90%; position: absolute; top: 48px; right:0; bottom:0; overflow: auto; background-color: #3300cc; z-index: 9; } .pg-header .logo { color: black; text-align: center; width:10%;; line-height: 48px; background-color: wheat; } .pg-header .userinfo img{ border-radius: 50%; } .pg-header .userinfo{ border:1px solid red; margin-top: 4px; width: 140px; } .pg-header .userinfo .infolist { display: none; } .pg-header .userinfo:hover .infolist{ display: block; color: red; } .pg-header .userinfo .infolist{ position: absolute; background-color: #009933; top: 43px; right: 36px; } .pg-header .userinfo .infolist a{ position: relative; display: block; color: white; width: 140px; text-align: center; } </style> </head> <body> <div class="pg-header"> <div class="logo left"> <span>welcome</span> </div> <div class="userinfo right" style="position: relative;"> <a href=""><img src="1.png" alt="" width="42" height="40" ></a> <div class="infolist" style="position: absolute;top: 43px;right:20px;z-index:10"> <a>我的信息</a> <a>登陆</a> </div> </div> </div> <div class="pg-body"> <div class="pg-menu"> 这是侧边栏 </div> <div class="pg-content"> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p> </div> </div> </body> </html>
JavaScript介绍
JavaScript诞生缘由
1. 网景公司(安德森)94年发布了第一款比较成熟的浏览器，但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。
2. 95年5月，网景公司做出决策，未来的网页脚本语言，必须"看上去与Java足够相似"，但是比Java简单
3. Brendan Eich 34 years old schema语言
4. 10天创造出了JavaScript，两种语言风格的混合产物----（简化的）函数式编程+（简化的）面向对象编程
5. JavaScript 的官方名称是 “ECMAScript”。
JavaScript介绍：
什么是javascript及其能做什么？
1.JavaScript 被设计用来向 HTML 页面添加交互行为。
2.JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
3.JavaScript 由数行可执行计算机代码组成。
4.JavaScript 通常被直接嵌入HTML 页面。
5.JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
JavaScript书写方式
- 第一种书写方式：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{} </style> <!--js的第一中书协方式--> <script> //alert("hello world");
console.log("hello world")
</script> </head> <body> </body> </html>
基于先加载页面再加载js的过程来实现友好展示页面
- 第二种书写方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{} </style> </head> <body> <div>dbnbdasnbndabnsbna</div> <h1>dsadasdakds</h1> <div>dasd</div> <div>dasd</div> <div>dasd</div> <div>dasd</div> </body> <!--js的第二种方式--> <script src="a.js"></script> </html>
- 注释：
- 单行注释
// 我是单行注释
- 多行注释
/*内容*/ 我是多行注释
- 变量：
var 声明变量
var name=”assaa ” #局部变量
name = “ssdas” #全局变量
- 命名规则：
- 严格区分大小写
- 不能以数字开头
- 余下的可以是其他符号
- 数据类型：
- 数字
var num=10
var num2=10.
var num3=.1
parseInt ( )
函数可解析一个字符串，并返回一个整数。如果中间遇到不合法的字符，马上停止剖析，返回已经剖析过的数值。
如果开始就遇到不合法的字符，返回NaN。
例：
parseInt(“23”)值为23
parseInt(“23xyz”)值为23
parseInt(“xyz23”)值为NaN
parseFloat ( )
剖析参数字符串并返回浮点数。如果遇到不合法的字符串，马上停止剖析，返回已经剖析过的数值。用法类似于paraseInt
- 字符串
创建方式：
① 变量 = “字符串”
② 字串对象名称 = new String (字符串)
常见的方法：
跑马灯效果实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="wel"> 欢迎光临 </div> </body> <script> function test(){ var mywel = document.getElementById('wel'); var content = mywel.innerText; var f_content = content.charAt(0); var l_content = content.substring(1,content.length); var new_content = l_content+f_content; mywel.innerText = new_content; } // 执行函数 setInterval("test()",1000) </script> </html>
第二种实现形式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <marquee behavior="" direction="">我爱北京天安门</marquee> </head> <body> </body> </html>
- 列表
- 循环：
- 第一种循环方式：
for(var i=0;i<arr.length;i=i+1){ console.log('dadsa') }
- 第二种循环方式：循环字典列表等形式的数据类型
for(var i in arr){
console.log(i + '----' + arr[i])
}
- 字典（json）
var dict={“name”:”hello”,“age”:“12”}
- 元组
- 集合
- bool
- 对象
- 运算符
算术运算符：
+ - * / % ++ --比较运算符：
> >= < <= != == === !==逻辑运算符：
&& || ！赋值运算符：
= += -= *= /=字符串运算符：
+ 连接，两边操作数有一个或两个是字符串就做连接运算
- 流程控制：
- 顺序结构：代码按行执行
- 分支结构：单分支；双分支；多分支
switch。。。。case案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> <script> var num = 66; switch (num) { case 66: console.log("快了。。") break case 73: console.log("挂了") break case 84: console.log("真死了") break } </script>
- 循环结构
do … while:先干一次再说
- 函数：js的三种书写方式
1：function test(){
console.log('sdadsadsa');
}
2：var func= function(){
console.log('sasassa');
}
3：(function() {
console.log('sdasda');
})() #直接运行
前两种方式都需要后期调用才能执行
系统函数:
eval()是python中的exec和eval的合集,可以编译代码也可以获取返回值
eval("x=7;y=90;console.log(x+y)")
- 序列化:
- JSON.stringify(obj) 序列化
- JSON.parase(obj) 反序列化
- 转义：
- decodeURI() URI中未转义的字符
- decodeURIComponent（） URI组件中的未转义字符
- encodeURI（） 转义URI中的字符
- encodeURIComponent（） 转义URI组件中的字符
- URIError（） 由编码和解码跑出的错误
- js的事件对象：
时钟案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #clock{ color: #3300cc; font-size: 30px; } </style> </head> <body> <div id="clock"></div> </body> <script> function clock() { var mydate=new Date() // console.log(mydate) var myyear = mydate.getFullYear() var mymonth = mydate.getMonth() var myday = mydate.getDate() var myhour = mydate.getHours() var myminute = mydate.getMinutes() var mysec = mydate.getSeconds() var res = myyear + "-" + mymonth + "-" + myday + " " + myhour + ':'+myminute+":" + mysec console.log(res) var myclock = document.getElementById("clock") myclock.innerText=res } setInterval("clock()",1000) </script> </html>
JavaScript之DOM操作
什么是HTML DOM？
1.HTML Document Object Model（文档对象模型）
2.HTML DOM 定义了访问和操作HTML文档的标准方法
3.HTML DOM 把 HTML 文档呈现为带有元素、属性和文本
的树结构（节点树）
Javascript之DOM操作：
获取元素节点：
1.直接查找：或得到的元素都是数组，可以通过数组的提供的方法进行相应的操作
document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)
2.间接查找
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
表格案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="selectAll()"> <input type="button" value="反选" onclick="ReverseAll()"> <input type="button" value="取消" onclick="cancelAll()"> <!--table>(thead>tr>th{ }*3)+(tbody>tr*3>td{ }*3) 快速创建table--> <table border="1"> <thead> <tr> <th>操作</th> <th>ip</th> <th>端口</th> </tr> </thead> <tbody id="info"> <tr> <td><input type="checkbox"/></td> <td> </td> <td> </td> </tr> <tr> <td><input type="checkbox"/></td> <td> </td> <td> </td> </tr> <tr> <td><input type="checkbox"/></td> <td> </td> <td> </td> </tr> </tbody> </table> </body> <script> function selectAll(){ var myTbody = document.getElementById('info') // console.log(myTbody) var myTrs = myTbody.children // console.log(myTrs) for(var i=0; i< myTrs.length;i++){ var myInput = myTrs[i].children[0].children[0] myInput.checked=true } } function cancelAll() { var myTbody = document.getElementById('info') // console.log(myTbody) var myTrs = myTbody.children // console.log(myTrs) for(var i=0; i< myTrs.length;i++){ var myInput = myTrs[i].children[0].children[0] myInput.checked=false } } function ReverseAll() { var myTbody = document.getElementById('info') // console.log(myTbody) var myTrs = myTbody.children // console.log(myTrs) for(var i=0; i< myTrs.length;i++){ var myInput = myTrs[i].children[0].children[0] if(myInput.checked){ myInput.checked=false }else{ myInput.checked=true } } } </script> </html>
执行效果：
属性节点的操作：
对节点的类进行操作：
tag.className => 直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样式
模态框实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:darkgrey;
opacity: 0.6;
}
.info{
width: 400px;
height:400px;
position: fixed;
top: 50px;
left:400px;
right:400px;
background-color: white;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<div>
<input type="button" value="点击" onclick="showModel()">
</div>
<!--遮罩层-->
<div class="one hide"></div>
<div class="info hide">
<p>
<input type="text"><p></p>
<input type="text"><p></p>
<input type="button" value="取消" onclick="cancel()">
<input type="button" value="确定">
</p>
</div>
</body>
<script>
function showModel(){
var myone=document.getElementsByClassName("one")[0]
var info=document.getElementsByClassName("info")[0]
// console.log(myone)
myone.classList.remove('hide')
info.classList.remove('hide')
}
function cancel(){
var myone=document.getElementsByClassName("one")[0]
var info=document.getElementsByClassName("info")[0]
myone.classList.add('hide')
info.classList.add('hide')
}
</script>
</html>
获取文本节点的值：
innerText innerHtml
value获取当前选中的value值
1.input value获取当前标签中的值
2.select （selectedIndex）
3.textarea
innerHTML 给节点添加html代码：
该方法不是w3c的标准，但是主流浏览器支持
tag.innerHTML = “<p>要显示内容</p>”;
案例：输入框搜索关键字(focus, blur)
使用js操作css属性的写法是有一定的规律：
1、对于没有中划线的css属性一般直接使用style.属性名即可。如：
obj.style.margin，obj.style.width，obj.style.left，obj.style.position等
2、对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。如：
obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zIndex，obj.style.fontFamily等。
创建节点实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="myinput">
</div>
</body>
<script>
var myinput = document.getElementById('myinput')
// var tag = "<input type='text'>"
// myinput.insertAdjacentHTML('before',tag)
var myipt = document.createElement("input")
myipt.setAttribute("type","button")
myipt.setAttribute("value","点击")
myinput.appendChild(myipt)
</script>
</html>
