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组合才能实现,肯定比原生的写法浪费时间,但是为了整体的页面美观,必须要求程序员按照设计师的要求来实现。

  • 相关阅读:
    java的instanceof简单使用
    PHP中return,exit,die的区别
    C#调用Dll文件中方法的简单应用
    C#的托管和非托管的简单理解
    对象造型(引用类型转换)
    面向对象3大特性的简单理解
    css3自定义滚动条背景透明
    console.time方法与console.timeEnd方法
    IE8 input X 去掉文本框的叉叉和密码输入框的眼睛图标
    JavaSript模块规范
  • 原文地址:https://www.cnblogs.com/justztz/p/12100466.html
Copyright © 2011-2022 走看看