w3school容易忽略的东西

时间  2020-01-04
标签 w3school school 容易 忽略 东西 繁體版
原文   原文链接

JS

JS DOM

onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。javascript

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的全部部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。html

找到您但愿删除的子元素，而后使用其 parentNode 属性来找到父元素：java

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

JS 对象

JavaScript for...in 语句循环遍历对象的属性。
for...in 循环中的代码块将针对每一个属性执行一次。node

for (对象中的变量)
  {
  要执行的代码
  }

极大或极小的数字可经过科学（指数）计数法来写：web

var y=123e5;    // 12300000
var z=123e-5;   // 0.00123

若是逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。不然，其值为 true（即便当自变量为字符串 "false" 时）！数组

使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数：浏览器

document.write(Math.floor(Math.random()*11))

RegExp 对象的方法

test() 方法检索字符串中的指定值。返回值是 true 或 false。cookie

exec() 方法检索字符串中的指定值。返回值是被找到的值。若是没有发现匹配，则返回 null。app

//找到第一个 "e"，并存储其位置,
//若是再次运行 exec()，则从存储的位置开始检索，并找到下一个 "e"，并存储其位置
var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)

compile() 既能够改变检索模式，也能够添加或删除第二个参数。框架

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free")); //true
patt1.compile("d");
document.write(patt1.test("The best things in life are free")); //false

JS Window

Window 尺寸

有三种方法可以肯定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

  • 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

    window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

  • 对于 Internet Explorer 八、七、六、5：

    document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth

  • 实用的 JavaScript 方案（涵盖全部浏览器）：

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

Window Screen

(返回访问者屏幕的宽度，以像素计，减去界面特性，好比窗口任务栏)

screen.availWidth - 可用的屏幕宽度

screen.availHeight - 可用的屏幕高度

Window Location

location.href 属性返回当前页面的 URL。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.assign("http://www.w3school.com.cn") 方法加载新的文档。

window.history

history.back() - 与在浏览器点击后退按钮相同(加载历史列表中的前一个 URL)
history.forward() - 与在浏览器中点击按钮向前相同(加载历史列表中的下一个 URL)

window.navigator

(navigator 数据可被浏览器使用者更改,浏览器没法报告晚于浏览器发布的新操做系统)

特性检测
因为 navigator 可误导浏览器检测，使用对象检测可用来嗅探不一样的浏览器。
因为不一样的浏览器支持不一样的对象，您可使用对象来检测浏览器。例如，因为只有 Opera 支持属性 "window.opera"，您能够据此识别出 Opera。

window.PopupAlert

alert("文本")
confirm("文本")
prompt("文本","默认值")

JS Timing

setTimeout("javascript语句",毫秒) 将来的某时执行代码
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你但愿取消这个 setTimeout()，你可使用这个变量名来指定它。
clearTimeout() 取消setTimeout()

JS Cookies

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else 
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}
</script>
</head>

<body onLoad="checkCookie()">
</body>
</html>

HTML DOM

在 HTML DOM 中，全部事物都是节点。DOM 是被视为节点树的 HTML。

整个文档是一个文档节点
每一个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每一个 HTML 属性是属性节点
注释是注释节点

clipboard.png

document.documentElement - 所有文档
document.body - 文档的主体

clipboard.png
DOM 处理中的常见错误是但愿元素节点包含文本
可经过节点的 innerHTML 属性来访问文本节点的值

一些经常使用的 HTML DOM 方法：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的全部元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的全部元素的节点列表。
appendChild() 将新元素做为父元素的最后一个子元素进行添加。
removeChild() 删除子节点child.parentNode.removeChild(child)。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 建立属性节点。
createElement() 建立元素节点。
createTextNode() 建立文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改成指定的值。
一些经常使用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

nodeName 属性
nodeName 属性规定节点的名称。
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
注释：nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自己
属性节点的 nodeValue 是属性值

nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有：
元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

如需向 HTML DOM 添加新元素，您首先必须建立该元素（元素节点），而后把它追加到已有的元素上。

除了 innerHTML 属性，您也可使用 childNodes 和 nodeValue 属性来获取元素的内容。
document.getElementById("intro").childNodes[0].nodeValue

