Javascript 第一阶段学习使用总结

最新推荐文章于 2024-11-05 22:07:06 发布

donggou7958

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量105

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/blitheG/p/5312308.html

版权

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中，或者位于 <script> 与 </script> 标签之间。

如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法

'''
<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript"; //应用ID
document.write("<p>My First JavaScript</p>"); //直接输出HTML标签
document.write("糟糕！文档消失了。"); //在函数中使用
</script>
'''

如需改变 HTML 元素的属性，请使用这个语法：document.getElementById(id).attribute=new value

document.getElementById("image").src="tupian.jpg";

如需改变 HTML 元素的样式，请使用这个语法：document.getElementById(id).style.property=new style

document.getElementById("p2").style.color="blue";

我们可以在事件发生时执行 JavaScript，
　　onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
　　onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。

　　首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
　　如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript的代码：οnclick=（JavaScript）
　　　　document.getElementById("myBtn").οnclick=function(){displayDate()}; //调用

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

　　onchange 事件常结合对输入字段的验证来使用。
　　　　<input type="text" id="fname" οnchange="upperCase()"> //当用户改变输入字段的内容时，会调用 upperCase() 函数

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p"); //创建新的 <p> 元素
var node=document.createTextNode("这是新段落。"); //创建文本节点
para.appendChild(node); //向 <p> 元素追加文本节点

var element=document.getElementById("div1"); //找到一个已有的元素
element.appendChild(para);
</script>

如需删除 HTML 元素，您必须首先获得该元素的父元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

对于JS：

var txt = "Hello"; //声明的字符串，即为对象，自带属性length....
objectName.propertyName //访问对象的属性
objectName.methodName() //调用对象方法

JavaScript 变量的生命期从它们被声明的时间开始。
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它，局部变量会在函数运行以后被删除。
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它，全局变量会在页面关闭后被删除。

对字符串和数字进行加法运算，结果将成为字符串。

x=5+5;
document.write(x); //10

x="5"+"5";
document.write(x); //55

x=5+"5";
document.write(x); //55

x="5"+5;
document.write(x); //55

条件运算符：variablename=(condition)?value1:value2

greeting=(visitor=="PRES")?"Dear President ":"Dear "; //如果变量visitor中的值是"PRES"，则向变量greeting赋值"Dear President "，否则赋值 "Dear"。

break 语句用于跳出循环。break 语句跳出循环后，会执行该循环之后的代码
continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。

for (i=0;i<=10;i++){
　　if (i==3) continue; //break； 输出0，1，2
　　　　x=x + "The number is " + i + "<br>";
　　} //输出0，1，2，4，5，6，7，8，9

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。

try{
    var x=document.getElementById("demo").value;
    if(x=="") throw "empty";
    if(isNaN(x)) throw "not a number";
    if(x>10) throw "too high";
    if(x<5) throw "too low";
}
catch(err){
    var y=document.getElementById("ID");
    y.innerHTML="Error: " + err + "."; //满足条件时，ID内容为throw的内容
}