慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

拾梦者sdj
区别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-02-24
拾梦者sdj
getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
```
document.getElementsByTagName(Tagname)
```
说明:
1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
看看下面代码，通过getElementsByTagName()获取节点。
查看全部

0 采集收起来源：getElementsByTagName()方法
2019-02-24

qq_慕数据8341535

创建一个按钮，代码如下：

<script type="text/javascript">   var body = document.body;    var input = document.createElement("input");  
   input.type = "button";  
   input.value = "创建一个按钮";  
   body.appendChild(input);  
 </script>

在HTML文档中，创建一个按钮。

我们也可以使用setAttribute来设置属性，代码如下：

<script type="text/javascript">  
   var body= document.body;             
   var btn = document.createElement("input");  
   btn.setAttribute("type", "text");  
   btn.setAttribute("name", "q");  
   btn.setAttribute("value", "使用setAttribute");  
   btn.setAttribute("onclick", "javascript:alert('This is a text!');");       
   body.appendChild(btn);  
</script>

查看全部

0 采集收起来源：创建元素节点createElement

2019-02-24

拾梦者sdj
getElementsByName()方法
返回带有指定名称的节点对象的集合。
语法：
```
document.getElementsByName(name)
```
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
注意:
1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
看看下面的代码:
运行结果:
查看全部

0 采集收起来源：getElementsByName()方法
2019-02-24
拾梦者sdj

认识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-02-24
是屎想者啊
```
<script language="javascript"> 
    var myarray=new Array(3); 
    myarray[0]=88; 
    myarray[1]=90; 
    myarray[2]=68;
    myarray[3]=99; 
    
    document.write("数组第一个值是:"+myarray[0]+"<br>"); 
    document.write("数组第二个值是:"+myarray[1]+"<br>"); 
    document.write("数组第三个值是:"+myarray[2]+"<br>");
    document.write("数组第四个值是:"+myarray[3]);
</script>
```
问：如果我数组里面的长度只给3个？实际有4个数组，但还是能显示出来，这个怎么理解？
答：自动扩容，3只是一个初始值，你实际有四个元素他会显示四个元素的，如果定义了一个数组长度为4，但是只赋值了三个元素的值，那么他的数组的.length属性返回的是4不是3。
js数组的长度是动态增长，设置长度和没有设置的区别在于：
如果没有指定数组的长度，代码在每次执行赋值的时候会先给数组增加长度，分配空间，降低运行速度。
如果设置了数组长度，那么代码在执行的时候会在初始时就给数组分配一个空间，以后的每次给数组赋值就会更加快捷。
查看全部

0 采集收起来源：团里添加新成员（向数组增加一个新元素）
2019-02-24

是屎想者啊

第一种：

<script language="javascript"> 
var myarr=new Array(3); 
    myarr[0]=100; 
    myarr[1]=40; 
    myarr[2]=50;  
    
    document.write("数组第一个值是:"+myarr[0]+"<br>");  
    document.write("数组第二个值是:"+myarr[1]+"<br>");  
    document.write("数组第三个值是:"+myarr[2]+"<br>");
</script>

第二种：

<script language="javascript"> 
    var myarr=new Array(100，40，50); 
    
    document.write("数组第一个值是:"+myarr[0]+"<br>");  
    document.write("数组第二个值是:"+myarr[1]+"<br>");  
    document.write("数组第三个值是:"+myarr[2]+"<br>");
    </script>

第三种：

<script language="javascript"> 
    var myarr=[100,40,50]; 
    
    document.write("数组第一个值是:"+myarr[0]+"<br>");  
    document.write("数组第二个值是:"+myarr[1]+"<br>");  
    document.write("数组第三个值是:"+myarr[2]+"<br>");
    </script>

查看全部

0 采集收起来源：谁是团里成员（数组赋值）

2019-02-24

慕九州2446184

"!"是逻辑非操作符，也就是"不是"的意思,非真即假，非假即真

查看全部

0 采集收起来源：是非颠倒(逻辑非操作符）
2019-02-24
慕九州2446184

"||"逻辑或操作符，相当于生活中的“或者”，当两个条件中有任一个条件满足，“逻辑或”的运算结果就为“真”。

查看全部

0 采集收起来源：我或你都可以 (逻辑或操作符）
2019-02-24
小明哲

<script type="text/javascript">
var Lists=document.getElementsByTagName("li");
for (var i=0; i<Lists.length;i++)
{ var text = Lists[i].getAttribute("title");

//document.write(text +"<br>");
if(text=="")
{
Lists[i].setAttribute("title", "WEB前端技术");}{
document.write(Lists[i].getAttribute("title")+"<br>");
}

}
</script>

查看全部

0 采集收起来源：setAttribute()方法
2019-02-24
qq_慕标5065531

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数组</title>
<script type="text/javascript">
//创建数组
var arr=['*','##',"***","&&","****","##*"];
arr[7]="**";
//显示数组长度
document.write("数组的长度为"+arr.length+"</br>");

//将数组内容输出，完成达到的效果。
arr[6]=arr[7];
for(var i=0;i<8;i++){
if(i%2==0){
for(var c=0;c<8;c++){
if(c%2==0){
if(arr[c].length>arr[i].length){
var a;
a=arr[i];
arr[i]=arr[c];
arr[c]=a;
}
}
}

}
}
for(var b=0;b<8;b++){
if(b%2==0){
document.write(arr[b]+"</br>");
}
}
</script>
</head>
<body>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2019-02-24
pyh_1301

数组方法：

查看全部

0 采集收起来源： Array 数组对象
2019-02-24
拾梦者sdj

任务
第一步：先编写好网页布局，如下:

第二步：获取显示秒数的元素，通过定时器来更改秒数。
第三步：通过window的location和history对象来控制网页的跳转。
<!DOCTYPE html>
<html>
<head>
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<body>

<h4>操作成功</h4><br>
<span id="second">5</span>
<span>秒后返回主页</span>
<a href="javascript:back();">返回</a>
<script type="text/javascript">
var num=document.getElementById("second").innerHTML;
//获取显示秒数的元素，通过定时器来更改秒数。
function count()
{
num--;
document.getElementById("second").innerHTML=num;
if(num==0)
{
location.assign("www.imooc.com");
}
}
setInterval("count()",1000);
//通过window的location和history对象来控制网页的跳转。
function back()
{
window.history.back();
}

</script>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2019-02-24
拾梦者sdj
屏幕可用高和宽度
1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。
注意:
不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。

我们来获取屏幕的可用高和宽度，代码如下：
```
<script type="text/javascript"> document.write("可用宽度：" + screen.availWidth); document.write("可用高度：" + screen.availHeight); </script>
```
注意:根据屏幕的不同显示值不同。
查看全部

0 采集收起来源：屏幕可用高和宽度
2019-02-24
拾梦者sdj
屏幕分辨率的高和宽
window.screen 对象包含有关用户屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
注意:
1.单位以像素计。
2. window.screen 对象在编写时可以不使用 window 这个前缀。
我们来获取屏幕的高和宽，代码如下:
```
<script type="text/javascript">   document.write( "屏幕宽度："+screen.width+"px<br />" );   document.write( "屏幕高度："+screen.height+"px<br />" ); </script>
```
查看全部

0 采集收起来源：屏幕分辨率的高和宽
2019-02-24