Python之路Day16--JavaScript(二)
本节内容：
1.上节内容回顾
2.JavaScript补充
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
一、上节内容回顾
1.作业问题：
a.页面布局不好看
float，clear：both，margin，padding position: left: 参考网上的模板 HTML模板，bootstrap
b.背景图片
2.内容回顾
a. HTML
一堆标签：行内，块级标签
b.CSS
position background text-align margin padding font-size z-index over-flow :hover opacity float (clear:both) line-height border color display
3.页面布局
主站— <div class='pg-header'> <div style='width:980px;margin:0 auto;'> 内容自动居中 </div> </div> <div class='pg-content'></div> <div class='pg-footer'></div>
position: fiexd -- 永远固定在窗口的某个位置 relative -- 单独无意义 absolute -- 第一次定位，可以在指定位置，滚轮滚动时，不在了。。。。 a. 左侧菜单跟随滚动条 b. 左侧以及上不不动 ******
页面布局范例1
<!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; color: white; } .pg-content .menu{ width: 20%; background-color: red; min-width: 200px; height: 500px; } .pg-content .content{ width: 80%; background-color: green; overflow: auto; } </style> </head> <body> <div class="pg-header" ></div> <div class="pg-content" > <div class="menu left">a</div> <div class="content left" > <p>b</p> </div> </div> <div class="pg-footer"></div> </body> </html>
4.当鼠标放到item上为内容加上样式
<!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.min.css"/> <style> .item{ background-color: #dddddd; } .item:hover{ color: red; } .item:hover .b{ background-color: green; } </style> </head> <body> <div class="item"> <div class="a"> <i class="fa fa-superpowers" aria-hidden="true"></i> </div> <div class="b">456</div> </div> </body> </html>
补充：http://fontawesome.io/ 下载图标
5.javascript回顾
a.for 循环
for(var item in [11,22,33,44]){ console.log(item) } var arra = [11,22,33,44] for(var i=0;i<arra.length;i++){ console.log(item) break; }
b.while循环
while(条件){ }
c.条件语句
if(){ }else if(){ }else{ }
除了Python其他语言都有的条件语句
switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; }
二、JavaScript补充
1、函数（普通函数，匿名函数，自执行函数）
a.普通函数
function func(){
}
b.匿名函数
function func(arg){
return arg+1
}
setInterval("func()", 5000);
相当于：
setInterval(function(){
console.log(123);
},5000)
c.自执行函数
function func(arg){
console.log(arg);
}
// func(1)
(function(arg){
console.log(arg);
})(1)
2、序列化
JSON.stringify() 将对象转换为字符串
JSON.parse() 将字符串转换为对象类型
3、转义
decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出
4、eval
JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
- eval()
- EvalError 执行字符串中的JavaScript代码
5、时间
data对象
var d =new Date()
d.getXXX
d.setXXX
6、作用域
================================ 1. 以函数作为作用域 （let）================================ 其他语言： 以代码块作为作用域 public void Func(){ if(1==1){ string name = 'Java'; } console.writeline(name); } Func() // 报错 Python： 以函数作为作用域 情况一： def func(): if 1==1: name = 'alex' print(name) func() // 成功 情况二： def func(): if 1==1: name = 'alex' print(name) func() print(name) // 报错 JavaScript: 以函数作为作用域 function func(){ if(1==1){ var name = 'alex'; } console.log(name); } func() ================================ 2. 函数的作用域在函数未被调用之前，已经创建 ================================ function func(){ if(1==1){ var name = 'alex'; } console.log(name); } ================= 3. 函数的作用域存在作用域链，并且也是在被调用之前创建 ================== 示例一： xo = "alex"; function func(){ // var xo = 'eric'; function inner(){ // var xo = 'tony'; console.log(xo); } inner() } func() 示例二： xo = "alex"; function func(){ var xo = 'eric'; function inner(){ console.log(xo); } return inner; } var ret = func() ret() 示例三： xo = "alex"; function func(){ var xo = 'eric'; function inner(){ console.log(xo); } var xo = 'tony'; return inner; } var ret = func() ret() ================= 4. 函数内局部变量 声明提前 ================== function func(){ console.log(xxoo); } func(); // 程序直接报错 function func(){ console.log(xxoo); var xxoo = 'alex'; } 解释过程中：var xxoo; func(); // undefined
三、JavaScript面向对象
a.JavaScript面向对象
function foo(){ var xo = 'alex'; } foo() function Foo(n){ this.name = n; this.sayName = function(){ console.log(this.name); } } var obj1 = new Foo('we'); obj1.name obj1.sayName() var obj2 = new Foo('wee'); obj2.name obj2.sayName()
i. this代指对象(python self)
ii. 创建对象时, new 函数()
b. python面向对象
class Foo: def __init__(self,name): self.name = name def sayName(self): print(self.name) obj1 = Foo('we') obj2 = Foo('wee')
原型：
function Foo(n){ this.name = n; } # Foo的原型 Foo.prototype = { 'sayName': function(){ console.log(this.name) } } obj1 = new Foo('we'); obj1.sayName() obj2 = new Foo('wee');
四、DOMdocument object model(文档对象模型）
1. 查找
a.直接查找
var obj = document.getElementById('i1')
b.间接查找
文件内容操作：
innerText 仅文本
innerHTML 全内容
value
input value获取当前标签中的值
select 获取选中的value值（selectedIndex）
textarea value获取当前标签中的值
操作示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1"> 张杨 <a>谷<span>歌</span></a> </div> <input type="text" id="i2" /> <select id="i3"> <option value="11">北京1</option> <option value="12">北京2</option> <option value="13">北京3</option> </select> <textarea id="i4"></textarea> </body> </html>
搜索框范例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 600px;margin: 0 auto;"> <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/> <input type="text" placeholder="请输入关键字" /> </div> <script> function Focus(){ 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>
2.样式操作：
a.class操作
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
obj.style.fontSize = '16px';
obj.style.backgroundColor = 'red';
obj.style.color = "red"
b.属性操作：
attributes
setAttribute
getAttribute
removeAttribute
3.标签
a.创建标签，
// 方式一 var tag = document.createElement('a') tag.innerText = "wupeiqi" tag.className = "c1" tag.href = "http://www.cnblogs.com/youngcheung" // 方式二 var tag = "<a class='c1' href='http://www.cnblogs.com/youngcheung'>youngcheung</a>"
范例--创建标签两种形式：字符串和对象方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" onclick="AddEle1();" value="+" /> <input type="button" onclick="AddEle2();" value="+" /> <div id="i1"> <p><input type="text" /></p>
// <hr >#分割线 </div> <script> function AddEle1(){ // 创建一个标签 // 将标签添加到i1里面 var tag = "<p><input type='text'/></p>"; // 注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag); } function AddEle2(){ // 创建一个标签 // 将标签添加到i1里面 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>
4.提交表单
任何标签通过DOM可以提交表单
document.geElementById('form').submit()
5.其他操作
console.log 输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 // 定时器 setInterval 多次定时器 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器
五、事件
a.参考图
58面试题：
写一个行为样式结构相分离的的页面？
js css html
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #test{ background-color: red;width:300px;height:400px; } </style> <body> <div id="test"> 内容 </div> <script> /* 方法一 function t1(){ console.log('dsads'); } */ var mydiv = document.getElementById("test"); //console.log(mydiv); mydiv.onclick = function(){ console.log("dsads"); } </script> </body> </html>
范例2：将鼠标放在一个表格上高亮显示
方式一：dom0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> </style> <body> <table border="1" width="300px"> <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>2</td></tr> <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>2</td></tr> <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>2</td></tr> </table> <script> function t1(n){ var myTrs = document.getElementsByTagName("tr")[n]; // console.log(myTrs); myTrs.style.backgroundColor = "red"; } function t2(n){ var myTrs = document.getElementsByTagName("tr")[n]; myTrs.style.backgroundColor = ""; } </script> </body> </html>
方式二：dom1
<body> <table id="i1" border="1" width="300px"> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> </table> <table id='i2' border="1" width="300px"> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> </table> <script> var myTrs = document.getElementsByTagName("tr"); var len = myTrs.length; for(var i=0;i<len;i++) { // i=0,i=1,i=2 myTrs[i].onmouseover = function () { this.style.backgroundColor = "red"; }; myTrs[i].onmouseout = function () { this.style.backgroundColor = ""; }; } </script> </body>
绑定事件两种方式： a. 直接标签绑定 onclick='xxx()' onfocus b. 先获取Dom对象，然后进行绑定 document.getElementById('xx').onclick document.getElementById('xx').onfocus this，当前触发事件的标签 a. 第一种绑定方式 <input id='i1' type='button' onclick='ClickOn(this)'> function ClickOn(self){ // self 当前点击的标签 } b. 第二种绑定方式 <input id='i1' type='button' > document.getElementById('i1').onclick = function(){ // this 代指当前点击的标签 }
c.第三种绑定方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#main{
background-color: red;
width:300px;
height:400px;
}
#content{
background-color: pink;
width:150px;
height:200px;
}
</style>
<body>
<div id="main">
<div id="content"></div>
</div>
<script>
var mymain = document.getElementById("main");
var mycontent = document.getElementById("content");
mymain.addEventListener("click",function(){console.log("main")},true);
mycontent.addEventListener("click",function(){console.log("content")},true);
</script>
</body>
</html>
作用域的示例;
var myTrs = document.getElementsByTagName("tr"); var len = myTrs.length; for(var i=0;i<len;i++){ // i=0,i=1,i=2 myTrs[i].onmouseover = function(){ this.style.backgroundColor = "red"; }; }
