重回JS —JS基本

最新推荐文章于 2024-04-24 09:22:16 发布

M_SIDAER

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量301

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/m_sidaer/article/details/53427227

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先说两句
1、html写框架、css写样式、javascript写动态效果
2、javascript严格区分大小写

一、javascript事件
onclick鼠标点击事件（包含了onmousedown和onmouseup两个动作）
onmouseover鼠标移入事件
onmouseout鼠标移出事件
onmousedown 在鼠标按下时触发
onmouseup 鼠标松开事件onmousemove鼠标拖动事件

二、javascript函数
1、什么是函数
将能完成特定功能的代码块放入一个函数里，需要时直接调用
2、函数的书写形式
function myname( ){
代码块；
}
function:定义函数的关键字
myname 自己起的函数名

三、javascript获取元素
1、通过ID名称来获取元素，“.”代表“的”
比如 document.getElementById(“div1”);
2、元素.onmouseover
document.getElementById(“div1”).onmouseover;

四、javascript添加事件
函数执行方法
1、调用函数名abc()
2、事件调用：元素.οnmοuseοver=abc 切记不能加括号
ps:单独调用函数时要加（）；事件调用函数时不加（）

五、javascript的变量
var 变量名=
1、作用：减少代码量
2、变量以字母开头，严格区分大小写
var oUl=document.getElementById(“ul1”);
3、匈牙利命名法 oUl

六、javascript的测试方法
alert( ) 警告窗
右键查看元素或者按F12

七、javascript放置的位置
放在头部会失效，最好放在中html代码写完后
一定要放在前面需要加浏览器事件 window.onload–加载完后执行

八、javascript匿名函数
一个函数可以没有名字
可以直接用事件调用匿名函数
元素.事件=匿名函数
oBtn.οnclick=function( ){
oUl.style.display=”none”;
}

举例说明
1、元素隐藏

<html>
  <head>
    <style  type="text/css">
        .box{width:100px;height:100px;background:red;}
    </style>
  </head>
  <body>
     <div class="box" id="div1"></div>
     <script>
         function hide(){
      document.getElementById("div1").style.display="none";
    }
    document.getElementById("div1").onmouseover=hide;
    </script>
 </body>
</html>

2、下拉框
html的框架很重要，框架写对了，js才能初步实现
下拉框的框架（html）就是一个大的div下面套着一个小的div和一个ul
css部分就是初始让大的div和小的div的宽度一致，让ul隐藏
js部分就是点击大的div时，让ul显示

<html>
    <head>
        <style type="text/css">
            ul,li{margin:0;padding:0;}
            li{list-style;none;}
            .box{width:100px;height:25px;background-color:red;text-align:center;position:relative;cursor:pointer;}
            #div2{width:100px;}
            #ul1{width:50px;background-color:yellow;position:absolute;top:34px;left:20px;display:none;}
            #ul1 li{height:25px;border:1px #000 dashed;text-align:center;}
        </style>
    </head>
    <body>
        <div id="div2">
            <div class="box">下拉框</div>
            <ul id="ul1">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>
        </div>
        <script>
            var oUl=document.getElementById("ul1");
            var oDiv=document.getElementById("div2");
            function show(){
                oUl.style.display='block';
            }
            function hide(){
                oUl.style.display='none';
            }
            var onoff=1;
            oDiv.onclick=function(){
            if(onoff==1){
                //oUl.style.display='block';
                show();
                onoff=0;
            }
            else{
                //oUl.style.display='none';
                hide();
                onoff=1;
            }
        }   
        </script>
    </body>
</html>

3、定义变量

<script>
    var x=123;
    var y='abc';
    document.write(x);
    document.write(y);
    document.write(x,y);
</script>

这里写图片描述

M_SIDAER

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
重回JS —JS基本

先说两句 1、html写框架、css写样式、javascript写动态效果 2、javascript严格区分大小写一、javascript事件 onclick鼠标点击事件（包含了onmousedown和onmouseup两个动作） onmouseover鼠标移入事件 onmouseout鼠标移出事件 onmousedown 在鼠标按下时触发 onmouseup 鼠标松开事件onm
复制链接

扫一扫