js学习--js简单案例

最新推荐文章于 2023-03-02 10:45:55 发布

微笑老张

最新推荐文章于 2023-03-02 10:45:55 发布

阅读量831

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_52151777/article/details/116744818

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

点击显示，再点击关闭（或鼠标移出移入）

声明变量的关键字为var，js的代码写在<script>....</script>,点击button触发事件。
用var odiv = document.getElementById('box');这个方法来获取id，并将id存在odiv这个变量里。{兼容性}
οnmοuseοver=""当鼠标移入会做出反应，οnmοuseοut=""当鼠标移出会做出反应。
odiv.style.display = 'none'; //odiv就是获取完的变量名，.选择符相当于“的”意思。
<input type="checkbox"/>做出来的是选择框的效果。
变量和参数不加单引号，字面量要加单引号，字符串都要加引号。
样式的优先级：* <标签<class<id<行间（style）
js可以写在head里，可以写在body里，也可以写在.js文件里，文件里不用<script>标签修直接写函数，然后调用只需引入js文件就好了<script src="myScript.js"></script>

<!DOCTYPE html>
<html>


<meta charset="utf-8">
<title>scratch</title>
<link rel="stylesheet" type="text/css" href="">

<head>
    <style>
        #box {
            width: 100px;
            height: 200px;
            display: none;
            background-color: aquamarine;
        }
    </style>
    <script>
        function show() {
            var odiv = document.getElementById('box');
            if (odiv.style.display == 'none') {
                odiv.style.display = 'block';

            } else {
                odiv.style.display = 'none';
            }

        }
    </script>

</head>

<body>
    <input type="button" value="显示隐藏" onclick="show()" />
    <div id="box">1111</div>

</body>

</html>

函数

函数定义
函数调用

声明一个函数的框架

<script>

function show(num){//fuction为关键字，show为方法名，num为传递的参数
 alert(num);//调用函数可以弹出框提示abc
}
</script>
show（'abc'）;

通过href="css1.css"可以实现换肤功能
任何变迁都可以加id，任何标签的属性都可以修改

简单的函数功能实现
传递参数的时候加上单引号，传递字面量。

<!DOCTYPE html>
<html>


<meta charset="utf-8">
<title>scratch</title>
<link rel="stylesheet" type="text/css" href="">

<head>
    <style>
        #box {
            width: 100px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
    <script>
        function setcolor(color) {
            var odiv = document.getElementById('box');
            odiv.style.background=color;

        }
    </script>

</head>

<body>
<input type="button" value="变红" onclick="setcolor('red')" />
<div id="box">1111</div>

</body>

操作属性的方法

一：点操作符 odiv.style.background=color;

二：方括号操作符要修改的属性并不固定 odiv.style[name]=color; odiv['style'][name]=color;


<head>
    <style>  //样式表
        #box {
            width: 100px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
    <script>
        function setstyle(name,value) {
            var odiv = document.getElementById('box');
            odiv.style[name]=value;


        }
    </script>

</head>

<body>
<input type="button" value="变高" onclick="setstyle('height','500px')" />
<input type="button" value="变宽" onclick="setstyle('width','800px')" />
<input type="button" value="变绿" onclick="setstyle('color','green')" />//color是字变绿，如果传参为brackground，则整个背景变绿。
<div id="box">1111</div>

</body>

提取行间事件

js执行是顺序执行，从上到下，

做到行为，行间，样式分离。

var adiv = document.getElementsByTaGName('div'); //获取一组元素的id，把div都存入一个数组。
adiv[0].style.background='red';

var adiv = document.getElementsByTaGName('div');        //获取一组元素的id，是一个数组，相当于生成了一个数组，document可换成其他容器。
adiv[0].style.background='red';     //可用循环来遍历数组，adiv.length方法可获得adiv的长度

<script>
window.onload=function(){            //这个方法是在加载完整个页面，在执行其中代码

var obtn=document.getElementById('btn1');//提取行间信息，写在script标签中
obtn.onclick=function(){                    //函数没有名字是匿名函数，直接调用就好
    alert('a');
    };
};
</script>
<input id ="btn1" type="button" value ="按钮">

做一个全选框

<head>
    <style>
        #box {
            width: 100px;
            height: 200px;
        }
    </style>
    <script>
        window.onload = function() {
            var obtn1 = document.getElementById('btn1')
            var obtn2 = document.getElementById('btn2')
            var obtn3 = document.getElementById('btn3')
            var odiv = document.getElementById('box');
            var ocheck = odiv.getElementsByTagName("input");
            obtn1.onclick = function() {
                for (var i = 0; i < ocheck.length; i++) {
                    ocheck[i].checked = true;

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

                }
            }
            obtn3.onclick = function() {
                for (var i = 0; i < ocheck.length; i++) {
                    if (ocheck[i].checked == true) {
                        ocheck[i].checked = false;

                    } else {
                        ocheck[i].checked = true;

                    }

                }


            }


        };
    </script>

</head>

<body>
    <input type="button" value="全选" id="btn1" />
    <input type="button" value="不选" id="btn2" />
    <input type="button" value="反选" id="btn3" />

    <div id="box">

        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" />
    </div>

微笑老张

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js学习--js简单案例

点击显示，再点击关闭（或鼠标移出移入）声明变量的关键字为var，js的代码写在<script>....</script>,点击button触发事件。用var odiv = document.getElementById('box');这个方法来获取id，并将id存在odiv这个变量里。{兼容性} onmouseover=""当鼠标移入会做出反应，onmouseout=""当鼠标移出会做出反应。 odiv.style.display = 'none'; //odiv就是获.
复制链接

扫一扫