Fork me on GitHub

python自动化编程-第十六天 web开发基础

python自动化编程-第十六天 web开发基础

目录

上节回顾

css

position
background
text-align
margin
padding
font-size
z-index
over-flow
:hover
opacity
float
line-height
border
coloer
display

补充：页面布局

主站：

<div class='pg-header'>
    <div style='width:980px;margin:0 auto;'>
        内容自动剧中
    </div>
</div>

<div class='pg-content'>
</div>

<div class='pg-footer'>
</div>

后台管理布局

position
fixed -- 永远固定在窗口的某个位置
relative -- 单独无意义
absolute -- 第一次定位，可以在指定位置，滚轮滚动时，不在了。。。

  • 左侧菜单跟随滚动条
    不添加 overflow
  • 左侧以及上面不动 用的多
    • 使用最小宽度，出现横向滚动条 min-width：980px;
    • 右侧添加overflow，

图标网站：

https://fontawesome.io/icons
下载 for the web

JavaScript

浏览器是解释器

循环：

for循环

array = [11,22,33,44,55]
for(var item in array){
    console.log(array[item]);
    continue;
}
    
    
for(var i=0;i<array.length;i++){
    console.log(array[item]);
    break；
}

while循环

while(条件){
}

switch循环

switch(name){
    case:'1':
        console.log(123);
        break;
    case:'2':
        console.log(456);
        break;
    default:
        console.log(789);       
}

条件语句

if(){
}else if () {
}
  • ==
  • ===

函数

普通函数

function func(){
}

匿名函数

setInterval(执行的函数，5000)
setInterval(function(){
    console.log(123)
}，5000)

自执行函数(创建函数并且自动执行)

(function(args){console.log(arg);})(1)

序列化与反序列化

  • JSON.stringify() 将对象转换为字符串
  • JSON.parse() 将字符串转换为对象

转义

客户端 (cookie) ==》 服务器端
将数据经过转义后，保存在cookie

  • decodeURI( )                   URl中未转义的字符
  • decodeURIComponent( )   URI组件中的未转义字符
  • encodeURI( )                   URI中的转义字符
  • encodeURIComponent( )   转义URI组件中的字符
  • escape( )                         对字符串转义
  • unescape( )                     给转义字符串解码
  • URIError                         由URl的编码和解码方法抛出

eval

python

  • var = eval(表达式)
  • exec(执行代码)

javascript

  • eval 相当于python中 eval和exec的合集

时间

  • Date对象
  • Date类
  • var d = new Date()
  • d.getXXX 获取
  • d.setXXX 设置

作用域

作用域范围

  • 其他语言：以代码块作为作用域，代码块就是{}
  • python：以函数作为作用域
  • JavaScript：默认是以函数作为作用域

作用域的解释

  • 函数的作用域在函数未被调用之前，已经创建

  • 函数的作用域存在作用域链，并且也是在被调用之前创建

    xo = 'a'
function func() {
    var xo='b';
    function inner() {
        console.log(xo);
        
    }
    var xo='tony‘
    return inner
}


var ret = func()
ret()
// 输出为 tony

  • 函数内部变量提前声明

    var nn;  //则 JavaScript自动赋值为 undefined；

    代码在解释的过程中，所有的变量都会首先创建，并赋值为undefined;

JavaScript面向对象

this代指对象，

类似与python类中的self

创建对象时，new 函数()

    function Foo (name,age) {
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}
  
var obj = new Foo('alex', 18);
var ret = obj.Func("sb");
console.log(ret);

原型

function Foo (name,age) {
    this.Name = name;
    this.Age = age;
}
Foo.prototype = {
   ’sayname‘: function(){
        console.log(this.Name)
    },
}
    
obj1 = new Foo('wee',18)
obj1.sayname()

DOM

查找

直接查找

var obj = document.getElementById('i1')

间接查找

  • innerText 仅文本
  • innerHTML 全部内容，实际上是去除最外层标签；
  • value
    • input value获取当前标签的值
    • select 获取选中的value值
    • textarea value获取当前标签的值
    • 搜索框的示例
    <input id="i1" onfocus="Focus();" onblur="Blue();" type="text" value="请输入关键字"/>
    <script>
        // tab键 移动到 input框时，获取到光标
        function Focus() {
            var tag = document.getElementById('i1');
            var val = tag.value;
            if (val === '请输入关键字') {
                tag.value = '';
            }
        }
        
        // 当光标从输入框中移除时
        function Blue() {
            var tag = document.getElementById('i1');
            var val = tag.value;
            if (val.length === 0) {
                    tag.value = '请输入关键字';
            }
        }

