五、JavaScript基础

作者: XZ阳光小熊 | 来源:发表于2016-05-15 15:34 被阅读47次

1、关键字

注意三个关键字this、continue、break。

this：代表自己本身，谁调用它，它就代表谁。
continue：表示跳出本次循环。
break：表示结束整个循环。

2、类型相关

(1). 变量

变量分为全局变量和局部变量，变量必须先声明后调用，如果在声明之前调用会显示undefined。

全局变量：从定义开始，一直到文档的之后无论在任何位置，定义变量不添加var关键字，会成为全局变量。
局部变量：从定义开始，一直到包含它的尾大括号为止，当局部变量和全局变量发生重复定义时，使用局部变量。

(2). 数组

数组对象用来在单独的变量名中存储一系列的值。

声明数组 var array = ['1','2','2','3','10','26'];
arr[i] 通过下标获取数组中的元素，i为元素的下标，下标从0开始
length 获取数组元素的个数；
push() 在最后添加元素；

    // 声明数组
    var arr = ['45','30','3','35']

    // 获取数组中的第二个元素
    console.log(arr[1]);

    // 获取数组元素的个数
    console.log(arr.length);

    // 在数组最后添加元素
    arr.push('100')
    console.log(arr);

控制台打印效果

arr[i] = a 修改数组中某一元素的值
pop() 删除最后一个元素；
unshift() 插入到第一个元素的位置；
shift() 删除第一个元素；

    // 声明数组
    var arr = ['45','30','3','35'];

    // 修改数组中第三个元素的值
    arr[2] = '50';
    console.log(arr);


    // 删除最后一个元素
    arr.pop()
    console.log(arr);

    // 删除第一个元素
    arr.shift();
    console.log(arr);

    // 在数组的最前面插入元素
    arr.unshift('100');
    console.log(arr);

控制台打印结果

slice(start,end) 从已有的数组中返回选定的元素；
该方法不会修改数组，而会返回一个子数组，注意两个参数的用法：

start： 起始位置，必选。为元素下标，可为负值。当为负值时是从最后一个元素开始算，倒数第一个元素为-1，倒数第二个元素为-2，依此类推。
end：结束位置，可选。为元素下标，可为负值。获取时不包含此下标所代表的元素，如果没有选定结束位置则默认直接获>取到最后一个元素。

    // 声明数组
    var arr = ['45','30','3','35'];

    // 从第二个元素开始获取到最后一个元素为止
    console.log(arr.slice(0,-1));

    // 从倒数第三个元素开始获取到第四个元素为止
    console.log(arr.slice(-3,3));

    // 从第0个元素开始，获取到第四个元素为止
    console.log(arr.slice(0,3));

控制台打印效果

concat() 用于连接两个或多个数组；

    // 声明数组
    var a = [1,2,3,4];
    var b = ['a','b','c','d','s'];
    var c = ['生死契阔，','与子成悦；','执子之手，','与子偕老。']

    console.log(a);
    console.log(b);
    console.log(c);

    // 连接数组
    a.concat(b);
    console.log(a.concat(b));
    
    // 连接多个数组
    a.concat(b,c)
    console.log(a.concat(b,c));

控制台打印结果

splice(index,howmany,item1,.....,itemX) 从数组中添加/删除项目，然后返回被删除的项目，该方法会修改数组，注意三个参数的用法：

index： 必需。整数为指定下标，规定添加/删除项目的位置，可使用负数。当为负值时是从最后一个元素开始算，倒数第一个元素为-1，倒数第二个元素为-2，依此类推。
howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item：可选。向数组添加的新项目。

    var arr = [23,10,6,12,50]

    // 从下标为2的元素开始删除3个并将5加入数组中
    arr.splice(2,3,5)
    console.log(arr);

    // 从下标为2的元素开始插入10和20两个元素
    arr.splice(2,0,10,20)
    console.log(arr);

    // 从下标为2的元素开始删除3个元素
    arr.splice(2,3);
    console.log(arr);

控制台打印效果

reverse()返回一个元素顺序被反转的Array对象，注意只是返回而没有创建。
join()将数组转换为字符串，元素由指定的分隔符分隔开来。

小练习：反转字符串

    // 反转字符串
    var str1 = "abcdefhijk";
    // split()字符串方法，将字符串分割成数组
    var strs = str1.split('');
    // reverse()返回一个元素顺序被反转的Array对象，注意只是返回而没有创建
    // join()将数组转换为字符串，元素由指定的分隔符分隔开来
    var str2 = strs.reverse().join("");
    console.log(str1);
    console.log(strs);
    console.log(strs.reverse());
    console.log(str2);

