2017.11.9（javascript和mysql学习内容）

Posted 2020-10-13

一.javascript

a.tab栏切换

tab切换主要突出的就是一个排他思想。

主要思路（

1.先获取到需要的元素，然后通过循环逐一绑定事件；

2.然后二次循环，目的在于对所有的元素设置统一样式；

3.然后在循环外，对需要操作的元素进行单独的控制；（一般而言都是当前元素，使用this）

）

收获（

1.this的使用

2.思路问题

3.两个不相关联的事物，可以创造一个契机，促进关联

）

js代码(

    window.onload = function(){
        //获取所有的button元素
        var btns = document.getElementsByClassName("top")[0].children;
        //获取所有的div元素
        var divs = document.getElementsByClassName("bottom")[0].children;
       //第一层for循环为每个btn绑定点击事件
       for(var i=0;i<btns.length;i++){
           //通过属性建立两组元素的联系
           btns[i].index = i;
            btns[i].onclick = function(){
                //第二层for循环 遍历元素，排他思想
                for(var j =0;j<btns.length;j++){
                    btns[j].className = ‘‘;
                    divs[j].style.display = ‘none‘;
                }
                console.log(this.index);
                this.className = ‘active‘;
                divs[this.index].style.display = ‘block‘;
            }
       }
        
    }

b.全选和反选

代码实际上和简单，主要就是通过判断input的状态，实际上我更加疑惑的是如果还有其他的input如何操作；这个我明天去确定下；

主要思路{

全选就是 给所有的input元素加上

input.checked = true/"checked";

反选就是先判断状态，然后在进行分别处理

}

代码{

    function xuanze(item){
        for(var i=0;i<inputs.length;i++){
            inputs[i].checked= item;
        }
    }
    btns[0].onclick = function(){
        xuanze(true);
    }
    btns[1].onclick = function(){
        xuanze(false);
    }
    btns[2].onclick = function(){
        for(var i=0;i<inputs.length;i++){
            if(inputs[i].checked==false){
                inputs[i].checked= true;
            }else{
                inputs[i].checked= false;  
            }

        }
    }

}

收获{

input.checked = true/"checked"  可以判断是否选中

}

)

理论知识:

a.数组小操作（很常用吧，但是项目做的少，自然用得少）

1.操作数据
push 数组后面添加 一个或多个元素
unshift 数组前面添加一个或多个元素
pop() 数组后面删除第一个元素
shift() 数组前面删除第一个元素

2.连接两个或者多个数组，不会改变原数组
contact()
a.contact(b)

3.字符串和数组的相互转换
split(参数1);
参数1 以什么来切割字符串
字符串转换为数组

join(参数1);
参数1 符号以什么来分割数组
数组转换为字符串

 

b.DOM操作

1.元素查找

父节点 parentNode
兄弟节点
nextSibling IE678认识
nextElementSibling
previousSibling IE678认识
previousElementSibling
子节点
firstChild IE678认识
firstElementChild
lastChild IE678认识
lastElementChid
所有子节点
childNodes
选出全部的孩子 高版本浏览器会把换行也看做子节点

children
选出全部的孩子， IE会把注释看作子节点

nodeType = 1 元素节点

2.元素操作

创建节点 docuemnt.createElement("元素标签");

添加节点
appendChild() 放到最后面

insertBefore(插入节点，参照节点)
插入到参照节点的前面
第二个参数为null，则默认这个新生成的盒子放到最后面

删除节点
removeChild

复制节点
cloneNode();
如果里面是true深层复制（复制子节点）

如果里面是false浅层复制

 

二、mysql

今天主要看得就是DOS操作方面的

主要就是alter（前面一直都写成了alert）

查看数据库 show databases;
创建数据库 create database 数据库名;
使用数据库 use 数据库名;

创建表 create table 表名(字段名1 数据类型(数据长度),字段名2 数据类型(数据长度),...);
查看表的结构 desc 表名
查看建库语句 show create database 库名
查看建表语句 show create table 表名
修改字段值 alter table 表名 modify 字段名 修改后的值
修改表的字段 alter table 表名 change 字段名 修改后的字段名 修改后的类型和长度
删除字段 alter table 表名 drop 字段名;
插入字段 alter table 表名 add 字段名 字段名 字段名和长度 位置(first/after 字段名);
修改表名 alter table 表名 rename 修改后的表名