操作

样式操作

className
classList
classList.add()
classList.remove()

style.fontSize='16px';
style.backgroundColor='red';
style.color = 'red';

属性操作

obj.setAttribute('key','value')
obj.getAttribute('key')
obj.removeAttibute('key')
obj.attributes() 获取所有属性

创建标签，并添加到HTML中

字符串形式

function AddEle() {
            //创建一个标签
            //将标签添加到i1里面
            var tag = "<p><input type='text' /></p>>";
            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
        }
// insertAdiacentHTML 第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

对象的形式

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

提交表单

任何标签通过DOM都可以提交表单

    <form id="f1" action="https://baidu.com">
        <input type="text" />
        <input type="submit" value="提交" />
        <a onclick="submitForm();">提交</a>
    </form>
    <script>
        function submitForm() {
            document.getElementById('f1').submit();
        }
    </script>

其他

console.log                 输出框
alert                       弹出框
var v = confirm(信息）       确认框
v = true / false
  
// URL和刷新
location.href               获取当前URL
location.href = "url"       重定向
location.reload()           重新加载
  
// 定时器
var obj = setInterval(function(){},5000)   
多次定时器

clearInterval(obj)                         
清除多次定时器,可以写在setInterval里面；

var o2 = setTimeout(function(){},5000)              
单次定时器

clearTimeout(o2)                             
清除单次定时器

事件

onclick，onblur，onfocus
onmouseout 光标移动,onmouseover 获取光标

作用域的示例

   <script>
        var myTrs = document.getElementsByTagName('tr');
        var len = myTrs.length;
        for(var i=0;i<len;i++){
            myTrs[i].onmouseover = function () {
                this.style.backgroundColor = 'red';
            }
             myTrs[i].onmouseout = function () {
                this.style.backgroundColor = '';
                // 这里是作用域的问题，函数在定义时是不执行的，但是for循环会执行，因此i最后等2，不管鼠标在哪里都是2了；所以有问题，因此这里用this；
            }
        }
        //谁调用这个函数 这个this就指向谁；
        //onmouseout 光标移动
        //onmouseover 获取光标
        
        
        
        
        // function t1(n) {
        //     var myTrs= document.getElementsByTagName('tr')[n];
        //     myTrs.style.backgroundColor = 'red';
        // }
        // function f1(n) {
        //     var myTrs= document.getElementsByTagName('tr')[n];
        //     myTrs.style.backgroundColor = '';
        // }
    </script>

绑定事件的两种方式:

  • 直接标签绑定 onclick='xxxx();'
  • 先获取dom对象，然后进行绑定
    • document.getElementById('xx').onclick
    • document.getElementById('xx').onfocus

this,当前触发事件的标签；

第一种绑定方式

这个this可以在传递函数的时候直接写this

<input onclick='ClickOn(this);' type='text' />
<script>
    function ClickOn(self){
    
    }
</script>

第二种绑定方式

<input onclick='ClickOn(this);' type='text' />
<script>
    document.getElementById('xx').onclick = function（）{
        //this 代指当前点击的标签
    }
<script>

第三种绑定方式

<div id='test'>
sagasgfs
</div>
<script>
    var mydiv = document.getElementById('test');
    mydiv.addEventListener('click',function(){console.log('aaa');}，false)
    mydiv.addEventListener('click',function(){console.log('bbb');}，false)
<script>

mydiv.addEventListener('click',function(){console.log('bbb');}，false)
false：表示冒泡
true：表示捕捉

捕捉是红色的，冒泡是绿色的；

词法分析

active object 处理过程

  1. 形式参数
  2. 局部变量
  3. 函数声明表达式
<script>
    function t1(age){
        console.log(age);
        var age = 27;
        console.log(age);
        function age(){}
        console.log(age);   
    }
    
    t1(3);
</script>

词法分析：
active object 活动对象 简称AO

第一步：形式参数
AO.age = undefined;
AO.age = 3

第二步，局部变量声明
AO.age = undefined; 不会赋值

第三步，函数声明表达式
AO.age = function() 优先级较高

开始执行：
第一行，打印 function()
第三行，打印 27
第五行，打印 27 （函数声明没有调用，则跳过）

posted @ 2018-07-22 16:20  耳_东  阅读(112)  评论(0)    收藏  举报