day54 Pyhton 前端JS06

内容回顾

　　

- ECMAScript5.0 基础语法
            - var 声明变量
            - 五种基本数据类型
                - string
                - number
                    
                    NaN number
                    1   number
                - boolean
                - undefined
                - null
            - 引用数据类型
                - Array
                    var arr = [];
                    - push
                    - pop
                    - unshift
                    - shift
                    
                    - splice()
                    - forEach(function(item,index){})
                    
                - function
                        //1 普通函数
                        // function add(a, b) {
                        //     return a + b;
                        // }
                        //
                        // var ret = add(3, 5);
                        // console.log(ret);

                        var oDiv = document.getElementById('box');

                        oDiv.onclick = function () {

                        }
                        console.dir(oDiv);


                        //2.函数对象

                        // var add  =  function () {
                        //     alert('111');
                        // }
                        //
                        // add();

                        //3. 自执行函数

                        (function (a,b) {
                            alert(22222)
                        })(1,2)
                
                - Date
                - Math.random()
                
                    min+ Math.random()*(max-min)
                - object
                    var person = {
                        name:'alex',
                        age:18,
                        fav: function(){
                            console.log(this.name)                        
                        },
                        onclick:function(){
                        }
                    
                    }
                    person.name
                    person.fav()
                    
                    
                    class Person():
                    
                        def __init__(self,name,age):
                            self.name = name
                            self.age = age
                            
                        def fav():
                            print(self.name)
                    p = Person()
                    p.fav()
                    
                    
                    def add(a,b):
                        return a+b
                        
                    ret = add(1,2)
                
        - DOM 文档对象模型
            - 获取DOM的三种方式
                1 通过id获取
                var oDiv = document.getElementById('box');
                2 class获取
                var oDiv = document.getElementsByClassName('box')[0];
                3 标签获取
                var oDiv = document.getElementsByClassName('box')[0];
            - 事件
                onclick
                onmouseenter
                onmouseleave
                onload
                
            - 业务逻辑
                - 对DOM对象的样式属性操作                
                    # 点语法 
                        get和set
                    console.log(oDiv.style.display);  # 获取属性值 get  readyonly
                    oDiv.style.display = 'none' # 设置属性值 set
                - 对DOM对象的类属性操作
                    oDiv.className
                - 对DOM对象值的操作
                    oDiv.innerText
                
                
                dl
                    dt
                        dd
                table
                    tr
                        td
                form
                    action 提交的服务器地址
                    method
                    enctype...
                    
                   input
                        type 
                            text 文本输入框
                            password 密码框
                            radio 单选框 产生互斥效果： 让两个radio的name值一样。默认选中：checked
                            checkbox 多选框  默认值：checked
                            submit 提交按钮
                            file 文件上传 必须为post  form表单上的属性必须：enctype="multipart/form-data"
                    select  name  multiple 表示多选 摁着ctrl键选中
                        option  value  selected 默认选中
                                
                    
                    
               
       
            
        - BOM 浏览器对象模型       
回顾pymysql
        import pymysql

        conn = pymysql.connect(
            host='127.0.0.1',
            user='root',
            password="123",
            database='db1',
            port=3306,
            charset='utf8'
        )

        # 创建游标
        cur = conn.cursor(pymysql.cursors.DictCursor)

        sql = 'insert into t7 value (%(name)s,%(sex)s)'
        # cur.execute(sql,('wusir','female'))
        cur.execute(sql,{"name":'wusir','sex':'female'})

        rets = cur.fetchall()

        print(rets)
        conn.commit()
        cur.close()
        conn.close()
        
    数据库的数据类型   
    char varchar
    int 
    float double decimal
    year date time datetime
    set   多选一或多选多
    enum  多选一
    tinyint(1) 表示数据库的true和false  自己查询

今日内容
　　业务逻辑

　　　　对DOM对象的样式属性操作

　　　　　　#点语法

　　　　　　　　get和set

　　　　   console.log(oDiv.style.display);#获取属性值  get   readyonly

　　　　   oDiv.style.display = 'none' # 设置属性值  set

　　　  对DOM对象的类属性操作

　　　　   oDiv.className

　　     对DOM对象值的操作

　　　　   oDiv.innerText

　　　　   oDiv.innerHTML

　　　　   <input  value='123'/>

　　　　   oInput.value

　　  对标签属性操作

　　　　  oA.href

　　　　  oA.title

　　　　  oImg.src

　　 选项卡实现

# 排他思想
             <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>Title</title>
                    <style>
                        p{
                            display: none;
                        }
                        p.active{
                            display: block;
                        }
                    </style>

                </head>
                <body>

                <button>按钮1</button>
                <button>按钮2</button>
                <button>按钮3</button>
                <button>按钮4</button>


                <p>哭加为</p>
                <p>七轸堂</p>
                <p>王家辉</p>
                <p>任希桐</p>


                <script>

                    var oBtns = document.getElementsByTagName('button');
                    var oPs = document.getElementsByTagName('p');
                    var i;
                    for (i = 0; i < oBtns.length; i++) { //为什么要for循环 获取事件对象+ 事件

                        oBtns[i].index = i;

                        oBtns[i].onclick = function () {
                            console.log(this);

                            // 把所有的变灰
                            for (var j = 0; j < oBtns.length; j++){
                                oBtns[j].style.color = '#000';

                                oPs[j].className = '';
                            }
                                // 业务逻辑 点的当前盒子变色
                            this.style.color = '#ff6700';
                            console.log(i);
                            oPs[this.index].className +='active';

                        }

                    }
                </script>

                </body>
                </html>
        - 选项卡  使用let 解决变量提升的问题

