JavaScript学习笔记——慕课网（JavaScript入门篇）

最新推荐文章于 2024-09-22 11:17:00 发布

lusg02

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量497

点赞数 1

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

本文链接：https://blog.csdn.net/lusg02/article/details/51914058

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript入门篇-慕课网

一、常用互动方法

document.write 输出内容
alert

<script type="text/javascript">
   var mynum = 30;
   alert("hello!");
   alert(mynum);
</script>

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操作

1. 认识DOM

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

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

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

2. 通过ID获取元素

<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
  var mychar= document.getElementById("con")          ;
  document.write("结果:"+mychar.innerHTML); //输出获取的P标签为javascript
</script>
</body>

3. innerHTML属性

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

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

4. display属性

语法：Object.style.display = value；
其中value取值为none（隐藏）或block（此元素显示为块级元素）

<script type="text/javascript"> 
        function hidetext()  
        {  
        var mychar = document.getElementById("con");
        mychar.style.display="none";
        }  
        function showtext()  
        {  
        var mychar = document.getElementById("con");
        mychar.style.display="block";
        }
    </script> 
 <p id = "con">...</p>