javascript基本语法点

zoukankan html css js c++ java

javascript基本语法点
1. getElementById
例：
<input type="text" id="user" />
则getElementById('user').type = text

<div id="newdiv"><span>1111</span></div>
则getElementById('newdiv').innerHTML = <span>1111</span>

2. 条件语句
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和条件 2 都不为 true 时执行的代码
}

3. 条件运算符

语法
variablename=(condition)?value1:value2

实例
如果变量 age 中的值小于 18，则向变量 voteable 赋值 "年龄太小"，否则赋值 "年龄已达到"。
voteable=(age<18)?"年龄太小":"年龄已达到";

4. switch/default 关键词

实例
如果今天不是星期六或星期日，则会输出默认的消息：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击下面的按钮来显示今天是周几：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var d=new Date().getDay();
switch (d){
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
}
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

注意：switch 语句会使用恒等计算符(===)进行比较。

5. 循环
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

6. typeof
typeof [1,2,3,4] 返回 object

typeof 检测 null 返回是object

在 JavaScript 中, undefined 是一个没有设置值的变量。typeof 一个没有值的变量会返回 undefined。

NaN 的数据类型是 number

数组(Array)的数据类型是 object

日期(Date)的数据类型为 object

null 的数据类型是 object

　　在 JavaScript 中有 5 种不同的数据类型：

string

number

boolean

object

function

　　3 种对象类型：

Object

Date

Array

　　2 个不包含任何值的数据类型：

null

undefined

7.constructor

"John".constructor                 // 返回函数 String() { [native code] }
(3.14).constructor                 // 返回函数 Number() { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object() { [native code] }
new Date().constructor             // 返回函数 Date() { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }

使用 constructor 属性来查看是对象是否为日期 (包含字符串 "Date"):

function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

8.Undefined 和 Null 的区别

typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true

9.自调用函数
如果表达式后面紧跟 () ，则会自动调用。

不能自调用声明的函数。

通过添加括号，来说明它是一个函数表达式：

例：

(function () {

    var x = "Hello!!";      // 我将调用自己
})();

10.闭包

11.改变 HTML

改变 HTML 输出流：

　　<script>
　　document.write(Date());
　　</script>

改变 HTML 内容：

　　<script>
　　document.getElementById("p1").innerHTML="新文本!";
　　</script>

改变 HTML 属性：

　　<script>
　　document.getElementById("image").src="landscape.jpg";
　　</script>

改变 HTML 样式：

　　<script>
　　document.getElementById("p2").style.color="blue";
　　document.getElementById("p2").style.fontFamily="Arial";
　　document.getElementById("p2").style.fontSize="larger";
　　</script>

使用事件：

　　<button type="button" onclick="document.getElementById('id1').style.color='red'">点我!</button>

12.表单

<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

13.使用 HTML DOM 来分配事件

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>

去掉function()无法正常运行。

14.HTML 事件的例子

　　当用户点击鼠标时

　　<button onclick="displayDate()">点这里</button>

　　当网页已加载时

　　<body onload="checkCookies()">

　　当图像已加载时

　　

　　当鼠标移动到元素上时

　　<div onmouseover="mOver(this)" onmouseout="mOut(this)" >Mouse Over Me</div>

　　当输入字段被改变时

　　<input type="text" id="fname" onchange="upperCase()">

　　当提交 HTML 表单时

　　当用户触发按键时

　　<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />

　　获得焦点

　　<script>

　　function myFunction(x){
　　x.style.background="yellow";
　　}
　　</script>

　　输入你的名字: <input type="text" onfocus="myFunction(this)">

15.addEventListener() 方法

<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>

displayDate加()运行就会出现异常，必须只写元素名。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意:不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。
注： addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件。

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

16.对window监听

当用户重置窗口大小时添加事件监听：

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

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

实例

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

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

例子解析：

这段代码创建新的<p> 元素：

var para=document.createElement("p");

如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是一个新段落。");

然后您必须向 <p> 元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素：

var element=document.getElementById("div1");

以下代码在已存在的元素后添加新元素：

element.appendChild(para);

18. 删除已有的 HTML 元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
document.getElementById("div1").removeChild(document.getElementById("p1"));
</script>

19.查找父元素

找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

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

20. 转大写字符

var message="Hello world!";
var x=message.toUpperCase();
查看全文

相关阅读:
CentOS5.5环境下布署LVS+keepalived
CentOS 6.3下部署LVS(NAT)+keepalived实现高性能高可用负载均衡
 Redis的事务
 Redis_持久化之RDB
Redis有序集合Zset（sorted set）
Redis哈希-hash
Redis集合-Set
Redis 数据类型-List
Java多线程与并发库高级应用-同步集合
 Java多线程与并发库高级应用-可阻塞的队列

原文地址：https://www.cnblogs.com/jayworld/p/5940928.html

javascript基本语法点

语法

17. 创建新的 HTML 元素（复杂！）

实例