本篇内容

  1. 简介
  2. 使用
  3. DOM

一、 简介

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言。

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

二、 使用

1.简单使用

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        alert("My First JavaScript");

    </script>

</head>

<body>

</body>

</html>

2.注释使用

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

（1）单行注释

单行注释以 // 开头。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

//        alert("My First JavaScript");

    </script>

</head>

<body>

</body>

</html>

（2）多行注释

多行注释以 /* 开始，以 */ 结尾。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        /*alert("My First JavaScript");

        alert("My First JavaScript");

        alert("My First JavaScript");

        alert("My First JavaScript");

        alert("My First JavaScript");

        alert("My First JavaScript");*/

    </script>

</head>

<body>

</body>

</html>

3.变量使用

变量是存储信息的容器。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        var x=2;

        var y=3;

        var z=x+y;

        alert(z)

    </script>

</head>

<body>

</body>

</html>

4.函数使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function myFunction(){

            document.getElementById("demo").innerHTML="My First JavaScript Function";

        }

</script>

</head>

<body>

    <h1>My Web Page</h1>

    <p id="demo">A Paragraph</p>

    <button type="button" onclick="myFunction()">Try it</button>

</body>

</html>

三、 DOM

1.什么是DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM （文档对象模型）。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。

HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素。
  • JavaScript 能够改变页面中的所有 HTML 属性。
  • JavaScript 能够改变页面中的所有 CSS 样式。
  • JavaScript 能够对页面中的所有事件做出反应。

2.id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

var x=document.getElementById("intro");

3.标签名查找 HTML 元素

var y=x.getElementsByTagName("p");

4.类名查找 HTML 元素

var x=document.getElementsByClassName("left_float")

第十四篇：JavaScript的更多相关文章

  1. 解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘（译）

    解剖SQLSERVER 第十四篇    Vardecimals 存储格式揭秘(译) http://improve.dk/how-are-vardecimals-stored/ 在这篇文章,我将深入研究 ...

  2. 第十四篇 Integration Services：项目转换

    本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...

  3. Python之路【第十四篇】：AngularJS --暂无内容-待更新

    Python之路[第十四篇]:AngularJS --暂无内容-待更新

  4. 【译】第十四篇 Integration Services：项目转换

    本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...

  5. 跟我学SpringCloud | 第十四篇：Spring Cloud Gateway高级应用

    SpringCloud系列教程 | 第十四篇:Spring Cloud Gateway高级应用 Springboot: 2.1.6.RELEASE SpringCloud: Greenwich.SR1 ...

  6. SpringBoot第二十四篇：应用监控之Admin

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11457867.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言   前一章(S ...

  7. Egret入门学习日记 --- 第十四篇（书中 5.4~5.6节 内容）

    第十四篇(书中 5.4~5.6节 内容) 书中内容: 总结 5.4节 内容重点: 1.如何编写自定义组件? 跟着做: 重点1:如何编写自定义组件? 文中提到了重要的两点. 好,我们来试试看. 第一步, ...

  8. Spring Cloud第十四篇 | Api网关Zuul

    ​ 本文是Spring Cloud专栏的第十四篇文章,了解前十三篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring C ...

  9. Hibernate（十四篇）

    (一)Hibernate简介 (二)hibernate配置管理 (三)Hibernate对象-关系映射文件 (四)Hibernate API详解 (五)Hibernate一级缓存 (六)Hiberna ...

随机推荐

  1. shell编程中的vim命令说明

    vim命令模式:  1.一般命令模式 2.编辑模式 3.底行命令行命令模式 一般命令模式 直接用字符操作编辑模式 可以写文档(跟txt有点像)底行命令模式 先按'ESC',在按下“:”,之后在输出命令 ...

  2. 【读书笔记】你不知道的JavaScript（上卷）--作用域是什么

    第一章 作用域 1.理解作用域 几个名词的介绍 引擎:从头到尾负责整个JavaScript程序的编译及执行过程 编译器:负责语法分析及代码生成器等脏活累活 作用域:负责收集并维护由所有声明的标识符(变 ...

  3. C/C++程序基础 （十一）标准模板库

    标准模板库 标准模板库在标准函数库的定位 迭代器(类似指针)保证算法(常用算法)和容器(数据结构)的结合. vector的实现 底层实现是动态数组,所以支持随机访问. 内部是动态数组,随着insert ...

  4. hdu_5288_OO’s Sequence

    OO has got a array A of size n ,defined a function f(l,r) represent the number of i (l<=i<=r) ...

  5. PHP关于 []

    在一个表格里,提交时,名字部分加一个[],表示数组,这样,存在多个同样名字的name.前面的value不会替代后面value,如下面 <td><input name="so ...

  6. form submit 的callback方法

    参考:http://hayageek.com/jquery-ajax-form-submit/ form的submit方法返回数据处理. 普通的form: $("#ajaxform" ...

  7. 守护进程,进程安全,IPC进程间通讯,生产者消费者模型

    1.守护进程(了解)2.进程安全(*****) 互斥锁 抢票案例3.IPC进程间通讯 manager queue(*****)4.生产者消费者模型 守护进程 指的也是一个进程,可以守护着另一个进程 一 ...

  8. wlr设置 Blog Ping

    ref:http://www.cnblogs.com/zhangyang/archive/2011/07/22/2113856.html 设置 Blog Ping 1.什么是Ping服务(Ping S ...

  9. Android Url相关工具 通用类UrlUtil

    1.整体分析 1.1.源代码查看,可以直接Copy. public class UrlUtil { public static boolean isUrlPrefix(String url) { re ...

  10. 13，发布CRM

    发布CRM你将使用以下软件 nginx uWSGI CentOS7 CRM项目文件 virtualenv supervisor WSGI.uWSGI python web服务器开发使用WSGI协议(W ...