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";
     };
 }

Python之路Day16--JavaScript(二)的更多相关文章

Python之路,Day16 - Django 进阶
Python之路,Day16 - Django 进阶本节内容自定义template tags 中间件 CRSF 权限管理分页 Django分页 https://docs.djangoproj ...
python之路：进阶二
c = collections.Counter( Counter({ b = collections.Counter( b.update(c) Counter({ Counter({ ...
python之路(十七)-javascript
JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. ...
python之路---面向对象编程(二)
类的继承 1.在python3中,只有新式类,新式类的继承方式为:广度优先.而python2中,经典类的继承方式为:深度优先.那么我们来看看深度优先和广度优先的区别吧如下图,为类之间的继承关系.B, ...
Python之路(第二十二篇) 面向对象初级：概念、类属性
一.面向对象概念 1. "面向对象(OOP)"是什么? 简单点说,“面向对象”是一种编程范式,而编程范式是按照不同的编程特点总结出来的编程方式.俗话说,条条大路通罗马,也就说我们使 ...
Python之路(第十二篇)程序解耦、模块介绍\导入\安装、包
一.程序解耦解耦总的一句话来说,减少依赖,抽象业务和逻辑,让各个功能实现独立. 直观理解“解耦”,就是我可以替换某个模块,对原来系统的功能不造成影响.是两个东西原来互相影响,现在让他们独立发展:核心 ...
python之路----常用模块二
collections模块在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultdict. ...
Python之路-(Django进阶二）
model: 双下划线: # 获取个数 # # models.Tb1.objects.filter(name='seven').count() # 大于,小于 # # models.Tb1.objec ...
Python之路Day16
主要内容:Django基础进阶之:Django 流程.Django URL.Django Views.Django Models.Django Template.Django Admin Django ...
python之路-----MySql操作二
一.主键 1.每个表只有一个主键 2.每个主键可以由多个列组成.(如果主键由多个组成,只要有一行列值不等即可) CREATE TABLE NAME ( id INT auto_increment, ...

随机推荐

ThinkPHP学习总结
ThinkPHP学习总结网站开发使用的thinkPHP5.0在此总结备查 MVC关系功能图一.Thinkphp开发规范 l 类类库.函数文件统一以.php为后缀: 类的文件名均以命名空间定义,并 ...
excel小技巧
数据呈文本格式,怎么改成数字? 数据前有'号,如何去掉? 为什么数据格式在修改后需要再双击一下单元格才改过来了? 解决办法:你选中需要更改格式的那列数据 ...
数据库之MySQL 简单教程
So Easy系列之MySQL数据库教程 1. 数据库概述 1.1. 数据库概述数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,它产生于距今六十多年前,随着信息技术和 ...
判断 .NET Framework安装版本
How To Determine the .NET Framework Installed Versions This topic is a how to.Please keep it as clea ...
ios 获取文件扩展名备忘
NSString *lastComponent = [cachePath lastPathComponent]; NSString *pathLessFilename = [ ...
cookie的存储和获取
在做用户登录时经常会用到cookie,如何将用户名和密码保存至cookie中呢?如何获取cookie中的数据呢? 一.用jquery.cookie.js保存数据在页面内引入jQuery.cookie ...
python之系统性能信息模块psutil
系统性能信息模块psutil 跨平台库轻松实现获取系统运行的进程和系统利用率(包括CPU.内存.磁盘.网络等)信息. 主要用于系统监控,分析和限制系统资源及进程的管理实现同等命令行工具提供的功能( ...
Cocoapods - pod install 成功后找不到头文件解决
问题描述:使用Cocoapods时,import 找不到头文件. 问题原因:这是因为还没设置头文件的目录. 解决办法:在项目的Target的里设置一下,添加cocoapods头文件目录:目录路径直接写 ...
How GitHub Works《Github是如何工作的？》
https://github.com/blog/920-how-github-works 如果你想知道Github是如何工作的,你可以看查看Zach Holman(@holman)的三篇文章: Hou ...
前端弹出层框架layer
http://www.layui.com/doc/modules/layer.html#layer.confirm

Python之路Day16--JavaScript(二)

Python之路Day16--JavaScript(二)的更多相关文章

随机推荐

热门专题