正文
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 '':
age = 123;
break;
case '':
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="">北京1</option>
<option value="">北京2</option>
<option value="">北京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="" 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="" 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="" 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";
};
}
