首页 > 其他分享> 文章详细

js基础

2019-12-26 10:02:28 阅读：185 来源： 互联网

标签：function document 对话框基础 alert 事件 js

javascript

js首先，和java没有关系，就是负责控制web前端结构的前两者：==结构（HTML）和样式（css）==

了解：js出现是为了验证表单的合法性

js的基础语法

1、写script标签，放在HTML页面的最后位置

2、从script标签中间

alert（“警告”）

    <script type="text/javascript">
        //弹出对话框
        alert("弹出来");
    </script>

js事件

事件：在什么情况下执行什么命令

事件三要素：

--事件源.事件类型=执行的命令

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                div{color: red;}
            </style>
        </head>
        <body>
            <div id="div1">
                点击
            </div>
            <p class="pppp">
                1111
            </p>
            <p class="pppp">
                2222
            </p>
        </body>
    </html>
    <script type="text/javascript">

        //如果想要控制某个标签，必须要先找到它
        //我想点击页面中的div   
        //弹出对话框
        document.getElementById("div1").onclick=function(){
            alert("警告");
        }
        //事件源.事件的类型=执行的命令
        document.getElementsByClassName('pppp')[0].ondblclick=function(){
            alert("双击我弹出对话框");
        }
        //getElementsByClassName 通过class来寻找页面中的元素，而class可以设置多个重复的类名，获取的时候必须要在后面添加[数字],数字从0开始计数
        
    </script>

js的书写位置

1、内嵌（如上）

2、外链

html文件
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                div{color: red;}
            </style>
        </head>
        <body>
            <div id="div1">
                点击
            </div>
            <p class="pppp">
                1111
            </p>
            <p class="pppp">
                2222
            </p>
        </body>
    </html>
    <script type="text/javascript" src="js.js">
        //此处是外链的语法，则写什么都不执行
    </script>

js文件
    document.getElementById("div1").onclick=function(){
        alert("警告");
    }
    //事件源.事件的类型=执行的命令
    document.getElementsByClassName('pppp')[0].ondblclick=function(){
        alert("双击我弹出对话框");
    }

3、行内式

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div onclick="alert('警告')">点击</div>
            <!--事件类型=执行的动作-->
        </body>
    </html>

js常见特效

1、js实现动画效果：

测试的时候一定要多次触发动画，查看是否有动画累积的情况

2、js模态窗口

弹出两个层；一个负责盖住下面其他页面案的内容，另一个是让用户操作的层：只允许用户操作弹出的层

标签：function,document,对话框,基础,alert,事件,js
来源： https://www.cnblogs.com/justztz/p/12100466.html