为了账号安全，请及时绑定邮箱和手机立即绑定
课程 \ JavaScript进阶篇

JavaScript进阶篇

代码 102 问答 1
按时间 按章节
8-8 返回前一个浏览的页面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
function GoBack() {
window.history.back();
}

</script>
</head>


<body>
点击下面的锚点链接，添加历史列表项:

<br />
<a href="#target1">第一个锚点</a>
<a name="target1"></a>
<br />
<a href="#target2">第二个锚点</a>
<a name="target2"></a>
<br /><br />
使用下面按钮，实现返回前一个页面:
<form>
<input type="button" value="返回前一个页面" onclick="GoBack();" />
</form>
</body>
</html>
2018-07-11 查看完整代码
8-9 返回下一个浏览的页面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
function GoForward() {
window.history.forward();
}
</script>
</head>


<body>
点击下面的锚点链接，添加历史列表项:
<br />
<a href="#target1">第一个锚点</a>
<a name="target1"></a>
<br />
<a href="#target2">第二个锚点</a>
<a name="target2"></a>
<br /><br />
使用下面按钮，实现返回下一个页面:
<form>
<input type="button" value="返回下一个页面" onclick="GoForward()" />
</form>
</body>
</html>
2018-07-11 查看完整代码
8-10 返回浏览历史中的其他页面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
function GoBack() {
window.history.go(-1);
}

function GoForward() {
window.history.go(1);
}
</script>

<body>
点击下面的锚点链接，添加历史列表项:
<br />
<a href="#target1">第一个锚点</a>
<a name="target1"></a>
<br />
<a href="#target2">第二个锚点</a>
<a name="target2"></a>
<br /><br />
使用下面按钮，实现返回前或下一个页面:
<form>
<input type="button" value="返回前一个页面" onclick="GoBack();" />
<input type="button" value="返回下一个页面" onclick="GoForward();" />
</form>
</body>
</html>
2018-07-11 查看完整代码
8-11 Location对象
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>location</title>
</head>
<script type="text/javascript">
document.write(location.href+"<br>");
document.write(location.hash+"<br>");
document.write(location.host+"<br>");
document.write(location.hostname+"<br>");
document.write(location.port+"<br>");
document.write(location.pathname);

</script>

<body>
</body>
</html>
2018-07-11 查看完整代码
8-12 Navigator对象
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
var llq = navigator.appName;
var llqn = navigator.appVersion;
var aa = navigator.platform;
document.write(llq+"<br>"+llqn+"<br>"+aa);

</script>
<body>
</body>
</html>
2018-07-11 查看完整代码
8-13 userAgent
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>navigator</title>
<script type="text/javascript">
function validB(){
var u_agent =navigator.userAgent;
var B_name="不是想用的主流浏览器!";
if(u_agent.indexOf("Firefox")>-1){
B_name="Firefox";
}else if(u_agent.indexOf("Chrome")>-1){
B_name="Chrome";
}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
B_name="IE(8-10)";
}
document.write("浏览器:"+B_name+"<br>");
document.write("u_agent:"+u_agent+"<br>");
}
</script>
</head>
<body>
<form>
<input type="button" value="查看浏览器" onclick="validB()" >
</form>
</body>
</html>
2018-07-11 查看完整代码
8-14 screen对象
<!DOCTYPE html>
<html>
<body>

<h3>Your Screen:</h3>

