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样式来更改外观。

原文地址:https://www.cnblogs.com/canfengyiyue/p/5087122.html