zoukankan      html  css  js  c++  java
  • js入门基础

    .

      引入JS文件:

      <script src="script.js"></script>

       函数使用:

          <input type="button"  value= "点击我" onclick="context()"/>

    . js互动:

        1.输出内容:

    • 直接输出:document.write("I like js");
    • 通过变量输出:

                        var mystr = "hello world!";

                        document.write(mystr);

    • 多项内容,用”+“连接:

                        document.write(mystr+"I like js"+"<br/>");

        2.alert消息对话框: alert(字符串或变量)

        3.confirm对话框:包含一个确定(true)和取消(false)按钮

                         bloolean confirm(str){}

                     <script type="text/Javascript>

                       var mymessage = confirm("你喜欢js吗?");

                       if(mymessage){

            document.write("好的,加油!");

                       }

                       else {

            document.write("js很强大,要学奥!");

                       }

                     </script>


       4.prompt(提问,交互消息对话框):

          prompt(str1, str2);

           str1:显示在消息对话框的文本,用户不能修改

           str2:文本框中的内容,可修改,可为空

           返回值:确定,返回消息文本框中的内容

                     取消,返回null

      5.打开新窗口:window.open(url), 

         关闭指定窗口: 窗口对象.close();

         var mywin = window.open("www.yoocky.com");

         mywin.close();

    .文档对象模型(DOM)

    1. DOM将HTML分成 元素节点,属性节点,文本节点

              <a                  href="yoocky.com">  优奇网  </a>

              元素节点(标签)   属性节点                   文本节点

         2. 通过id获取元素对象:

                  document.getElementById("myid");

         3.innerHTML属性:获取或替换元素中的内容

                  <p id = "con">hello world!</p>

                  <script>

                     var mycon = document.getElementById("con");

            document.write("p标签原始内容为:"+mycon.innerHTML+"<br/>");

                         mycon.innerHTML = "new txt!";

                         document.write("p标签修改后的内容为:"+mycon.innerHTML+"<br/>");

                  </script>

      4.改变html样式:

        object.style.property = new style;

               mycon.style.color = red;


          5. 设置 显示/隐藏 display属性

             mycon.style.display = none;

                                             block;

                                             inline;

      6.className属性

            object.className = classname;

               作用:获取元素class属性

                       为网页某个元素指定一个css样式来更改外观。

  • 相关阅读:
    MyEclipse快捷键大全
    mac下配置android环境变量
    JAVA NIO 简单介绍
    android读取大图片并缓存
    Android  <meta-data>
    iPhone 6/6 Plus国行版开卖当日抢购攻略
    A380上11万一张的机票什么享受?来看看
    连载15年!《火影忍者》终于迎来大结局
    Windows 技术预览版
    纪录片《天安门》
  • 原文地址:https://www.cnblogs.com/canfengyiyue/p/5087122.html
Copyright © 2011-2022 走看看