控制台打印效果

(3). 字符串（String)

字符串对象用于处理已有的字符块。

string.length 获取字符串的长度。
string.toUpperCase() 全部转为大写。
string.toLowerCase() 全部转为小写。
string.fontcolor() 修改字体颜色。
string.fontsize(20) 修改字体大小。
string. small() 设置小文字。
string.big() 设置大文字。

    var string = 'xiongzhong';

    // 获取字符串的长度
    console.log(string.length);

    // 全部转为大写
    title.innerHTML = string.toUpperCase();
    // 全部转换为小写
    title.innerHTML = string.toLowerCase();

    document.write("ssssssssssss");
    // 改变字体颜色
    document.write("ssssssssssss" .fontcolor('blue'));
    // 修改字体大小
    document.write("ssssssssssss" .fontsize(20));
    // 设置大文字
    document.write("ssssssssssss" .big( ));
    // 设置小文字
    document.write("ssssssssssss" + "<br/>".small( ));

代码执行效果

string.sub() 使文字成为下角标。
string.sup() 使文字成为上角标。
string.bold() 文字加粗。
string.italics() 斜体。
string.strike() 给文字添加中划线。
string.link() 使文字成为链接地址。
string.indexOf() 返回某个指定字符串中第一个字符的下标，如不存在则返回-1。

注意：字符串中的空格也算一个字符，此方法也可用于数组。

    var string3 = string2
    document.write(string2);
    document.write(string3.fontcolor('red').big().fontsize(20));
    document.write("<br/>"+ string2);
    // 使文字成为上角标
    document.write(string2.sup());
    // 使文字成为下角标
    document.write(string2.sub());
    // 设置文字加粗
    document.write(string2.bold());
    //设置文字为斜体
    document.write(string2.italics());
    // 给文字添加中划线
    document.write(string2.strike()+ "<br/>");
    // 使文字成为链接地址
    var name = '有种就点我';
    title.innerHTML = name.link('http://www.baidu.com');

    var names = ['李泽', '李杨', '李猛', '李明正', '李艳美', '李辉', '肖卫卫', '肖红雨'];
    // indexOf('text')返回第一个字符的下标，如果不存在则返回-1

    var count = 0;
    // 遍历names内的字符串
    for (var i = 0; i < names.length; i++) {
        // 找的第一个字符为“李”，即下标为0的字符串计算后即为李姓人数
        if (names[i].indexOf('李') == 0) {
            count++;
        }
    }
    console.log(count);

注释： innerHTML 先清空再赋值。

代码执行效果

string.match() 查找字符串，存在返回字符串，不存在返回null。
string.substring(start, end) 提取字符串介于两个指定下标之间的字符，提取时包含start所代表的元素，不包含end所代表的元素。

start 开始位置的下标。
end 结束位置的下标，此参数可选，如果不写默认一直到最后。
如string.substring(2, 4)表示提取下标从2到4的字符。

string.substr(start, count) 在字符串中抽取从某一下标开始，指定数目的字符。

如：string.substr(2, 3) 表示从下标为2的字符串开始截取3个字符。
注意：start可为负值，-1指字符串最后一个字符。

string.split() 用于把一个字符串分割成数组，可按某一个字符来拆分，拆分之后的字符串放在一个数组中，并删除该字符。

    var string = "山 无 棱，天 地 合，乃 敢 与 君 绝。";
    // indexOf('text')返回第一个字符的下标，如果不存在则返回-1
    // 空格也会被当做一个字符串，返回下标时（乃 敢 与 君 绝）会整体被当做一个字符串进行计算
    console.log(string.indexOf('乃 敢 与 君 绝'));

    // match()查找字符串，存在返回字符串，不存在返回null
    console.log(string.match("执子之手"));
    console.log(string.match("山 无 棱"));


    // substring() 方法用于提取字符串中介于两个指定下标之间的字符。
    //包含第一个但不包含最后一个
    console.log(string.substring(6,23));
    // 从下标为三的子字符一直到最后
    console.log(string.substring(3));


    // substr() 方法可在字符串中抽取从某一下标开始的指定数目的字符。
    // 从下标为6的字符开始截取3个
    console.log(string.substr(6,3));

    // split() 方法用于把一个字符串分割成字符串数组，可以按某一个字符来拆分，拆分之后的字符
    // 串放在一个数组里面，并删除该字符。
    // 按空格拆开，
    console.log(string.split(""));

代码执行效果

(4). 类型转换

parseInt() 将字符串换为整数；

