03-javascript基础学习笔记

1. js的内置样式###

仅作为了解：<button onclick="alert('大家早上好')">按钮</button>

2. 全选/全不选/反选###

input.checked=!input.checked

HTML代码：

<button>全选</button>
<button>全不选</button>
<button>反选</button>
<br>
<ul>
    <li><span>你好</span><input type="checkbox"></li>
    <li><span>你好</span><input type="checkbox"></li>
    <li><span>你好</span><input type="checkbox"></li>
    <li><span>你好</span><input type="checkbox"></li>
    <li><span>你好</span><input type="checkbox"></li>
</ul>

JS代码：

<script>
    //选取事件元素
    var btns = document.getElementsByTagName('button');
    console.log(btns);
    //选取目标元素
    var input = document.getElementsByTagName('input');

    //代码抽离—功能相似，代码相同的部分抽取出来，不同的部分当作变量用参数的形式传进去
    function checkFn(btn){
        btns[btn].onclick= function () {
            for(let i=0;i<input.length;i++){
                input[i].checked= btn==0?true:btn==1?false:!input[i].checked;
            }
        }
    }
    for (let i=0; i<btns.length; i++){
        checkFn(i);
    }
</script>

3. 九宫格###

一些关键点：

• position:absolute
• count：总列数
• 当前行数（row)=当前i除以总列数
• 当前列数（col）=当前i对总列数取余
• 再利用row和col分别计算每一个块所在的位置。

CSS代码：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            /*width: 1200px;*/
            margin: 0 auto;
            /*border: 1px solid #000;*/
            position: relative;
            top:20px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .box div{
            width: 100px;
            height: 100px;
            border: 1px solid #000;;
            text-align: center;
            line-height:100px;
            /*position: absolute;*/
            float: left;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 5px;
        }
        button{
            margin: 10px auto;
            text-align: center;
        }
    </style>

HTML代码：

<button>点击输入列数</button>
<div class="box">
    <div><span>第1个</span></div>
    <div><span>第2个</span></div>
    <div><span>第3个</span></div>
    <div><span>第4个</span></div>
    <div><span>第5个</span></div>
    <div><span>第6个</span></div>
    <div><span>第7个</span></div>
    <div><span>第8个</span></div>
    <div><span>第9个</span></div>
    <div><span>第10个</span></div>
    <div><span>第11个</span></div>
    <div><span>第12个</span></div>
</div>

JS代码：

<script>
    var box = document.getElementsByTagName('div');
    document.getElementsByTagName('button')[0].onclick=function(){
        let count = prompt("请输入数字");
        //当前行
        let row=0;
        //当前列
        let col=0;

        //对每一个块进行处理
        for(let i=1; i<=box.length; i++){
            box[i].style.position="absolute";

            //当前块的索引除以总列数得出当前块所在行
            row = parseInt((i-1)/count);

            //当前块的索引对总列数求余得出当前块所在列
            col = (i-1)%count;

            //利用得出的行和列对块的位置进行定位
            box[i].style.top=row*110+"px";
            box[i].style.left=col*110+"px";
        }
    }
</script>

4. 排他思想###

我们的主旨是：干掉所有人，包括自己，最后再让自己复活

HTML代码：

<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<button>第四个</button>
<button>第五个</button>

JS代码：

        //获取事件元素
    var btns = document.getElementsByTagName('button');
    //对每个按钮添加事件
    for(let i=0;i<btns.length;i++){
        btns[i].onclick= function () {
            //排他思想：干掉所有人，包括自己
            for(let i=0;i<btns.length;i++)btns[i].style.backgroundColor="#FFF";
            //然后再复活自己
            this.style.backgroundColor="green";
        }
    }

5.JS中IE浏览器兼容###

通过类名称获取标签，有兼容性问题：IE6/7/8不支持
document.getElementsByClassName("class");

所以需要自己定义一个利用Class来获取标签的工具函数

        //定义一个利用class属性获取标签的函数—自己封装工具类，目的：兼容低版本浏览器
    function getElementsByClass_name(className){
        //检测当前环境是否可以直接使用class来获取标签，如果能，直接返回该方法
//        if(document.getElementsByClassName)return document.getElementsByClassName(className);
        //如果不能，let do it.

        //定义一个存储符合条件标签的数组
        var arr = [];
        //获取页面上所有的标签
        var doms = document.getElementsByTagName('*');

        //对页面上所有的标签进行遍历
        for(var i = 0; i<doms.length; i++){
            //获取每一个标签的class属性，并将每一个标签的class属性存到数组中
            var domClassArr = doms[i].className.split(" ");

            //便利每个标签的class属性，是否是所要查找的标签，如果是，则存到数组arr中
            for(var j = 0; j<domClassArr.length; j++){
                if(domClassArr[j]==className)arr.push(doms[i]);
            }
        }
        return arr;
    }

6. 字符串的切割###

var strArr = str.split("分割条件"); //分割条件一定是字符串中已有的内容，返回值为数组

7.非字符串类型转换成字符串类型###

布尔类型转换为字符串类型

var flag = false;
var rst = flag.toString();
console.log(typeof rst);

数值类型转换为字符串类型

var num = 123;
var rst = num.toString();
console.log(typeof rst);
var result = num.toString(进制);//转换成指定进制的字符串

补充："+"运算符

也可以用来连接字符

var str1 = "HELLO";
var str2 = "WORLD";
var rst = str1 + str2;
console.log(rst);
当数字类型和字符串类型相加的时候，数字类型会转换为字符串类型

数字类型转换成字符串类型最快的方式：
var num = 90;
var str = num+"";
console.log(typeof str);

8.字符串转成数值类型###

8.1 parseInt();只能转换出整数类型，当遇到0~9的整数就转换，如果是其他的那么就停止转换，并且返回当前转换完的数字

var str = "123";
var num = parseInt(str);
console.log(typeof num);

8.2 parseFlota();只有遇到第一个小数点的时候会继续转换，再有遇到其他不是0~9的数字就会退出转换，并返回当前转换完的数字

var str = "123.45abc";
var num = parseFloat(str);
console.log(num);

9.对象###

定义：具有特定功能的功能组
属性和方法

• 变量：相对属性，更加自由，在作用域内任意位置都可以使用
• 属性：隶属于对象（就是变量），想要使用，必须由对象.属性
• 方法：隶属于对象（就是函数）

自定义属性：

var arr=[12,345];
arr.length;
//自定义属性
arr.selfProp=123;
console.log(arr.selfprop);