JS初步认识

      • 思维导图 

         

 

  • + 链接符号 

    <script type="text/javascript">
        var username = "林丹";
        var sex = "男";
        var job = "运动员";
        var age = "30";
        var shengao = "174cm";
        document.write("<h2>"+username+"的个人信息"+"<hr></hr>"+"</h2>");
        document.write("<ol>");
        document.write("<li>性别："+sex+"</li>")
        document.write("<li>工作："+job+"</li>");
        document.write("<li>年龄："+age+"</li>");
        document.write("<li>身高："+shengao+"</li>");
        document.write("</ol>");
    </script>
</head>

          • 运行结果：　　　　

 

  • 初步认识JS语句

          • code：

            <style type="text/css">
        body{
            background-repeat:no-repeat;
            background-position:50% 0;
            margin:8px 0;
            color:red;    
        }
        li{
            list-style-image:url(../day5/li03.jpg);
            border-bottom:2px solid yellow;
            border-left:2px solid yellow;
            border-right:2px solid yellow;
            width:128px;
            list-style-position:inside;
            margin-left:-23px;
        }
        li:hover{
            background-color:#f0f0f0;
        }
        li:nth-child(1){
            border-top:2px solid yellow;
        }
    </style>
    <script type="text/javascript">
        document.write("&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspHello word");
        document.body.background = "2.jpg";
        document.body.bgColor="pink";
        window.alert("这是神马？");
        window.alert("对啊、就是神马");
        document.write("<hr><h3>&nbsp&nbsp王宝强的个人信息</h3></hr>");
        document.write("<ul>");
        document.write("<li>姓名：王宝强</li>");
        document.write("<li>性别：男</li>");
        document.write("<li>身高：174cm</li>");
        document.write("<li>职业：演员</li>");
        document.write("<li>年龄：18</li>")
        document.write("<li>经纪人：宋喆</li>");
        document.write("</ul>");
    </script>
</head>
<body>
    <a href="http://www.jd.com"><img src="jd1.png" id="changeImg"></a>
    <script type="text/javascript">
        var imgObj = document.getElementById("changeImg");
            imgObj.onmouseover=function(){
                imgObj.src="jd2.png"
            }
            imgObj.onmouseout=function(){
                imgObj.src="jd1.png"
            }
    </script>

            运行结果：

posted @ 2016-11-21 19:29  爱茹寒冰  阅读(247)  评论(1)    收藏  举报