// parseInt()此方法会把字符串转化为整数,默认去掉小数和字母
// 如果字符串以非数字开头则返回NaN(不是一个数字)
console.log(parseInt('23.2432dksl'));

console.log(parseInt('sd32'));

console.log(parseInt('35.23434'));

console.log(parseInt(true));

控制台打印效果

parseFloat() 将字符串转换为带小数点的数字；

    console.log(parseFloat('10hfsiu'));
    console.log(parseFloat('23.23949'));
    console.log(parseFloat('3.343ewoe2'));

控制台打印效果

toString() 把数字转化为字符串；

    var a = 23;
    // 查看数据类型为number
    console.log(typeof(a));

    // 把a转化为字符串
    var b = a.toString()

    console.log(typeof(b));

控制台打印效果

eval()将字符串转换为可执行的值

    var a = 10;
    console.log("10 + 20");
    console.log(eval("10 + 20"));

代码执行效果

3、元素的获取

getElementById() 根据id值获取元素，返回一个元素。
getElementsByTagName() 根据标签名获取元素，返回一个数组。
getElementsByClassName() 根据class值获取元素，返回一个数组。
getElementsByName() 根据name值获取元素，返回一个数组。

    <body>
        <div class="wrap">
            <h1 id="title"></h1>
            <a href="#"></a>
            <input type="button" name="name" value="">
        </div>
    </body>

    <script type="text/javascript">

        // 根据id值获取元素，返回一个元素
        var h1 = document.getElementById("title");
        // 根据标签名获取元素，返回一个数组
        var a = document.getElementsByTagName("a");
        // 根据class值获取元素，返回一个数组
        var wrap = document.getElementsByClassName("wrap");
        // 根据name值获取元素，返回一个数组
        var input = document.getElementsByName("name");

        console.log(title);
        console.log(a);
        console.log(wrap);
        console.log(input);
    </script>

控制台打印效果

4、className属性

设置元素的class属性的值，会覆盖之前的class值。也可以用类似的方法设置元素的id值。

    <body>
        <div class="wrap">
            <h1 id="title"></h1>
            <a href="#"></a>
            <input type="button" name="name" value="">
        </div>
    </body>

    <script type="text/javascript">

        // 根据id值获取元素，返回一个元素
        var h1 = document.getElementById("title");
        // 根据标签名获取元素，返回一个数组
        var a = document.getElementsByTagName("a")[0];

        // 给h1标签添加class值
        h1.className = 'title';

        // 给a标签添加id值
        a.id = 'a';
        
    </script>

修改后的效果

5、input的checked属性

判断一个选项卡是否处于选中的状态。

6、鼠标事件

onclick(鼠标单击)
ondblclick (鼠标双击)
onmousedown(鼠标按下)
onmouseup(鼠标抬起)
onmousemove(鼠标移动)
oncontextmenu(右击鼠标)
onmouseover(鼠标划入)
onmouseout(鼠标划出)
onscroll(滚动事件)
onresize(窗口大小发生改变)
onwheel(鼠标滚轮事件)

7、练习

