慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

慕粉1133413520

这是我的代码仅供参考
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8">

<title>节点属性</title>

</head>

<body>

<p>请选择你爱好：</p>
<input type="checkbox" id="checkbox1">音乐
<input type="checkbox" id="checkbox2">登山
<input type="checkbox" id="checkbox3">游泳
<input type="checkbox" id="checkbox4">阅读
<input type="checkbox" id="checkbox5">打球<br><br><br>
<input type="button" value="全选" onClick="quanxuan()" >
<input type="button"value="不全选" onClick="quxiao()">
请输入数字：<input type="text" id="foo" >
<input type="button" value="确定" onClick="dianji()">
<script type="text/javascript">

var cc=document.getElementsByTagName("input");
function quanxuan()
{
for(var i=0;i<cc.length;i++)
{
if(cc[i].style.type="checkbox")
{
cc[i].checked="true";
}
}
}
function quxiao()
{
for(var i=0;i<cc.length;i++)
{
if(cc[i].style.type="checkbox")
{
cc[i].checked=false;
}
}
}
function dianji()
{
var bb=document.getElementById("foo").value;
var dd=document.getElementById("checkbox"+bb);
dd.checked="checked";

}
</script>

</body>

</html>

查看全部

0 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName
2019-08-16
阿泽爱学习

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="con">
<li id="lesson1">javascript
<ul>
<li id="tcon"> 基础语法</li>
<li>流程控制语句</li>
<li>函数</li>
<li>事件</li>
<li>DOM</li>
</ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS
<ul>
<li>文字</li>
<li>段落</li>
<li>表单</li>
<li>表格</li>
</ul>
</li></ul>
<script type="text/javascript">
var mylist = document.getElementById("tcon");
document.write(mylist.parentNode.parentNode.parentNode.lastChild.innerHTML);
</script>

</body>
</html>
/* .lastChild返回子节点的最后一个节点，而不是用lastNode
使用.innerHTML可以获取该节点的内容 */

查看全部

0 采集收起来源：访问父节点parentNode
2019-08-16
慕瓜0157974
1. appendChild(newnode); 括号中不需要加引号
2. a.href=url; 在调用实参时也不需要再加引号。
查看全部

0 采集收起来源：创建元素节点createElement
2019-08-15
慕沐457181

<h1>操作成功</h1>
<span id='qwe'>5</span>
<span>秒回到主页</span>
<a href='#' onclick='zxc()'>返回</a>

<script type="text/javascript">
function zxc(){
window.history.go(-1);
}
function load(){
var abc = document.getElementById("qwe").innerHTML;
abc = parseInt(abc);
if(abc == 0){
location.assign("http://www.baidu.com");
}else{
abc--;
document.getElementById("qwe").innerHTML = abc;
}
}
setInterval('load()', 1000);
//获取显示秒数的元素，通过定时器来更改秒数。

//通过window的location和history对象来控制网页的跳转。

</script>

查看全部

0 采集收起来源：编程练习
2019-08-15
Diyshow

选定元素相当于截取元素
slice()方法
使用为slice(start，end);start为选取的开始下标，end为选取结束的下标

注意：
1. 可使用负值从数组的尾部选取元素。
2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
3. String.slice() 与 Array.slice() 相似。

查看全部

0 采集收起来源：选定元素slice()
2019-08-15

Diyshow

reverse() 方法用于颠倒数组中元素的顺序。

<script type="text/javascript">
  var myarr = new Array(3)
  myarr[0] = "1"
  myarr[1] = "2"
  myarr[2] = "3"
  document.write(myarr + "<br />")
  document.write(myarr.reverse())
</script>

运行结果：

1,2,3
3,2,1

查看全部

0 采集收起来源：颠倒数组元素顺序reverse()

2019-08-15

阿泽爱学习

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h5></div>
<script type="text/javascript">
var x=document.getElementById("con");
var first=x.firstChild;
var last=x.lastChild;
document.write("元素div的第一个子节点是"+first.nodeName+"</br>");
document.write("元素div的最后一个子节点是"+last.nodeName+"</br>");

//参考其他同学后发现可以使用firstElementChild消除浏览器的影响
document.write(x.firstElementChild.nodeName+"&nbsp");
document.write(x.lastElementChild.nodeName+"<br>")

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

查看全部

0 采集收起来源：访问子节点的第一和最后项
2019-08-15
kurom_

返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
如提取hello world!中hello字符串
mystr.substring(0,5)

查看全部

0 采集收起来源：提取字符串substring()
2019-08-15
kurom_

var mystr="Hello World!"
document.write(mystr.indexOf('o',5));
第一个o出现的位置在4使用indexOf从第五个字符开始往后查询得出第二个o的位置输出结果为7

查看全部

0 采集收起来源：返回指定的字符串首次出现的位置
2019-08-15
kurom_

setTime(getTime()60*60*1000)

查看全部

0 采集收起来源：返回/设置时间方法
2019-08-15
qq_慕仙5166478
网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
一、值
offsetHeight = clientHeight + 滚动条 + 边框。
二、浏览器兼容性
```
var w= document.documentElement.offsetWidth     || document.body.offsetWidth; var h= document.documentElement.offsetHeight     || document.body.offsetHeight;
```
查看全部

0 采集收起来源：网页尺寸offsetHeight
2019-08-15
qq_慕仙5166478
网页尺寸scrollHeight
scrollHeight和scrollWidth，获取网页内容高度和宽度。
一、针对IE、Opera:
scrollHeight 是网页内容实际高度，可以小于 clientHeight。
二、针对NS、FF:
scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。
三、浏览器兼容性
```
var w=document.documentElement.scrollWidth    || document.body.scrollWidth; var h=document.documentElement.scrollHeight    || document.body.scrollHeight;
```
注意:区分大小写
scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。
查看全部

0 采集收起来源：网页尺寸scrollHeight
2019-08-15
qq_慕仙5166478
浏览器窗口可视区域大小
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
二、对于 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
或者
Document对象的body属性对应HTML文档的<body>标签
• document.body.clientHeight
• document.body.clientWidth
在不同浏览器都实用的 JavaScript 方案：
```
var w= document.documentElement.clientWidth       || document.body.clientWidth; var h= document.documentElement.clientHeight       || document.body.clientHeight;
```
查看全部

0 采集收起来源：浏览器窗口可视区域大小
2019-08-15

qq_慕仙5166478

创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法：

document.createElement(tagName)

参数:

tagName：字符串值，这个字符串用来指明创建元素的类型。

注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

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

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

效果：在HTML文档中，创建一个文本框，使用setAttribute设置属性值。当点击这个文本框时，会弹出对话框“This is a text!”。

查看全部

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

2019-08-15

一片片

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

查看全部

0 采集收起来源： Date 日期对象
2019-08-15

首页上一页 304 305 306 307 308 309 310 下一页尾页

0/150

提交

取消

开始学习

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

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

JavaScript进阶篇

网页尺寸offsetHeight

网页尺寸scrollHeight

浏览器窗口可视区域大小

创建元素节点createElement