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
如果表达式后面紧跟 () ，则会自动调用。
不能自调用声明的函数。
通过添加括号，来说明它是一个函数表达式：
例：
(function () {
})();
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加()运行就会出现异常，必须只写元素名。
语法
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
注： addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件。
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
16.对window监听
当用户重置窗口大小时添加事件监听：
document.getElementById("demo").innerHTML = sometext;
});
17. 创建新的 HTML 元素（复杂！）
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
实例
<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> 元素：
如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
然后您必须向 <p> 元素追加这个文本节点：
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
以下代码在已存在的元素后添加新元素：
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
document.getElementById("div1").removeChild(document.getElementById("p1"));
</script>
19.查找父元素
找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
child.parentNode.removeChild(child);
var x=message.toUpperCase();
javascript基本语法点的更多相关文章
- JavaScript基本语法（一）
前段时间学习了HTML和CSS,也实战了一些结构较简单的项目.在还没运用到JS的知识时,做出来的效果总觉得少了些什么.虽然总体布局与一些基本的特效,也能用HTML+CSS就能完成.但如今开始进入Jav ...
- javascript运算符语法概述
× 目录 [1]个数 [2]优先级 [3]结合性[4]类型[5]规则表 前面的话 javascript中的运算符大多由标点符号表示,少数由关键字表示,它们的语法言简意赅,它们的数量却着实不少.运算符始 ...
- javascript基础语法——表达式
× 目录 [1]原始表达式 [2]复杂表达式 前面的话 一般地,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但是,其实还有一个术语经常使用,却很少被提到,这就是javascr ...
- javascript基础语法——词法结构
× 目录 [1]java [2]定义 [3]大小写[4]保留字[5]注释[6]空白[7]分号 前面的话 javascript是一门简单的语言,也是一门复杂的语言.说它简单,是因为学会使用它只需片刻功夫 ...
- JavaScript的语法规则
JavaScript的语法规则 JavaScript区分大小写 JavaScript脚本程序须嵌入在HTML文件中 JavaScript脚本程序中不能包含HTML标记代码 每行写一条脚本语句 语句末尾 ...
- JavaScript的语法要点 1 - Lexically Scoped Language
作为从一开始接触C.C++.C#的程序员而言,JavaScript的语法对我来说有些古怪,通过最近一年的接触,对它有了一定的了解,于是想把它的一些语法要点记录下来. 1. Block Scope vs ...
- javascript的语法作用域你真的懂了吗
原文:javascript的语法作用域你真的懂了吗 有段时间没有更新了,思绪一下子有点转不过来.正应了一句古话“一天不读书,无人看得出:一周不读书,开始会爆粗:一月不读书,智商输给猪.”.再加上周五晚 ...
- 【repost】JavaScript 基本语法
JavaScript 基本语法,JavaScript 引用类型, JavaScript 面向对象程序设计.函数表达式和异步编程 三篇笔记是对<JavaScript 高级程序设计>和 < ...
- JavaScript 中语法规范及调试
JavaScript 中语法规范及调试 版权声明:未经博主授权,内容严禁分享转载 JavaScript 开发环境 JavaScript 脚本可以使用任意一款纯文本编辑器进行编程开发. 常见的前端开发编 ...
- Unit04： JavaScript 概述 、 JavaScript 基础语法 、 流程控制
Unit04: JavaScript 概述 . JavaScript 基础语法 . 流程控制 my.js function f3() { alert("唐胜伟"); } demo1 ...
随机推荐
- maven-插件地址
Maven官方有两个插件列表, 第一个列表的GroupId 为 org.apache.maven.plugins,这里的插件最为成熟,具体地址为:http://maven.apache.org/plu ...
- uni-app 手指左右滑动实现翻页效果
首先给页面添加 touch 事件 <view class="text-area" @touchstart="start" @touchend=" ...
- 1.React中的虚拟DOM
1.state 数据 2.JSX模板 3.数据+ 模板 结合,生成真实的DOM,来显示 4.state发生改变 5.数据 + 模板 结合,生成真实的DOM,替换原始的DOM 缺陷: 第一次生成了一个完 ...
- 二、Linux用户身份
0.介绍: 管理员UID为0:系统的管理员用户. 系统用户UID为1-999: Linux系统为了避免因某个服务程序出现漏洞而被黑客提权至整台服务器,默认服务程序会有独立的系统用户负责运行,进而有效控 ...
- （转）asp.net mvc 开发环境下需要注意的安全问题（一）
概述 安全在web领域是一个永远都不会过时的话题,今天我们就来看一看一些在开发ASP.NET MVC应用程序时一些值得我们注意的安全问题.本篇主要包括以下几个内容 : 认证 授权 XSS跨站脚本攻击 ...
- C++进阶笔记
思想原则: 以类为例,类最终要处理的是数据,方法只是过程,最终要改变的是private中的数据成员状态.程序设计也是如此,要的是数据. 一.const的作用 const定义变量:定义了一个不可修改的常 ...
- 深入理解C语言-结构体做函数参数
结构体做函数参数,在C语言中属于常见现象,此时为了内存考虑,不传递结构体,而是传递结构体的地址 结构体定义 struct Man { char name[64]; int age; }; 结构体可以与 ...
- python手撸桌面计算器
网上有一些许多关于计算器的源码,但我似乎不太care 一直寻思着自己手撸一个才有意思,于是这就开始了 实现功能: 1.基本的两个数 +-x÷ 运算以及取反,百分之,平方等 2.支持连续运算 3.暂不支 ...
- Springboot Rabbitmq 使用Jackson2JsonMessageConverter 消息传递后转对象
Springboot为了应对高并发,接入了消息队列Rabbitmq,第一版验证时使用简单消费队列: //发送端 AbstractOrder order =new Order(); rabbitmqTe ...
- Linux三剑客之sed深度实践讲解（上）
sed sed 是Stream Editor(流编辑器)缩写,是操 作过滤和转换文本内容的强大工具.常用功能有增删改查,过滤,取行. 2.增删改查 2.1 增 a 追加文本到指定行后 i 插入文本到指 ...