(1). 练习全部选中、全部取消、反选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>全部选中/全部取消</title>
        <style media="screen">
            * {
                margin: 0;
                padding: 0;
            }
            ul {
                list-style: none;
            }
            li {
                line-height: 1.3em;
                padding-left: 100px;
            }
            li input {
                margin-right: 20px;
            }
            li:nth-child(odd) {
                background-color: rgb(245, 245, 245);
            }
            li:nth-child(even) {
                background-color: white;
            }
            li:hover {
                background-color: cyan;
            }
        </style>
    </head>
    <body>

        <button type="button" name="button">全部选中/全部取消</button>
        <button type="button" name="button">反选</button>
        <ul>
            <li><input type="checkbox" name="name" value="">选项1</li>
            <li><input type="checkbox" name="name" value="">选项2</li>
            <li><input type="checkbox" name="name" value="">选项3</li>
            <li><input type="checkbox" name="name" value="">选项4</li>
            <li><input type="checkbox" name="name" value="">选项5</li>
            <li><input type="checkbox" name="name" value="">选项6</li>
            <li><input type="checkbox" name="name" value="">选项7</li>
            <li><input type="checkbox" name="name" value="">选项8</li>
            <li><input type="checkbox" name="name" value="">选项9</li>
            <li><input type="checkbox" name="name" value="">选项1</li>
            <li><input type="checkbox" name="name" value="">选项2</li>
            <li><input type="checkbox" name="name" value="">选项3</li>
            <li><input type="checkbox" name="name" value="">选项4</li>
            <li><input type="checkbox" name="name" value="">选项5</li>
            <li><input type="checkbox" name="name" value="">选项6</li>
            <li><input type="checkbox" name="name" value="">选项7</li>
            <li><input type="checkbox" name="name" value="">选项8</li>
            <li><input type="checkbox" name="name" value="">选项9</li>
            <li><input type="checkbox" name="name" value="">选项1</li>
            <li><input type="checkbox" name="name" value="">选项2</li>
            <li><input type="checkbox" name="name" value="">选项3</li>
            <li><input type="checkbox" name="name" value="">选项4</li>
            <li><input type="checkbox" name="name" value="">选项5</li>
            <li><input type="checkbox" name="name" value="">选项6</li>
            <li><input type="checkbox" name="name" value="">选项7</li>
            <li><input type="checkbox" name="name" value="">选项8</li>
            <li><input type="checkbox" name="name" value="">选项9</li>
            <li><input type="checkbox" name="name" value="">选项1</li>
            <li><input type="checkbox" name="name" value="">选项2</li>
            <li><input type="checkbox" name="name" value="">选项3</li>
            <li><input type="checkbox" name="name" value="">选项4</li>
            <li><input type="checkbox" name="name" value="">选项5</li>
            <li><input type="checkbox" name="name" value="">选项6</li>
            <li><input type="checkbox" name="name" value="">选项7</li>
            <li><input type="checkbox" name="name" value="">选项8</li>
            <li><input type="checkbox" name="name" value="">选项9</li>
            <li><input type="checkbox" name="name" value="">选项1</li>
            <li><input type="checkbox" name="name" value="">选项2</li>
            <li><input type="checkbox" name="name" value="">选项3</li>
            <li><input type="checkbox" name="name" value="">选项4</li>
            <li><input type="checkbox" name="name" value="">选项5</li>
            <li><input type="checkbox" name="name" value="">选项6</li>
            <li><input type="checkbox" name="name" value="">选项7</li>
            <li><input type="checkbox" name="name" value="">选项8</li>
            <li><input type="checkbox" name="name" value="">选项9</li>
            <li><input type="checkbox" name="name" value="">选项1</li>
            <li><input type="checkbox" name="name" value="">选项2</li>
            <li><input type="checkbox" name="name" value="">选项3</li>
            <li><input type="checkbox" name="name" value="">选项4</li>
            <li><input type="checkbox" name="name" value="">选项5</li>
            <li><input type="checkbox" name="name" value="">选项6</li>
            <li><input type="checkbox" name="name" value="">选项7</li>
            <li><input type="checkbox" name="name" value="">选项8</li>
            <li><input type="checkbox" name="name" value="">选项9</li>
        </ul>

    </body>
    <script type="text/javascript">
        // 获取元素
        var btns = document.getElementsByTagName('button');
        var lis = document.getElementsByTagName('li');
        var inputs = document.getElementsByTagName('input');

        // 绑定事件
        btns[0].onclick = function () {
            var count = 0;
            // 获取选中的个数
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].checked == true) {
                    ++count;
                }
            }

            // 判断是否全部选中
            if (count == inputs.length) {
                for (var i = 0; i < inputs.length; i++) {
                    inputs[i].checked = false;
                }
            } else {
                for (var i = 0; i < inputs.length; i++) {
                    inputs[i].checked = true;
                }
            }
        }

        btns[1].onclick = function () {
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = !(inputs[i].checked);
            }
        }


        // 给所有的li绑定事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                // alert(this.innerHTML);

                var input = this.getElementsByTagName('input')[0];
                input.checked = !(input.checked);
            }
        }
    </script>
</html>

代码执行效果

(2). tab切换

    // 根据TagName获取标签
    var inputs = document.getElementsByTagName('input');
    var sections = document.getElementsByTagName('section');
    // 遍历所有的input按钮
    for (var i = 0; i < inputs.length; i++) {
        // 自定义属性为按钮添加下标
        inputs[i].index = i;

        // 为所有的按钮绑定事件
        inputs[i].onclick = function () {
            // 遍历所有的section
            for (var j = 0; j < sections.length; j++) {
                // 将section全部隐藏
                sections[j].style.display = 'none';
            }
            // 将按钮的下标直接放入sections的下标中点击按钮即可显示对应的section
            sections[this.index].style.display = 'block';
        }
    }

代码执行效果

以上内容纯属个人理解，由于水平有限，若有错漏之处敬请指出斧正，小弟不胜感激。

五、JavaScript基础

1、关键字

2、类型相关

(1). 变量

(2). 数组

(3). 字符串（String)

(4). 类型转换

3、元素的获取

4、className属性

5、input的checked属性

6、鼠标事件

7、练习

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读