zoukankan      html  css  js  c++  java
  • 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模态窗口

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

    3、自定义单选、多选、下拉菜单

    --只要不是系统原生的,就算是自定义;这些程序,需要使用js+html+css组合才能实现,肯定比原生的写法浪费时间,但是为了整体的页面美观,必须要求程序员按照设计师的要求来实现。

  • 相关阅读:
    python+requests+re匹配抓取猫眼上映电影信息
    Qt 5.12 LTS 部署
    Apache 日志记录相关设置
    php curl 相关知识
    Apache缓存相关配置
    Apache开启GZIP 压缩网页
    Apache 相关 mod_rewrite ,RewriteCond,{HTTP_HOST}
    Andriod you must restart adb and eclipse
    JDK 环境变量的配置
    http 协议详解
  • 原文地址:https://www.cnblogs.com/justztz/p/12100466.html
Copyright © 2011-2022 走看看