智能社JavaScript 笔记1:基础入门篇(2)

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

函数传参

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

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

样式优先级:*(通配符)< 标签 < class < ID < 行间
对于同一个元素,要么只动style,要么只动class

练习:函数传参


<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(初始化; 条件; 自增){
    语句
}

练习: 全选,不选,反选


<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


<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">111div>
            <div>222div>
            <div>333div>
            <div>4444div>
        div>
    body>
html>

JS简易日历

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

练习:innterHTML


<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>

你可能感兴趣的:(JavaScript)