慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

weixin_慕瓜2396949
区别getElementByID,getElementsByName,getElementsByTagName
以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。
把上面的例子转换到HTML中，如下:
```
<input type="checkbox" name="hobby" id="hobby1">  音乐
```
input标签就像人的类别。
name属性就像人的姓名。
id属性就像人的身份证。
方法总结如下:
注意：方法区分大小写
通过下面的例子(6个name="hobby"的复选项，两个按钮)来区分三种方法的不同:
```
  <input type="checkbox" name="hobby" id="hobby1">  音乐   <input type="checkbox" name="hobby" id="hobby2">  登山   <input type="checkbox" name="hobby" id="hobby3">  游泳   <input type="checkbox" name="hobby" id="hobby4">  阅读   <input type="checkbox" name="hobby" id="hobby5">  打球   <input type="checkbox" name="hobby" id="hobby6">  跑步    <input type="button" value = "全选" id="button1">   <input type="button" value = "全不选" id="button1">
```
1. document.getElementsByTagName("input")，结果为获取所有标签为input的元素，共8个。
2. document.getElementsByName("hobby")，结果为获取属性name="hobby"的元素，共6个。
3. document.getElementById("hobby6")，结果为获取属性id="hobby6"的元素，只有一个，"跑步"这个复选项
查看全部

0 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName
2019-07-18
weixin_慕瓜2396949

认识DOM
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
先来看看下面代码:
将HTML代码分解为DOM节点层次图:
HTML文档可以说由节点构成的集合，DOM节点有:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
节点属性:
遍历节点树:
以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。
DOM操作:
注意:前两个是document方法。

查看全部

0 采集收起来源：认识DOM
2019-07-18
膨胀的西红柿

事件
什么是事件：比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

查看全部

0 采集收起来源：什么是事件
2019-07-18
膨胀的西红柿

onclick="函数名()"

查看全部

0 采集收起来源：函数调用
2019-07-18
慕粉4518956

Date对象中处理时间和日期的常用方法：

查看全部

0 采集收起来源： Date 日期对象
2019-07-18
慕粉4518956

主要事件表:

查看全部

0 采集收起来源：什么是事件
2019-07-18
小风XFS

onclick //鼠标单击事件
onmouseover //鼠标经过事件
onmouseout //鼠标移开事件
onchange //文本框内容改变事件
onselect //文本框内容被选中事件
onfocus //光标聚集
onblur //光标离开
onload //网页导入
onunload //关闭网页

查看全部

1 采集收起来源：什么是事件
2019-07-18
qq_慕仙5166478
```
常用的事件
```
查看全部

0 采集收起来源：什么是事件
2019-07-18
疯子是世界的

显示浏览器和浏览器相关信息。

查看全部

0 采集收起来源：userAgent
2019-07-18
疯子是世界的

查看浏览器相关信息。

查看全部

0 采集收起来源：Navigator对象
2019-07-18

qq_慕仙5166478

第一种情况:在<script>标签内调用。  
<script type="text/javascript">
    function add2()
    {
         sum = 1 + 1;
         alert(sum);
    }  
    add2();//调用函数，直接写函数名。
    </SCRIPT>
第二种情况:
在HTML文件中调用，如通过点击按钮后调用定义好的函数。
<html>
<head>
<script type="text/javascript">   
function add2()   
{         
sum = 5 + 6;         
alert(sum);   }
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()">  
//按钮,onclick点击事件，直接写函数名
</form>
</body>
</html>注意:鼠标事件会在后面讲解

查看全部

0 采集收起来源：函数调用

2019-07-18

疯子是世界的

点击Start按钮后，开始计数.
点击Stop按钮后，停止计数。

查看全部

0 采集收起来源：取消计时器clearTimeout()
2019-07-18
疯子是世界的

使用setInterval()计时器来显示动态时间。

查看全部

0 采集收起来源：计时器setInterval()
2019-07-18
qq_慕仙5166478
```
var myarr=new Array(); //定义数组
```
查看全部

0 采集收起来源：一起组团（什么是数组）
2019-07-18
阿泽爱学习2

<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){

//获取第一个输入框的值
var firsttext = document.getElementById("txt1").value;

//获取第二个输入框的值
var secondtext = document.getElementById("txt2").value;

//获取选择框的值
var selecttext = document.getElementById("select").value;
//获取通过下拉框来选择的值来改变加减乘除的运算法则
var result;
switch(selecttext)
{
case "+":
result = parseInt(firsttext) + parseInt(secondtext);
break;
case "-":
result = parseInt(firsttext) - parseInt(secondtext);
break;
case "*":
result = parseInt(firsttext) * parseInt(secondtext);
break;
case "/":
result = parseInt(firsttext) / parseInt(secondtext);
break;

}
//设置结果输入框的值
document.getElementById("fruit").value=result;
}
</script>
</head>
<body>
<input type='text' id='txt1' />
<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' onclick="count()"/> 
<input type='text' id='fruit' />
</body>
</html>

查看全部

0 采集收起来源：编程练习
2019-07-18

首页上一页 324 325 326 327 328 329 330 下一页尾页

0/150

提交

取消

开始学习

课程须知: 你需要具备HTML、css基础知识，建议同学们也可以想学习下js入门篇，快速认识js，熟悉js基本语法，更加快速入手进阶篇！

老师告诉你能学到什么？: 通过JavaScript学习，掌握基本语法，制作简单交互式页面

JavaScript进阶篇

区别getElementByID,getElementsByName,getElementsByTagName

认识DOM