变量提升:

<body>

<script>


    console.log(a);
    a = 3;
    console.log(a);
    //
    var a = [];

    for (let i = 0; i < 10; i++) {
        a[i] = function () {
            console.log(i);
        };
    }
    //
    // console.log(a);
    //
    console.log(a[9]());//i=9 ,如果是var 则i=10

    //let 声明的变量不存在变量提升，是块级作用域
    console.log(c);
    let c = 5;//let 报错不能变量提升,var可以变量提升
</script>

</body>

let控制选项卡操作

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            display: none;
        }
        p.active{
            display: block;
        }
    </style>

</head>
<body>

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>


<p>哭加为</p>
<p>七轸堂</p>
<p>王家辉</p>
<p>任希桐</p>


<script>

    var oBtns = document.getElementsByTagName('button');
    var oPs = document.getElementsByTagName('p');

    for (let i = 0; i < oBtns.length; i++) { //为什么要for循环 获取事件对象+ 事件



        oBtns[i].onclick = function () {

            // 把所有的变灰
            for (var j = 0; j < oBtns.length; j++){
                oBtns[j].style.color = '#000';

                oPs[j].className = '';
            }
                // 业务逻辑 点的当前盒子变色
            this.style.color = '#ff6700';
            console.log(i);
            oPs[i].className +='active';

        }

    }
</script>

</body>

DOM操作:

<body>
<input type="text" id="username">
<button id="add">添加</button>

<div>
    <p id="box2"></p>
    <p>alex</p>
</div>
<ul id="box">
    <!--<li></li>-->
</ul>

<script>

    var oP = document.getElementById('box2');
    // console.log(oP.nextElementSibling.innerText);
    var oP2 = oP.nextElementSibling || oP.nextSibling;//兼容不同版本浏览器
    console.log(oP2.innerText);



    var oBtnAdd = document.getElementById('add');
    var oUl = document.getElementById('box');
    var oInput = document.getElementById('username');
    //1.创建DOM

    oBtnAdd.onclick = function () {
        var oLi = document.createElement('li');
        var oA = document.createElement('a');
        var oDelete = document.createElement('button');
        var abc = document.createElement('abc');
        var oUpdate = document.createElement('button');

        if (oInput.value === '') {
            return;
        } else {
            oA.innerText = oInput.value;
            oA.href = 'http://www.baidu.com';
            oDelete.innerText = '删除';
            oDelete.id = 'delete';
            oUpdate.innerText = '更改';

            abc.innerText = 'alex';

            abc.setAttribute('abc_name','哈哈哈');
            abc.ABC = 'xxxxxx';

            console.dir(abc);
            //2 修改DOM  DOM操作
            // oLi.innerHTML = '<a href="">哭加为</a>'
            oLi.appendChild(oA);
            oLi.appendChild(oDelete);
            oLi.appendChild(abc);
            //inserBefore(添加的DOM,参考的节点)
            oLi.insertBefore(oUpdate,oDelete);
            //2.追加DOM
            oUl.appendChild(oLi);


            //清空操作
            oInput.value = ''
        }
        oDelete.onclick = function () {
            console.log(this.parentNode);
            oUl.removeChild(this.parentNode)
        }


    }


</script>
</body>

publish

<body>

<table border="1" style="border-collapse: collapse;" width="100%">
    <h2>我的出版社</h2>
    <thead>
    <tr>
        <td>编号</td>
        <td>名字</td>
        <td>邮箱</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody id="publish_content">


    </tbody>
</table>

<script>

    // JSON.parse()
    // JSON.stringify()
    //JSON "{"status":"ok","data":[]}"
    var publish_data = {
        status: 'ok',
        data: [
            {
                'id': 1,
                'name': '沙河出版社',
                'email': '131313@qq.com'
            },
            {
                'id': 2,
                'name': '昌平出版社',
                'email': 'adad@qq.com'
            },
            {
                'id': 3,
                'name': '老男孩出版社',
                'email': 'oldboy@qq.com'
            },
            {
                'id': 4,
                'name': '路飞出版社',
                'email': 'luffycity@126.com'
            },
            {
                'id': 5,
                'name': '路飞出版社',
                'email': 'luffycityXXXX@126.com'
            }


        ]

    }

    var oPublish_con = document.getElementById('publish_content');

    setTimeout(function () {

            if (publish_data.status == 'ok') {

                function $(ele) {

                    return document.createElement(ele);
                }

                publish_data.data.forEach(function (item, index) {

                        //创建元素
                        var oTr = $('tr');
                        var oIndex = $('td');
                        var oName = $('td');
                        var oEmail = $('td');
                        var oOpeart = $('td');
                        var oUpdate = $('a');
                        var oDelete = $('a');
                        oUpdate.innerText = '更改';
                        oDelete.innerText = '删除';
                        oUpdate.href = 'javascript:void(0);';
                        oDelete.href = 'javascript:void(0);';
                        //更改内容
                        oIndex.innerText = index + 1;
                        oName.innerText = item.name;
                        oEmail.innerText = item.email;


                        //追加元素
                        oTr.appendChild(oIndex);
                        oTr.appendChild(oName);
                        oTr.appendChild(oEmail);
                        oTr.appendChild(oOpeart);

                        oOpeart.appendChild(oUpdate);
                        oOpeart.appendChild(oDelete);
                        oPublish_con.appendChild(oTr);

                    }
                )
            }


        },
        1000
    )


</script>

</body>