注释：

/*多行

注释*/

//单行注释

变量：

//变量均为对象，常用类型：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基本内容的更多相关文章

  1. 总结JavaScript输出内容（document.write）

    document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用“”括起,直接输出""号内的内容.<script ...

  2. API例子：用Java/JavaScript下载内容提取器

    1,引言 本文讲解怎样用Java和JavaScript使用 GooSeeker API 接口下载内容提取器,这是一个示例程序.什么是内容提取器?为什么用这种方式?源自Python即时网络爬虫开源项目: ...

  3. javascript 将内容复制到剪贴板

      javascript 将内容复制到剪贴板 CreateTime--2017年9月19日11:36:50 Author:Marydon js 操作剪贴板 1.设置剪贴板内容 UpdateTime-- ...

  4. javascript复制内容到剪切板/网页上的复制按钮的实现

    javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...

  5. JavaScript进阶内容——DOM详解

    JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...

  6. JavaScript进阶内容——BOM详解

    JavaScript进阶内容--BOM详解 在上一篇文章中我们学习了DOM,接下来让我们先通过和DOM的对比来简单了解一下BOM 首先我们先来复习一下DOM: 文档对象模型 DOM把文档当作一个对象来 ...

  7. JavaScript进阶内容——jQuery

    JavaScript进阶内容--jQuery 我们在前面的文章中已经掌握了JavaScript的全部内容,现在让我们了解一下JavaScript库 这篇文章主要是为了为大家大致讲解JavaScript ...

  8. javascript学习内容--改变样式、取消设置、显示内容、隐藏内容

    <head> <style> body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid ...

  9. JavaScript高级内容：原型链、继承、执行上下文、作用域链、闭包

    了解这些问题,我先一步步来看,先从基础说起,然后引出这些概念. 本文只用实例验证结果,并做简要说明,给大家增加些印象,因为单独一项拿出来都需要大篇幅讲解. 1.值类型 & 引用类型 funct ...

  10. Javascript的内容

    JS简介和变量 {JS的三种方式}            1 HTML中内嵌JS(不提倡使用)            <button onclick="javascript:alert ...

随机推荐

  1. 2017-2018-2 20165215 实验二 Java面向对象程序设计

    20165215 实验二 Java面向对象程序设计 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:张家佳 学号:20165215 指导教师:娄嘉鹏 实验日期:2018年4月16日 ...

  2. python内置函数的简单使用和介绍

    """内置函数的简单使用和介绍参考链接:https://docs.python.org/3/library/functions.html ""&quo ...

  3. [转载]oracle的加密和解密

    加密函数 create or replace function encrypt_des(p_text varchar2, p_key varchar2) return varchar2 isv_tex ...

  4. MaxiSYS Elite

    The Maxisys Elite is Autel UK’s top of the range diagnostic and analysis scanner with advanced J2534 ...

  5. 关于DNS 和根证书你了解多少？

    由于最近发生的一些事件,我们(Privacy Today 组织)感到有必要写一篇关于此事的短文.它适用于所有读者,因此它将保持简单 —— 技术细节可能会在稍后的文章发布. 什么是 DNS,为什么它与你 ...

  6. jquery easyui datagrid 空白条处理 自适应宽高 格式化函数formmater 初始化时会报错 cannot read property 'width'||'length' of null|undefined

    1---表格定义好之后右侧可能会有一个空白条 这个空白条是留给滚动条的,当表格中的一页的数据在页面中不能全显示时会自动出现滚动条,网上有很多事要改源码才可以修改这个,但是当项目中多处用到时,有的需要滚 ...

  7. Kattis之旅——Eight Queens

    In the game of chess, the queen is a powerful piece. It can attack by moving any number of spaces in ...

  8. Redis Desktop Manager连接Redis

    1.注释redis.conf文件中的:bind 127.0.0.1修改为自己的IP 2.ifconfig查看自己的虚拟机ip 3.拿到IP后,返回Windows,开启cmd,通过telnet命令,测试 ...

  9. windows dhcp server

    windows7并没有自带dhcp server的功能,需要安装额外的软件,软件很小巧,只有几百K字节,下载地址http://www.dhcpserver.de/cms/download/ 假设解压路 ...

  10. shell实现每天0点备份mysql数据库

    就两个文件, 本人学识尚浅,不解释,怕大佬喷. back.sh #/bin/bash MYSQLUSER=root MYSQLPWD=lizhenghua DATABASES=zskdb MYSQLD ...