<script>
document.write("窗口可以使用的屏幕宽高: ");
document.write(window.screen.availWidth + "*" + screen.availHeight);
document.write("<br>");
document.write("屏幕的宽高: ");
document.write(screen.availWidth + "*" + window.screen.height);
document.write("<br>");
document.write("用户浏览器表示的颜色位数: ");
document.write(window.screen.colorDepth);
document.write("<br>");
document.write("用户浏览器表示的颜色位数（ps：IE不支持？亲测好像支持唉）: ");
document.write(screen.pixelDepth);
</script>
<body>
</body>
</html>
2018-07-11 查看完整代码
8-15 屏幕分辨率的高和宽
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏幕分辨率的高和宽</title>
</head>
<body>
<script type="text/javascript">
document.write( "屏幕宽度："+screen.width);
document.write( "屏幕高度："+screen.height);
</script>
</body>
</html>
2018-07-11 查看完整代码
8-16 屏幕可用高和宽度
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏幕分辨率的高和宽</title>
</head>
<body>
<script type="text/javascript">
document.write("可用宽度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>
</body>
</html>
2018-07-11 查看完整代码
8-17 编程练习
<!DOCTYPE html>
<html>
<head>
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<body>
<!--先编写好网页布局-->



<script type="text/javascript">

//获取显示秒数的元素，通过定时器来更改秒数。

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

</script>
</body>
</html>
2018-07-11 查看完整代码
9-1 认识DOM
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<script type="text/javascript">
var h = document.getElementById("con");
h.style.color="red";
h.style.backgroundColor="#CCC";
h.style.display="none";


</script>
</body>
</html>
2018-07-11 查看完整代码
9-2 getElementsByName()方法
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function getnum(){
var mynode= document.getElementsByName("myt");
alert(mynode.length);
}
</script>
</head>
<body>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">

<br />
<input type="button" onclick="getnum()" value="看看有几项？" />
</body>
</html>
2018-07-11 查看完整代码
9-3 getElementsByTagName()方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript</title>
</head>
<body>

<form name="Input">
<table align="center" width="500px" height="50%" border="1">
<tr>
<td align="center" width="100px">
学号:
</td>
<td align="center" width="300px">
<input type="text" id=userid name="user" onblur="validate();">
<div id=usermsg></div>
</td>
</tr>
<tr>
<td align="center" width="100px">
姓名:
</td>
<td align="center">
<input type="text" name="name">
</td>
</tr>
<tr>
<td align="center" width="%45">
性别:
</td>
<td align="center">
<input type="radio" name="sex" value="男">
男
<input type="radio" name="sex" value="女">
女
</td>
</tr>
<tr>
<td align="center" width="30%">
年龄:
</td>
<td align="center" width="300px">
<input type="text" name="age">
</td>
</tr>
<tr>
<td align="center" width="100px">
地址:
</td>
<td align="center" width="300px">
<input type="text" name="addr">
</td>
</tr>

</table>
</form>
<h1 id="myHead" onclick="getValue()">
看看三种获取节点的方法?
</h1>
<p>
点击标题弹出它的值。
</p>
<input type="button" onclick="getElements()"
value="看看name为sex的节点有几个?" />
<Br>
<input type="button" onclick="getTagElements()"
value="看看标签名为input的节点有几个?" />

<script type="text/javascript">
function getValue()
{
var myH = document.getElementById("myHead");
document.write(myH);
}
function getElements()
{
var myS = document.getElementsByName("sex");
alert(myS.length);
}

function getTagElements()
{
var myI = document.getElementsByTagName("input");
alert(myI.length);
}

</script>

</body>
</html>
2018-07-12 查看完整代码
9-4 区别getElementByID,getElementsByName,getElementsByTagName
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<form>
请选择你爱好:<br>
<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"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
//alert(hobby.length);
for(i=0;i<hobby.length;i++){
if(hobby[i].type=="checkbox"){
hobby[i].checked=true;
}
}

}
function clearall(){
var hobby = document.getElementsByName("hobby");

for(i=0;i<hobby.length;i++){
hobby[i].checked=false;
}

}

function checkone(){
var j=document.getElementById("wb").value;
var hobby = document.getElementById("hobby"+j);
hobby.checked=true;


}

</script>
</body>
</html>
2018-07-24 查看完整代码
9-5 getAttribute()方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute()</title>
</head>
<body>
<p id="intro">课程列表</p>
<ul>
<li title="第1个li">HTML</li>
<li>CSS</li>
<li title="第3个li">JavaScript</li>
<li title="第4个li">Jquery</li>
<li>Html5</li>
</ul>
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
var con=document.getElementsByTagName("li");
for (var i=0; i< con.length;i++){
var text = con[i].getAttribute("title");
if(text!=null)
{
document.write(text+"<br>");
}
}
</script>
</body>
</html>
2018-07-12 查看完整代码
9-6 setAttribute()方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="intro">我的课程</p>
<ul>
<li title="JS">JavaScript</li>
<li title="JQ">JQuery</li>
<li title="">HTML/CSS</li>
<li title="JAVA">JAVA</li>
<li title="">PHP</li>
</ul>
<h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<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>
</body>
</html>
2018-07-12 查看完整代码
9-7 节点属性
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点属性</title>
</head>
<body>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var ll = document.getElementsByTagName("li");
for(i=0;i<ll.length;i++){
document.write("节点名称："+ll[i].nodeName+"<br>");
document.write("节点的值："+ll[i].nodeValue+"<br>");
document.write("节点的类型："+ll[i].nodeType+"<br>");
}
</script>
</body>
</html>
2018-07-12 查看完整代码
9-8 访问子节点childNodes
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body><div>javascript<p>javascript</p><div>jQuery</div><h5>PHP</h5></div>
<script type="text/javascript">
var a = document.getElementsByTagName("div")[0].childNodes;
alert(a.length);

for(i=0;i<a.length;i++){

document.write("第"+(i+1)+"节点名字是:"+a[i].nodeName+"<br>");
document.write("第"+(i+1)+"节点值是:"+a[i].nodeValue+"<br>");
document.write("第"+(i+1)+"节点属性是:"+a[i].nodeType+"<br>");
}

</script>
</body>
</html>
2018-07-12 查看完整代码
9-9 访问子节点的第一和最后项
<!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");
document.write(x.firstChild.nodeName+" "+x.firstChild.nodeValue+" "+x.firstChild.nodeType+"<br/>");
document.write(x.lastChild.nodeName+" "+x.firstChild.nodeValue+" "+x.firstChild.nodeType);
</script>
</body>
</html>
2018-07-12 查看完整代码
9-10 访问父节点parentNode
<!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");
var hCon=mylist.parentNode.parentNode.parentNode.lastChild;
document.write(hCon.innerHTML);
</script>

</body>
</html>
2018-07-12 查看完整代码
首页上一页123456下一页尾页
意见反馈 帮助中心 APP下载
官方微信