js学习之Anchor对象和Document对象

lijie_insist

浏览: 95552 次
性别:

最近访客更多访客>>

hotfiremsn

源崇1

zean7s

yyy1394

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js学习

html JavaScript

Anchor对象

失去焦点和获取焦点有时候自己总喜欢忘记,而项目中前段的验证又经常需要,所以做下记载

<html>
<head>
<style type="text/css">
          a:active {color:green}
</style>

<script type="text/javascript">
function getfocus(){
  document.getElementById('myAnchor').focus()
}

function losefocus(){
  document.getElementById('myAnchor').blur()
}
</script>
</head>


<body>
<a id="myAnchor" href="http://www.iteye.com/">访问 Iteye</a>
<br /><br/>
<input type="button" onclick="getfocus()" value="获得焦点">
<input type="button" onclick="losefocus()" value="失去焦点">
</body>

</html>

添加快捷键的方法例子来源于w3school 其中body的onload属性表示当页面加载完后执行的方法

<html>
<head>
<script type="text/javascript">
function accesskey()
{
document.getElementById('w3').accessKey="l"
document.getElementById('w3dom').accessKey="k"
}
</script>
</head>

<body onload="accesskey()">

<p><a id="w3" href="http://www.w3school.com.cn/">W3School.com.cn</a> （请使用 Alt + l 给该链接赋予焦点）</p>
<p><a id="w3dom" href="http://www.w3school.com.cn/htmldom/">HTML DOM</a> （请使用 Alt + k 为该链接赋予焦点）</p>

</body>
</html>

document对象
向输出流写文本或者HTML例子来源于w3school

<html>
<body>

<script type="text/javascript">
document.write("Hello World!")
document.write("<h1>Hello World!</h1>")
</script>

</body>
</html>

ps:如果是在别的事件中调用write会把原页面的数据给覆盖掉只显示write输出的内容

获取文档标题和URL等一些document的属性例子来源于w3school

<html>
<head>
<title>My title</title>
</head>

<body>
该文档的标题是：
<script type="text/javascript">
document.write(document.title)

该文档的 URL 是：
<script type="text/javascript">
document.write(document.URL)
</script>

<p>referrer 属性返回加载本文档的文档的 URL。</p>

本文档的 referrer 是：
<script type="text/javascript">
document.write(document.referrer)

本文档的域名是：
<script type="text/javascript">
document.write(document.domain)

</body>

</html>

document常用的2个方法代码来源于w3school

<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}

function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">这是标题</h1>
<p>点击标题，会提示出它的值。</p>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="名为 'myInput' 的元素有多少个？" />

</body>
</html>

打开一个新文档,加入内容,关闭它代码来源于w3school

<html>
<head>
<script type="text/javascript">
function createNewDoc()
  {
  var newDoc=document.open("text/html","replace");
  var txt="<html><body>学习 DOM 非常有趣！</body></html>";
  newDoc.write(txt);
  newDoc.close();
  }
</script>
</head>

<body>
<input type="button" value="打开并写入一个新文档" onclick="createNewDoc()">
</body>

</html>

ps:如果没有newDoc.close()那么浏览器会一直处于在加载状态,我也不知道为什么,觉得应该是文档没有关闭,浏览器以为还有内容要加载进来,所以一直处于在加载状态

返回文档中的锚数代码来源于w3school

<html>
<body>

<a name="first">第一个锚</a><br />
<a name="second">第二个锚</a><br />
<a name="third">第三个锚</a><br />
<br />

文档中锚的数目：
<script type="text/javascript">
    document.write(document.anchors.length)
</script>


本文档中第一个锚的 InnerHTML 是：
<script type="text/javascript">
   document.write(document.anchors[0].innerHTML)
</script>

</body>
</html>

计算文档中表单的数量代码来源于w3school

<html>
<body>

<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>

<script type="text/javascript">
document.write("文档包含： " + document.forms.length + " 个表单。")
</script>

</body>
</html>

访问集合中的项目代码来源于w3school

<html>
<body>
<form id="Form1" name="Form1">
您的姓名：<input type="text">
</form>
<form id="Form2" name="Form2">
您的汽车：<input type="text">
</form>

<p>
要访问集合中的项目，你既可以使用项目编号，也可以使用项目名称：
</p>

<script type="text/javascript">
document.write("<p>第一个表单名称是：" + document.forms[0].name + "</p>")
document.write("<p>第一个表单名称是：" + document.getElementById("Form1").name + "</p>")
</script>

</body>
</html>

计算文档中图片数目代码来源于w3school

<html>
<body>
<img border="0" src="/i/eg_smile.gif" />
<br />
<img border="0" src="/i/eg_mouse.jpg" />
<br /><br />

<script type="text/javascript">
document.write("本文档包含：" + document.images.length + " 幅图像。")
</script>

</body>
</html>

分享到：

js学习之Event对象和Form对象以及Input对 ... | javascript/jquery判断是否为undefined或 ...

2014-12-03 09:37
浏览 446
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论