-
独立的语言，浏览器就是他的解释器
-
JavaScript存在形式：
- Head中 <script type="text/javascript"> // javascript代码 alert(123) </script> - 文件中 <script src="common.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="name">
<input type="button" οnclick="GetData()" value="提交">
<script>
function GetData() {
var i = document.getElementById(id="name")
alert(i.value)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// javascript代码
alert(123)
</script>
</head>
<body>
<h1>asgduabdh</h1>
<script src="common.js"></script>
</body>
</html>
common.js文件
alert("Hello world!")
-
JS代码尽量放在标签的最下面
存在于HTML中 -
编写方式
- HTML文件中 - 直接在浏览器的审查元素的console（控制台）中编写 -
变量
name=“jim”；全局变量 var name=“jim”；局部变量 -
数据类型：
数字 a=10； a.parsefloat() a.parseint() 字符串 a="Jim"; a.charat() a.substring() a.length a.slice(start,stop) 布尔类型 首字符小写 true、false 数组 a=[1,2,3,4,5] a.length a.push() 在数组尾部增加值 a,pop() 尾部获取数据 a.unshift() 头部插入数据 a.shift() 头部移除数据 a.splice(start,deletecount,value...) 增加，替换和删除数据 字典 -
for循环
1 循环时，循环的是元素的索引,字典时循环的是key a=[5,6,7,8] for(var item in a){ console.log(a[item]) } 2 循环时,不支持字典的循环 a=[5,6,7,8] for(var i=0;i<a.length;i=i+1){ console.log(a[i]) } -
if条件语句
== 值相等 === 值与类型都相等 && 与 || 或 if(){ }else if(){ }else{ } -
函数
- function 函数名(形参){ 函数体 } - **没名字的函数自动执行 - 普通函数 function func(){ console.log(123); } func() - 匿名函数 setinterval(function (){ console.log(123); }, 2000) - 自执行函数(创建函数并且自动执行) (function (arg){ console.log(arg); })(1) -
定时器
setInterval("f();",2000) 2000表示2秒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">
Hello world!
</div>
<script>
// 向控制台发送1
function f() {
console.log(1)
}
// 获取id为i1的标签的内容，并发送给控制台
function GetVal(){
a=document.getElementById("i1")
console.log(a.values)
}
// 定时器，每2秒运行一次
setInterval("f();GetVal();",2000)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 跑马灯-->
<div id="i1">
欢迎欢迎，热烈欢迎！
</div>
<script>
function Change() {
var tmp = document.getElementById("i1");
var t = tmp.innerText;
var s = t.charAt(0);
var l = t.substring(1,t.length);
var newt = l+s;
tmp.innerText = newt;
}
setInterval("Change()",1000);
</script>
</body>
</html>
-
序列化与反序列化
将对象转化为字符串 JSON.stringify() 将字符串转化为对象 JSON.parse() -
转义
客户端（cookie） ====>> 服务器端 从服务器端获取数据后将其转义后保存在cookie中 decodeURL() URL中未转义的字符 decodeURLComponent() URL组件中未转义的字符 encodeURL() URL中的转义字符 encodeURLComponent() URL转义组件中的字符 escape() 对字符串转义 unescape() 给转义字符串解码 URLError() 有URL的编码和解码方法抛出 -
eval
python: val = eval(表达式) exec(执行代码) JavaScript： eval -
时间
Date类 var d = new Date(); d.getXXX() 获取时间 d.setXXX() 设置时间 -
作用域
其他语言，以代码块作为作用域 public void Func(){ if(1==1){ string name="Java"; } console.writeline(name); } Func() //报错 Python，以函数作为作用域 def Func(): if 1==1: name="Jave" print(name) Func() JavaScript，以函数作为作用域 function Func(){ if(1==1){ var name="Java"; } console.log(name) } Func() =======函数作用域在编译时就已经创建====== =======档函数嵌套时，形成函数作用域链，并且编译时就创建======= =======函数中局部变量在编译时会先进行声明但是不进行赋值，只有在程序执行到赋值语句时才赋值=======
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function t1(age) {
console.log(age); // function
var age = 27;
console.log(age); // 27
function age() {};
console.log(age) // 27
}
t1(3);
</script>
</body>
</html>
-
JavaScript面向对象
function foo(n){ this.name = n; this.sayName = function(){ console.log(this.name); } } var obj = new foo("wo"); obj.name a. this 代指对象（Python self） b. 创建对象时，new 函数() 原型： function Foo(n){ this.name = n; } Foo.prototype={ "sayName":function(){ console.log(this.name); } }
模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
}
.c2{
position: fixed;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
width: 500px;
height: 400px;
background-color: white;
}
</style>
</head>
<body>
<div>
<input type="button" οnclick="Update()" value="展示">
<input type="button" οnclick="ChooseAll()" value="全选">
<input type="button" οnclick="ReverseAll()" value="反选">
<input type="button" οnclick="CancelAll()" value="取消">
<table id="t">
<thead id="th">
<tr>
<td>选择</td>
<td>主机</td>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>192.168.0.1</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>192.168.0.2</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>192.168.0.3</td>
</tr>
</tbody>
</table>
</div>
<div id="i1" class="c1 hide">
</div>
<div id="i2" class="c2 hide">
<input type="text" />
<input type="text" />
<input type="button" value="添加">
<input type="button" value="取消" οnclick="Dedate()">
</div>
<script>
function Update() {
document.getElementById("i1").classList.remove("hide")
document.getElementById("i2").classList.remove("hide")
}
function Dedate() {
document.getElementById("i1").classList.add("hide")
document.getElementById("i2").classList.add("hide")
}
function ChooseAll() {
var ch = document.getElementById("tb").children
for(var i=0;i<ch.length;i++){
ch[i].children[0].children[0].checked=true
}
}
function ReverseAll() {
var ch = document.getElementById("tb").children
for(var i=0;i<ch.length;i++){
if(ch[i].children[0].children[0].checked==true){
ch[i].children[0].children[0].checked=false
}else {
ch[i].children[0].children[0].checked=true
}
}
}
function CancelAll() {
var ch = document.getElementById("tb").children
for(var i=0;i<ch.length;i++){
if(ch[i].children[0].children[0].checked==true){
ch[i].children[0].children[0].checked=false
}
}
}
</script>
</body>
</html>
左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.mainm{
background-color: #382eff;
}
.mainm .con{
background-color: white;
/*display: none;*/
}
</style>
</head>
<body>
<div>
<div id="t1" class="mainm" οnclick="ShowT('t1')">菜单1
<div class="con">内容1</div>
<div class="con">内容1</div>
<div class="con">内容1</div>
</div>
<div id="t2" class="mainm" οnclick="ShowT('t2')">菜单2
<div class="con">内容2</div>
<div class="con">内容2</div>
<div class="con">内容2</div>
</div>
<div id="t3" class="mainm" οnclick="ShowT('t3')">菜单3
<div class="con">内容3</div>
<div class="con">内容3</div>
<div class="con">内容3</div>
</div>
<div id="t4" class="mainm" οnclick="ShowT('t4')">菜单4
<div class="con">内容4</div>
<div class="con">内容4</div>
<div class="con">内容4</div>
</div>
</div>
<script>
function ShowT(nid) {
var cur_tag = document.getElementById(nid)
var tag_list = cur_tag.parentElement.children
for(var i=0;i<tag_list.length;i++){
for(var j=0;j<tag_list[i].children.length;j++){
tag_list[i].children[j].classList.add("hide")
}
}
for(var n=0;n<cur_tag.children.length;n++){
cur_tag.children[n].classList.remove("hide")
}
}
</script>
</body>
</html>
后台管理页面布局
- 菜单栏随着滚动条滚动
position：fixed
- 菜单栏不随着滚动条滚动(不用relative，只用absolute)
position：relative
position：absolute
- 图标素材
fontawesome
第一版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p-header{
margin: 0;
height: 48px;
width: 100%;
background-color: #382eff;
}
.p-content{
position: fixed;
top: 50px;
left: 0;
background-color: black;
}
.p-content .b-content{
width: 20%;
min-width: 200px;
position: fixed;
left: 10px;
top: 60px;
bottom: 0;
background-color: red;
}
.p-content .b-body{
width: 78%;
position: fixed;
right: 0;
top: 60px;
bottom: 0;
background-color: aqua;
overflow: auto;
}
</style>
</head>
<body>
<div class="p-header"></div>
<div class="p-content">
<div class="b-content"></div>
<div class="b-body">
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
</div>
</div>
<div class="p-footer"></div>
</body>
</html>
第二版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<style>
.p-header{
margin: 0;
height: 48px;
width: 100%;
background-color: #382eff;
}
.left{
float: left;
}
.right{
float: right;
}
.p-header .logo{
height: 48px;
width: 20%;
background-color: aliceblue;
text-align: center;
line-height: 40px;
}
.p-header .log{
z-index: 2;
position: relative;
height: 48px;
width: 15%;
background-color: brown;
line-height: 48px;
}
.p-header .log .user:hover .info{
display: block;
}
.p-header .log .user{
position: absolute;
left: 40%;
}
.p-header .log .user .img{
width: 40px;
height: 40px;
border-radius: 50%;
}
.p-header .log .user .info{
background-color: white;
width: 120px;
position: absolute;
margin-left: -30px;
margin-top: 0;
display: none;
}
.p-header .log .battery{
padding-left: 5%;
}
.p-content .b-content{
width: 20%;
min-width: 200px;
position: absolute;
left:0;
top: 50px;
bottom: 0;
background-color: red;
}
.p-content .b-body{
z-index: 1;
width: 80%;
position: absolute;
right: 0;
top: 50px;
bottom: 0;
/*background-color:blue;*/
/*overflow: auto;*/
}
</style>
</head>
<body style="margin: 0">
<div class="p-header">
<div class="logo left">
Hello world!
</div>
<div class="log right">
<a class="user">
<img class="img" src="1.jpg">
<div class="info left">
<div>我的信息</div>
<div>注销</div>
</div>
</a>
<div class="battery left">
<i class="fa fa-automobile" aria-hidden="true"></i>
<i class="fa fa-bell" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="p-content">
<div class="b-content"></div>
<div class="b-body">
<div style="background-color: greenyellow;margin: 0;">
<p style="margin: 0">hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
</div>
</div>
</div>
<div class="p-footer"></div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
