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, ...

随机推荐

android下giflib
源码路径: android/external/giflib 用到的该lib的APP: ./external/chromium_org/android_webview/build/aosp_manife ...
考前预习（Ubuntu配备）
这几天考前预习,趁现在不想预习,写点之前就想写的东西吧. 贴一下个人认为有用的,在Ubuntu装机后的一些小事.不过挺杂的,主要是拿来给以后的自己看,以及让现在无聊的我有点事做. 首先,Ubuntu官 ...
[Sass]嵌套
[Sass]嵌套-选择器嵌套 Sass 中还提供了选择器嵌套功能,但这也并不意味着你在 Sass 中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深,这往往是大家不愿 ...
Runtime解决屏幕旋转问题
前言大家或许在iOS程序开发中经常遇到屏幕旋转问题,比如说希望指定的页面进行不同的屏幕旋转,但由于系统提供的方法是导航控制器的全局方法,无法随意的达到这种需求.一般的解决方案是继承UINavrgat ...
Java笔记：文件夹操作
创建目录: File类中有两个方法可以用来创建文件夹: mkdir( )方法创建一个文件夹,成功则返回true,失败则返回false.失败表明File对象指定的路径已经存在,或者由于整个路径还不存在, ...
iOS监听tableView组头切换事件
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSIntege ...
MySQL延迟复制--percona-toolkit和MASTER TO MASTER_DELAY
为了数据的安全,有的时候数据库需要延迟备份,这里说下两种延迟备份的方法. 一.借助工具. 实现环境: 192.168.189.143 (mysql主库) 192.168.189.144 (mysql备 ...
Redsi和Memcached区别总结
首先谈谈Redis和Memcached它们都是缓存在内存中的,唯一的区别就是Redis它本身会周期性的把更新的一些数据写入到磁盘或者修改操作写入追加的记录文件中,并且在此基础上实现master-sl ...
Python 学习拾遗
该博文主要适应于python2.7,并没有对py3进行测试. 主要记录学习python过程中容易出现的一些小问题.小错误,相信能给你启发. 1.剔除一个字符串中的所有空格(假设该字符串是s) &quo ...
.Net中Remoting通信机制简单实例
.Net中Remoting通信机制前言: 本程序例子实现一个简单的Remoting通信案例本程序采用语言:c# 编译工具:vs2013工程文件编译环境:.net 4.0 程序模块: Test测试 ...

Python之路Day16--JavaScript(二)

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

随机推荐

热门专题