向超连接添加快捷键
几乎全部浏览器均 accesskey 属性，除了 Opera。
如下元素支持 accesskey 属性：
< a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。

<a href="http://www.w3school.com.cn/html/" accesskey="h">HTML</a>

document.referrer
若是当前文档不是经过超级连接访问的，则为 null。这个属性容许客户端 JavaScript 访问 HTTP 引用头部。

打开一个新的文档，添加一些文本，而后关闭它。

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

document 文档

文档中锚的数目

document.anchors.length

文档中的图像数目

document.images.length

文档中表单的名字

document.forms[0].name
document.getElementById("myForm").reset()//重置

验证表单

<html>
<head>
<script type="text/javascript">
function validate()
{
var at=document.getElementById("email").value.indexOf("@")
var age=document.getElementById("age").value
var fname=document.getElementById("fname").value
submitOK="true"
if (fname.length>10)
 {
 alert("名字必须小于 10 个字符。")
 submitOK="false"
 }
if (isNaN(age)||age<1||age>100)
 {
 alert("年龄必须是 1 与 100 之间的数字。")
 submitOK="false"
 }
if (at==-1) 
 {
 alert("不是有效的电子邮件地址。")
 submitOK="false"
 }
if (submitOK=="false")
 {
 return false
 }
}
</script>
</head>
<body>
<form action="/example/hdom/hdom_submitpage.html" onsubmit="return validate()">
名字（最多 10 个字符）：<input type="text" id="fname" size="20"><br />
年龄（从 1 到 100）：<input type="text" id="age" size="20"><br />
电子邮件：<input type="text" id="email" size="20"><br />
<br />
<input type="submit" value="提交"> 
</form>
</body>
</html>

选取文本域中的内容
document.getElementById("myText").select()

表单中的下拉列表

document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text
option=no.options[no.selectedIndex].text

当达到文本域的最大字符数时跳至下一个域

<html>
<head>
<script type="text/javascript">
function checkLen(x,y)
{
if (y.length==x.maxLength)
    {
    var next=x.tabIndex
    if (next<document.getElementById("myForm").length)
        {
        document.getElementById("myForm").elements[next].focus()
        }
    }
}
</script>
</head>
<body>
<p>这段脚本在达到文本框的最大长度时跳到下一个文本框：</p>
<form id="myForm">
<input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)">
</form>
</body>
</html>

Event 对象

Frame、Frameset 以及 IFrame 对象

可调整大小和不可调整大小的框架

<html>
<frameset cols="50%,50%">
  <frame id="leftFrame" src="/example/hdom/frame_noresize.html">
  <frame id="rightFrame" src="/example/hdom/frame_a.html">
</frameset>
</html>

跳出框架

<html>
<head>
<script type="text/javascript">
function breakout()
  {
  if (window.top!=window.self) 
    {
    window.top.location="/example/hdom/tryjs_breakout.htm"
    }
  }
</script>
</head>
<body>

<input type="button" onclick="breakout()" value="跳出框架！">
</body>
</html>

更改下拉列表中的可见行数
select id="mySelect"
document.getElementById("mySelect").size=3
选择下拉列表中的多个选项
document.getElementById("mySelect").multiple=true
下拉列表 禁用
document.getElementById("mySelect").disabled=true
更改被选选项
document.getElementById("orange").selected=true;
从下拉列表中删除选项
var x=document.getElementById("mySelect")
x.remove(x.selectedIndex)

打印该页
window.print()

Q&A

HTML5 中再也不支持下面哪一个元素？
<acronym>

在 HTML5 中再也不支持 <script> 元素的哪一个属性？
type

由 SVG 定义的图形是什么格式的？
XML

哪一个 HTML5 内建对象用于在画布上绘制？
getContext

哪一种输入类型用于定义周和年控件（无时区）？
week

哪一个 HTML5 元素用于显示已知范围内的标量测量？
<meter>

外部脚本必须包含 <script> 标签吗？
否

在 JavaScript 中，有多少种不一样类型的循环？
两种。for 循环和 while 循环。

打开名为 "window2" 的新窗口的 JavaScript 语法是？
window.open("http://www.w3school.com.cn","window2")

如何在浏览器的状态栏放入一条消息？window.status = "put your message here"

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程