JavaScript基本内容
注释：
/*多行
注释*/ //单行注释
变量：
//变量均为对象，常用类型：String、Number、Boolean、Array、Object
var value = "hello"; //变量声明只能用var，不能用具体类型，变量本身的类型会在声明后类型推断
value = 9; //而且类型推断，还具有动态类型
document.write(value);
使用id表示元素，再访问该元素：
<head>
<script>
document.getElementById("test").innerHTML="test";
</script>
</head>
<body>
<p id="test">操纵html元素</p>
<!--将js放在最后，可以确保在所有元素创建完毕之后，再执行脚本-->
<script>
document.getElementById("test").innerHTML="test";
</script>
</body>
由于js可以用document.write向页面写入含有标签的文本，但是又可以通过标签的id的属性来改变其值，所以这就是写入动态的文本。
//document.write('<p id="test">hello</p>'); //可以在字符串中使用引号，只要不匹配包围字符串的引号即可
document.write("<p id='test'>hello</p>");
document.getElementById("test").innerHTML = "test";
数字(使用科学记数法)：
//所有 JavaScript 数字均为 64 位(2^64，8B)
var y = 123e5; // 123 * 10^5 = 12300000
var z = 123e-5; // 0.00123
var a = 0377; //八进制(前缀为0)
var b = 0xFF; //16进制
日期对象Date：
//Date 对象自动使用当前的日期和时间作为其初始值
var fullDate = new Date();
//设定指定时间
fullDate.setFullYear(2008, 11, 20); //年，月(0-11 — 11:12月)，日
//仅设置日期：如果增加天数会改变月份，那么Date对象会自动完成转换
fullDate.setDate(fullDate.getDate() + 5);
document.write(fullDate + "<br />");
//获得时分秒
document.write(fullDate.getHours() + "<br />"); //分、秒都是同样的做法
创建数组：
var car1 = new Array();
car1[0] = "hello";
car1[1] = 123;
// or condensed array
var car_2 = new Array(3);
var car2 = new Array("Audi", "BMW", "Volvo");
// or literal array
var car3 = ["Audi", "BMW", "Volvo"];
逻辑对象Boolean：
如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false；其他情况为true。
算数对象Math：
//使用内置的Math对象
document.write(Math.round(4.4) + "<br />"); //四舍五入
document.write(Math.random() + "<br />"); //随机小数：0到1
document.write(Math.floor(Math.random() * 100) + "<br />"); //随机小数*扩大倍数M，再通过下舍入函数floor生成最后的随机数：0到M
document.write(Math.max(1, -1) + "<br />" + Math.min(1, -1) + "<br />"); //比大小
正则对象RegExp：
//RegExp对象常用3个方法：test、exec、compile
var pattern = new RegExp("e");
document.write(pattern.test("hello") + "<br />"); //输出bool值
document.write(pattern.exec("hello") + "<br />"); //找到则返回pattern(模式)的值，否则为null
//第二个参数: exec方法会改变：找到第一个模式(pattern)，并记录位置；如果再次执行exec，则从上次的位置后检索
var pattern1 = new RegExp("e", "g");
do {
var result = pattern1.exec("hello");
document.write(result);
} while (result != null);
document.write("<br />");
//compile方法用于改变RegExp，如改变模式(pattern)、增删第二个参数
pattern.compile("h");
document.write(pattern.test("hello") + "<br />");
创建自定义对象：
直接创建实例、对象构造器（函数）：
//直接创建实例
person1 = new Object();
person1.age = 56;
document.write(person1.age + "<br />");
//写法二
var person2 = {
//属性，以键值对形式存在
firstname: "Bill",
lastname: "Gates",
id: 5566
};
document.write(person2.lastname + "<br />");
document.write(person2["lastname"] + "<br />");
//使用函数定义，对象构造器，再实例化
function person3(age)
{
this.age = age;
}
var boy = new person3(10);
document.write(boy.age + "<br />");
//此外，对已存在的对象(不管是通过哪种方式创建的)，还可以随时添加新的属性、方法
boy.firstname = "Bill";
document.write(boy.firstname + "<br />");
添加方法：
//添加方法
function hello()
{
alert("hello");
}
function person()
{
this.hello = hello;
}
var girl = new person();
girl.hello();
//对已经存在的对象，添加新的方法
document.hello = hello;
document.hello();
遍历一个对象的所有属性：
var person = { fname: "Bill", lname: "Gates", age: 56 };
for(x in person)
{
document.write(x + ": " + person[x] + "<br />"); //这里不能写成person.x
}
函数：
全局变量：在函数外的变量为全局，任何脚本都能用。
数字+字符串：会将数字当作字符串处理。
for循环：
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person)
{
txt = txt + person[x];
}
抛出自定义异常：
function CustomException()
{
try
{
throw "customException";
}
catch(err)
{
alert(err);
}
}
CustomException();
在数据被发送到服务器之前，进行表单验证。
当网页被加载时，浏览器会创建页面的DOM模型树，即构造对象之间的树形关系(模型)：
找到HTML元素：通过id、标签名、class：
<p id="test" class="test">test文本</p>
<script>
var x = document.getElementById("test");
var y = document.getElementsByTagName("p"); //这个对象中的所有p元素
var z = document.getElementsByClassName("test");
document.write("id: " + x.innerHTML + "<br />");
document.write("TagName: " + y[0].innerHTML + "<br />");
document.write("class: " + z[0].innerHTML + "<br />");
</script>
改变HTML属性：
<img id="test" src="1.png" />
<script>
//document.getElementById(id).attribute = new value
var x = document.getElementById("test");
x.src = "2.png";
</script>
改变 HTML 元素的样式 (CSS)：
<p id="test">Hello</p>
<script>
//document.getElementById(id).style.property = new style
var x = document.getElementById("test");
x.style.color = "#FF0000";
</script>
<h1 id="id1">Header</h1>
<button onclick="document.getElementById('id1').style.color = '#FF0000'">点击测试</button>
处理 HTML DOM 事件：
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1> <h2 id="test2">Hello</h2>
<script>
var x = document.getElementById("test2");
x.onclick = function () { changeText() };
function changeText()
{
x.innerHTML = "Thanks";
}
</script>
onload可用来处理cookie等事务：
<script>
document.onload = checkCookies();
function checkCookies()
{
//是否使用Cookies
if (navigator.cookieEnabled == true)
alert("Enabled cookies");
}
</script>
onchange事件：
<!--在点击页面中的其他地方后（离开输入字段），会触发onchange事件-->
<input id="test" type="text" onchange="TextChange()" />
<script>
function TextChange()
{
var x = document.getElementById("test");
x.value = x.value.toUpperCase();
}
</script>
鼠标相关操作：
<p onmouseover="mOver(this)" onmouseout="mOut(this)">测试文本</p>
<p onmousedown="mDown(this)" onmouseup="mUp(this)">测试文本</p>
<script>
//放上去，又拿开
function mOver(obj)
{
obj.innerHTML = "鼠标放在了这里";
}
function mOut(obj)
{
obj.innerHTML = "鼠标离开了这里";
}
//点击下去，又松开，就点完了（有了down、up，就不用click了）
function mDown(obj)
{
obj.innerHTML = "点击不放";
}
function mUp(obj)
{
obj.innerHTML = "松开";
}
</script>
添加或删除 HTML 元素：
<!--添加新元素：创建新元素，再将新元素加入某个元素-->
<div id="div1">
<p>段落</p>
</div>
<script>
//创建
var p = document.createElement("p");
var text = document.createTextNode("新段落");
p.appendChild(text); //添加
var element = document.getElementById("div1");
element.appendChild(p);
</script>
类似的，删除：
<div id="div1">
<p id="p1">段落1</p>
<p id="p2">段落2</p>
</div>
<script>
//通过这个元素的父亲，来删掉它
var child = document.getElementById("p1");
child.parentNode.removeChild(child); //child.parentElement.removeChild(child);
//易懂的写法
//var child = document.getElementById("p1");
//var parent = document.getElementById("div1");
//parent.removeChild(child);
</script>
创建三种消息框——警告框、确认框、提示框：
//警告框alert：下面换行
alert("hello" + "\n" + "world"); //应该用concat方式，写在一起达不到效果
//确认框：往往需要根据返回值，来确定选择结果
var result = confirm("choose");
if (result == true) {
alert("OK");
}
else {
alert("no");
}
//提示框：往往用于，进入一个页面之前提示用户输入某些值：prompt("提示文本","默认值")。点击确认后，返回值为输入框的值；取消，为null
document.write(prompt("请输入姓名", "Bill Gates"));
JavaScript基本内容的更多相关文章
- 总结JavaScript输出内容（document.write）
document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用“”括起,直接输出""号内的内容.<script ...
- API例子：用Java/JavaScript下载内容提取器
1,引言 本文讲解怎样用Java和JavaScript使用 GooSeeker API 接口下载内容提取器,这是一个示例程序.什么是内容提取器?为什么用这种方式?源自Python即时网络爬虫开源项目: ...
- javascript 将内容复制到剪贴板
javascript 将内容复制到剪贴板 CreateTime--2017年9月19日11:36:50 Author:Marydon js 操作剪贴板 1.设置剪贴板内容 UpdateTime-- ...
- javascript复制内容到剪切板/网页上的复制按钮的实现
javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...
- JavaScript进阶内容——DOM详解
JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...
- JavaScript进阶内容——BOM详解
JavaScript进阶内容--BOM详解 在上一篇文章中我们学习了DOM,接下来让我们先通过和DOM的对比来简单了解一下BOM 首先我们先来复习一下DOM: 文档对象模型 DOM把文档当作一个对象来 ...
- JavaScript进阶内容——jQuery
JavaScript进阶内容--jQuery 我们在前面的文章中已经掌握了JavaScript的全部内容,现在让我们了解一下JavaScript库 这篇文章主要是为了为大家大致讲解JavaScript ...
- javascript学习内容--改变样式、取消设置、显示内容、隐藏内容
<head> <style> body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid ...
- JavaScript高级内容：原型链、继承、执行上下文、作用域链、闭包
了解这些问题,我先一步步来看,先从基础说起,然后引出这些概念. 本文只用实例验证结果,并做简要说明,给大家增加些印象,因为单独一项拿出来都需要大篇幅讲解. 1.值类型 & 引用类型 funct ...
- Javascript的内容
JS简介和变量 {JS的三种方式} 1 HTML中内嵌JS(不提倡使用) <button onclick="javascript:alert ...
随机推荐
- 【Alpha版本】冲刺阶段——Day4
[Alpha版本]冲刺阶段--Day4 阅读目录 今日进展 问题困难 明日任务 今日贡献量 TODOlist [今日进展] 完成注册类代码 public class Register { privat ...
- idea下导入Tomcat源码
对于web开发者来说,如果明白了tomcat那对于开发还是后面的学习都是有很大益处的,但在网上看了很多的文章,总是没弄好,经历了很久才弄好了,写个文章记录下,希望也能帮助到其他人.下载Tomcat源码 ...
- 高性能NIO框架Netty-对象传输
http://cxytiandi.com/blog/detail/17403 上篇文章高性能NIO框架Netty入门篇我们对Netty做了一个简单的介绍,并且写了一个入门的Demo,客户端往服务端发送 ...
- 51Nod 1212 无向图最小生成树 （路径压缩）
N个点M条边的无向连通图,每条边有一个权值,求该图的最小生成树. Input 第1行:2个数N,M中间用空格分隔,N为点的数量,M为边的数量.(2 <= N <= 1000, 1 &l ...
- python使用SAX解析xml
python 标准库包含SAX解析器,SAX用事件驱动模型,通过在解析XML的过程中触发一个个的事件并调用用户定义的回调函数来处理XML文件 在python中使用sax方式处理xml要先引入xml.s ...
- [转载]Oracle ltrim() 函数用法
前面有说到过LPAD和RPAD这两个函数用法的文章,今天发现与之相反意义的另外两个函数,那就是LTRIM() RTRIM(). 这次就挑LTRIM() 这一函数来讲讲: 具体的语法格式如下: LTRI ...
- JMX堆栈分析
线程堆栈: 线程堆栈也称线程调用堆栈,是虚拟机中线程(包括锁)状态的一个瞬间快照,即系统在某一个时刻所有线程的运行状态,包括每一个线程的调用堆栈,锁的持有情况.虽然不同的虚拟机打印出来的格式有些不同, ...
- 前端框架VUE----组件的创建
vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例中使用组件吧! ...
- QMenu 设置菜单图标 & 生成菜单树
效果图 源码 .h 文件 protected slots: void onMenuTriggered(QAction*); .cpp 文件 // 菜单 QMenu *pMenu = new QMenu ...
- makefile 变量展开
Makefile中给变量赋值: = 是递归展开式变量 value1 = 5 value2 = $(value1) value1 = 6 最终$(value2)就变成了6 := 是直接展开 ...