手记

JavaScript学习笔记(一)——入门篇

发现自己学了后边的忘掉前边的,写学习笔记方便回顾学过得知识

JavaScript入门篇—慕课网


一、常用互动方法
  • document.write 输出内容
  • alert
    var mynum = 30;
    alert("hello!"); alert(mynum);

  • confirm
    语法:confirm(str)
  • promot
    弹出消息对话框,通常包括一个确定按钮、取消按钮与一个文本输入框
  • window.open
    语法:window.open([URL], [窗口名称], [参数字符串]) 
    URL是可选参数;
    窗口名称:

    1.该名称由字母、数字和下划线字符组成;
     2.”_top”、”_blank”、”_selft”具有特殊意义的名称;
     3.相同 name 的窗口只能创建一个;
     4.name 不能包含有空格

参数字符串:可选参数,设置窗口参数,各参数用逗号间隔

  • window.close
    window.close();<窗口对象>.close()
二、DOM操作

认识DOM

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

HTML文档可以说由节点构成的集合,三种常见的DOM节点:

  1. 元素节点:<html>,<body>,<p>等都是元素节点,即标签。
  2. 文本节点:向用户展示的内容,如<li>...</li>中的 JavaScript、DOM、CSS等文本。
  3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"

通过ID获取元素

  <p id="con">JavaScript</p>
  <script type="text/javascript"> 
     var mychar= document.getElementById("con") ; 
     document.write("结果:"+mychar.innerHTML)  ;
  </script>       

innerHTML属性

innerHTML属性用于获取或替换HTML元素的内容

 <script type = "text/javascript">
    var mychar = document.getElementById("con");
    document.write("原标题:"+mychar.innerHTML+"<br  />"); //输出原h2标签内容
    mychar.innerHTML = "Hello World!"
    document.write("修改后的标题:"+mychar.innerHTML);
 </script>

display属性

语法:Object.style.display = value;
其中value取值为none(隐藏)或block(显示为块级元素)
例如mychar.style.display = "none";

className属性

语法:object.className = classname;
作用:
1.获取元素的class属性
2.为网页内某个元素制定一个CSS样式来更改其外观


根据慕课网JavaScript入门篇整理

7人推荐
随时随地看视频
慕课网APP