智能社JavaScript 笔记1：基础入门篇（2）

Little_Blue_Eye

于 2018-07-22 17:20:52 发布

阅读量204

点赞数

分类专栏： JavaScript 文章标签： JavaScript JavaScript

本文链接：https://blog.csdn.net/yejing0609/article/details/81156484

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇JavaScript笔记涵盖了函数传参的原理和应用，如何提取行间事件，以及涉及循环、选项卡和JS简易日历的实现。讲解了通过函数参数动态改变元素样式，强调了样式优先级，并探讨了while和for循环在处理一组元素时的作用。此外，还介绍了选项卡的this关键字应用和JS创建日历的思路，包括数组和innerHTML的使用。

摘要由CSDN通过智能技术生成

函数传参
提取行间事件
循环
选项卡
JS简易日历

函数传参

改变背景颜色
- 函数传参：参数就是占位符
什么时候用传参：函数里定不下来的东西
改变Div的任意样式
- 操纵属性的第二种方法
什么时候用：要修改的属性不固定
字符串和变量——区别和关系
- 将属性名作为参数传递
style与className
- 元素.style.属性=xxx 是修改行间样式
- 之后再修改className不会有效果

第一种操作属性方法：oTxt.value="xxxxxx";
第二种操作属性的方法：oTxt.['value']="xxxxxx";
区别：第二种的优势： [ ]可以接受函数参数，而第一种不行。

样式优先级：*（通配符）< 标签 < class < ID < 行间
对于同一个元素，要么只动style，要么只动class

练习：函数传参

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>变色</title>
        <style>
        #div1 {width: 200px; height: 200px; background: red;}
        </style>
        <script>
        function setColor(color){
            var oDiv = document.getElementById('div1')
            oDiv.style.background=color;
        }
        </script>
    </head>
    <body>
        <input type="button" value="变绿" onclick="setColor('green')" />
        <input type="button" value="变黄" onclick="setColor('yellow')" />
        <input type="button" value="变黑" onclick="setColor('black')" />
        <div id="div1"></div>
    </body>
</html>

提取行间事件

提取事件
- 为元素添加事件
事件和其他属性一样，可以用JS添加
windows.onload的意义：当页面加载完成的时候发生
行为、样式、结构三者分离
（JS）（CSS）（HTML）
获取一组元素
- getElementsByTagName
数组的使用

循环

while循环语句

while(条件) {
    语句
}

for循环
- 用for循环为一组元素添加事件
- 什么时候用循环——一组元素

for(初始化; 条件; 自增){
    语句
}

练习：全选，不选，反选

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>全选，不选，反选</title>
        <script>
        window.onload=function(){
            var oBtn1 = document.getElementById('btn1');
            var oBtn2 = document.getElementById('btn2');
            var oBtn3 = document.getElementById('btn3');
            var oDiv = document.getElementById('div1');
            var aCh = document.getElementsByTagName('input');

            oBtn1.onclick=function () {
                for (var i = 0; i < aCh.length; i++) {
                    aCh[i].checked=true;
                }
            }

            oBtn2.onclick=function () {
                for (var i = 0; i < aCh.length; i++) {
                    aCh[i].checked=false;
                }
            }

            oBtn3.onclick=function () {
                for (var i = 0; i < aCh.length; i++) {
                    if (aCh[i].checked==true) {
                        aCh[i].checked=false;
                    } else {
                        aCh[i].checked=true;
                    }
                }
            }
        };
        </script>
    </head>
    <body>
        <input id="btn1" type="button" name="" value="全选">
        <input id="btn2" type="button" name="" value="不选">
        <input id="btn3" type="button" name="" value="反选">
        <div id="div1">
            <input type="checkbox" /><br>
            <input type="checkbox" /><br>
            <input type="checkbox" /><br>
            <input type="checkbox" /><br>
            <input type="checkbox" /><br>
            <input type="checkbox" /><br>
            <input type="checkbox" /><br>
        </div>

    </body>
</html>

选项卡

this：当前发生事件的元素

练习：选项卡
先隐藏所有Div，再显示“当前”Div
索引值的使用：什么时候用索引值——需要知道“第几个”的时候
html 添加index会被FF过滤，因此用js添加index

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>选项卡</title>
        <style>
        #div1 .active {background: yellow;}
        #div1 div {width: 200px; height: 200px; background: #CCC; broder: 1px solid #999; display: none;}
        </style>
        <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            var aBtn=oDiv.getElementsByTagName('input');
            var aDiv=oDiv.getElementsByTagName('div');

            // 点哪个button就哪个标黄
            for (var i = 0; i < aBtn.length; i++){
                aBtn[i].index = i;
                aBtn[i].onclick=function () {
                    for (var i = 0; i < aBtn.length; i++){
                        aBtn[i].className='';
                        aDiv[i].style.display='none';
                    }
                    this.className='active';
                    aDiv[this.index].style.display='block';
                };
            }
        };
        </script>
    </head>
    <body>
        <div id="div1">
            <input class="active" type="button" name="" value="教育">
            <input type="button" name="" value="培训">
            <input type="button" name="" value="招生">
            <input type="button" name="" value="出国">
            <div style="display:block">111</div>
            <div>222</div>
            <div>333</div>
            <div>4444</div>
        </div>
    </body>
</html>

JS简易日历

程序实现思路
- 类似选项卡，只是下面只有一个div
- innerHTML使用
数组的使用
- 定义： arr=[1,2,3]
- 使用： arr[0]
字符串连接
- 作用：连接两个字符串
- 问题：连接中的优先级

练习：innterHTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>简易日历</title>
        <style media="screen">
            #div1 {width: 200px; height: 150px; border: 1px solid black;}
        </style>
        <script type="text/javascript">
        window.onload=function(){
            var oTxt = document.getElementById('txt1');
            var oBtn = document.getElementById('btn1');
            var oDiv = document.getElementById('div1');

            oBtn.onclick=function() {
                oDiv.innerHTML=oTxt.value;
            }
        };
        </script>
    </head>
    <body>
        <input id="txt1" type="text" name="" value="">
        <input id="btn1" type="button" name="" value="设置文字">
        <div id="div1"></div>
    </body>
</html>

Little_Blue_Eye

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
智能社JavaScript 笔记1：基础入门篇（2）

函数传参改变背景颜色 - 函数传参：参数就是占位符什么时候用传参：函数里定不下来的东西改变Div的任意样式 - 操纵属性的第二种方法什么时候用：要修改的属性不固定字符串和变量——区别和关系 - 将属性名作为参数传递 style与className - 元素.style.属性=xxx 是修改行间样式 - 之后再修改className不会有效果第一种操作属性方法：o...
复制链接

扫一扫

专栏目录