注释：

/*多行

注释*/

//单行注释

变量：

//变量均为对象，常用类型：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. golang学习笔记18 用go语言编写移动端sdk和app开发gomobile

    golang学习笔记18 用go语言编写移动端sdk和app开发gomobile gomobile的使用-用go语言编写移动端sdk和app开发https://blog.csdn.net/u01249 ...

  2. 在MyEclipse中使用javadocAPI文档

    开始啦 1.打开MyEclipse,选中要导出的项目,右击Exprot弹出窗口,选择java----javadoc点击next到下一界面. 2.选出要导出的项目或要添加的项目,在browse中选择路径 ...

  3. nginx的gzip压缩功能

    我们在开发网站的时候,应该要考虑到pv,因为pv比较大可能会造成服务器带宽不够用,进而导致用户体验变差. 这个时候我们就可以考虑用nginx的gzip功能. 在nginx中开启gzip压缩功能很简单, ...

  4. 深度挖掘，Html5的 Range 滑动刻度的坑，兼容全平台，将任性进行到底！

    最近2天一直在弄一个滑动的刻度效果,由于项目是基于Web App开发的,于是考虑到 移动端和pc端 的兼容性问题,考虑的比较多,尝试采用 Html5的Range 来做,目前已经兼容 pc端和移动端! ...

  5. SaaS的中年危机（转）

    如果说SaaS软件和人有什么地方很像的话,中年危机一定是其中一个.另一个是交税. 经常有人问我,春阳,你觉得xx SaaS公司怎么样? 如果这是一家成立2年以上的公司,我的回答多半是“活的不是那么滋润 ...

  6. 【题解】 P2234 [HNOI2002]营业额统计

    平衡树板题 原题传送门 这道题要用Splay,我博客里有对Splay的详细介绍 这道题目还算比较模板的 每输入一个数,先不要插入 要求一下前驱和后继与x差的最小值并加到答案中 再把x插入平衡树 然后你 ...

  7. python框架相关问题

    面试其他篇 目录: 1.1

  8. 解决Access查询不区分大小写问题

    1.问题 比如查询用户名密码,会将所有没区分大小写的结果拿出来 2.解决 使用StrComp函数 QString execStr = QString("select * from [tabl ...

  9. 再谈fedora23下Virutalbox的安装. --问题的关键在于 安装kernel-devel包

    首先, 要使用 virutalbox的 rpm 安装包 进行安装. 在安装的过程中, 如果提示 有一些包, 没有, dependencies not resolved, 比如libQt..libvpx ...

  10. CF767C 记录错误

    链接 https://codeforces.com/contest/767/problem/C 思路 之所以把这个题放进来,是因为要记录错误 情况不止一种 所以答案存储就是>=2了 代码 #in ...