JavaScript的基础语法及DOM元素和事件

时间: 2020-03-26阅读: 890标签: dom

一,JavaScript是什么?

1,JavaScript简称:

js,是一种浏览器解释型语言,嵌套在html文件中交给浏览器解释执行。主要用来实现网页的动态效果,用户交互及前后端的数据传输等。

2,JavaScript 组成

1,核心语法 - ECMAScript (ES5-ES6) 规范了JavaScript的基本语法

2.1 浏览器对象模型 :-BOM Browser Object Model,提供了一系列操作浏览器的方法

2.2 文档对象模型: -DOM Document Object Model ,提供了一系列操作的文档的方法

3. 使用方式

3.1元素绑定事件:

  • 事件 :指用户的行为(单击,双击等)或元素的状态(输入框的焦点状态等)
  • 事件处理:元素监听某种事件并在事件发生后自动执行事件处理函数
  • 常用事件:onclick (单击事件)
  • 语法 :将事件名称以标签属性的方式绑定到元素上,自定义事件处理
<!--实现点击按钮在控制台输出-->
<button onclick="console.log('Hello World');">点击</button>

3.2文档内嵌:使用<script type="text/javascript"></script>标签书写。

<script type="text/javascript">
  alert("网页警告框");
</script>

注意 :<script></script>标签可以书写在文档的任意位置,书写多次,一旦加载到script标签就会立即执行内部的JavaScript代码,因此不同的位置会影响代码最终的执行效果

3.3外部链接:创建外部的JavaScript文件 XX.JavaScript,在html文档中使用<script src=""></script>引入

<script src="index.JavaScript"></script>

注意 :<script></script>既可以实现内嵌 JavaScript 代码,也可以实现引入外部的 JavaScript 文件,但是只能二选一。

3.44 JavaScript 输入和输出语句:

alert("");普通的网页弹框

console.log();控制台输出,多用于代码调试

document.write("<h1>Hello</h1>");实现在动态在网页中写入内容,
可以识别HTML标签,脚本代码可以在文档任何地方书写,如果是普通写入(不涉及事件),
区分代码的书写位置插入

二、基础语法

1.,语法规范:

  1. JavaScript是由语句组成,语句由关键字,变量,常量,运算符,方法组成。

  2. 分号可以作为语句结束的标志,也可以省略

  3. JavaScript严格区分大小写

  4. 注释语法 单行注释使用 // 多行注释使用 /* */

2. JavaScript的变量与常量:

1,变量:


1.1作用 : 用于存储程序运行过程中可动态修改的数据

1.2语法 : 使用关键var声明,自定义变量名

var a;      //变量声明
a = 100;    //变量赋值
var b = 200; //声明并赋值
var m,n,k;  //同时声明多个变量
var j = 10,c = 20; //同时声明并赋值多个变量

1.3 命名规范 :

    1. 变量名,常量名,函数名,方法名自定义,可以由数字,字母,下划线,$组成,禁止以数字开头

    2. 禁止与关键字冲突(var const function if else for while do break case switch return class)

    3. 变量名严格区分大小写

    4. 变量名尽量见名知意,多个单词组成采用小驼峰,例如:"userName"

1.4使用注意 :

变量如果省略var关键字,并且未赋值,直接访问会报错

2,变量使用var关键字声明但未赋值,变量初始值为undefined

3,变量省略var关键字声明,已被赋值,可正常使用,影响变量作用域

2,常量

2.1 作用 : 存储一经定义就无法修改的数据

2.2 语法 : 必须声明的同时赋值

const PI = 3.14;

2.3 注意 :

常量一经定义,不能修改,强制修改会报错

命名规范同变量,为了区分变量,常量名采用全大写字母

2.4操作小数位:

toFixed(n); 保留小数点后 n 位,并且四舍五入。

使用 :

var num = 3.1415926;
//保留当前变量小数点后两位
var res = num.toFixed(2);

3. 数据类型


3.1number 数值类型:

整数

十进制表示

   var a = 100;

八进制表示 以0为前缀

   var b = 021; //结果为十进制的 17

使用 : 整数可以采用不同进制表示,在控制台输出时一律会按照十进制输出

小数:

 var m = 1.2345;

科学计数法 例 : 1.5e3 e表示10为底,e后面的数值表示10的次方数 1.5e3 等价于 1.5 * 10(3)

3.2string 字符串类型:

字符串:由一个或多个字符组成,使用""或''表示,每一位字符都有对应的Unicode编码

var s = "100";
var s1 = "张三";

3.3boolean 布尔类型:

只有真和假两个值,布尔值与number值可以互相转换。true 为 1,false 为 0

var isSave = true;
var isChecked = false;

3.4undefined 特殊值:

变量声明未赋值时显示undefined

var a;
console.log(a);//undefined

3.5null 空类型 :

定义对象引用时使用null,表示对象为空

  • 引用数据类型 主要指对象,函数等
  • 检测数据类型  typeof 变量或表达式  typeof (变量或表达式)
var n = "asda";
console.log(typeof n);//string
console.log(typeof(n));//string

4. 数据类型转换

不同类型的数据参与运算时,需要转换类型

4.1强制类型转换

1,转换字符串类型 方法:toString() 返回转换后的字符串

 var a = 100;
 a = a.toString(); //"100"
 var b = true;
 b = b.toString(); //"true"

2,转换number类型

Number(param) 参数为要进行数据类型转换的变量或值,返回转换后的结果: 如果转换成功,返回number值 如果转换失败,返回NaN,(Not a Number),是非number字符,一律转换失败,返回 NaN

4.2隐式类型转换(自动转换)

  1. 当字符串与其他数据类型进行"+"运算时,表示字符串的拼接,不再是数学运算 转换规则 :将非字符串类型的数据转换成字符串之后进行拼接,最终结果为字符串

  2. 其他情况下,一律将操作数转number进行数学运算

5. 运算符

5.1赋值运算符:

= 将右边的值赋给左边变量

5.2算数运算符:

+ - * / % 加 减 乘 除 取余

5.3符合运算符:

+= -= *= /= %=  

5.4 自增或自减运算符:

++ -- 变量的自增和自减指的是在自身基础上进行 +1或-1 的操作

注意:自增或自减运算符在单独与变量结合时,放前和放后没有区别,如果自增或自减运算符与其他运算符结合使用,要区分前缀和后缀,做前缀,那就先++/--,再进行赋值或其他运算,如果做后缀,就先结合其他运算符,再进行++ / --

5.5关系运算符/比较运算符:

> < 
>= <=
==(相等) !=(相等)
===(全等) !==(不全等)

1,关系运算符用来判断表达式之间的关系,结果永远是布尔值 true/false

2,使用

  • 字符串与字符串之间的比较 依次比较每位字符的Unicode码,只要某位字符比较出结果,就返回最终结果

  • str.charCodeAt(index)

    方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数

    index必需。表示字符串中某个位置的数字,即字符在字符串中的下标。

3,相等与全等

    • 相等:不考虑数据类型,只做值的比较(包含自动类型转换)

    • 全等:不会进行数据类型转换,要求数据类型一致并且值相等才判断全等

5.6逻辑运算符

  1. && 逻辑与 :表达式同时成立,最终结果才为true;1则1

  2. || 逻辑或 :表达式中只要有一个成立,最终结果即为true;有1则1

  3. ! 逻辑非 :对已有表达式的结果取反 注意:除零值以外,所有值都为真

5.7三目运算符:

语法 :

表达式1 ? 表达式2 : 表达式3;

过程 :

判断表达式1是否成立,返回布尔值;

如果表达式1成立,执行表达式2;

如果表达式1不成立,执行表达式3;


三、DOM 元素和事件

什么是事件?:事件是指用户的行为或元素的状态。由指定元素监听相关的事件,并且绑定事件处理函数。

事件处理函数:元素监听事件,并在事件发生时自动执行的操作。


1,事件函数分类

1.1 鼠标事件:

onclick //单击
ondblclick //双击
onmouseover //鼠标移入
onmouseout //鼠标移出
onmousemove //鼠标移动

1.2文档或元素加载完毕:

onload //元素或文档加载完毕

1.3表单控件状态监听:

onfocus //文本框获取焦点
onblur //文本框失去焦点
oninput //实时监听输入
onchange //两次输入内容发生变化时触发,或元素状态改变时触发
onsubmit //form元素监听,点击提交按钮后触发,通过返回值控制数据是否可以发送给服务器


2,获取元素节点

2.1根据标签名获取元素节点列表

var elems = document.getElementsByTagName("");
/*
参数 : 标签名
返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。
*/

2.2根据 class 属性值获取元素节点列表

var elems = document.getElementsByClassName("");
/*
参数 : 类名(class属性值)
返回值 : 节点列表
*/

2.3根据 id 属性值取元素节点:

var elem = document.getElementById("");
/*
参数 : id属性值
返回值 : 元素节点
*/

2.4根据 name 属性值取元素列表:

var elems = document.getElementsByName("");
/*
参数 : name属性值
返回 : 节点列表
*/


3,事件绑定方式

3.1内联方式: 将事件名称作为标签属性绑定到元素上

例 :

<button onclick="alert()">点击</button>

3.2动态绑定 :获取元素节点,动态添加事件

例 :

btn.onclick = function (){

};

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/9129

Js开发者:玩DOM也要专业范儿

原生 DOM API 很棒,而且 非常 有用。是的,它很冗长,但这是因为它们是低级构建块,上面是要构建抽象的。而且如果你真的不想多打字的话:所有现代编辑器和 IDE 都提供出色的代码完成功能。你也可以为最常用的功能加上别名

使用Documentfragment优化DOM操作

DocumentFragment,文档片段接口,一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 使用,就像标准的 document 一样,存储由节点(nodes)组成的文档结构

vue的虚拟DOM有什么好处?

vue 中的虚拟DOM有什么好处?快!首先了解浏览器显示网页经历的5个过程 :1、解析标签,生成元素树(DOM树)2、解析样式,生成样式树3、生成元素与样式的关系

jQuery对象与DOM对象的相互转化

jQuery对象如果想要用 DOM 对象中的方法,就需要转化为 DOM 对象。jQuery对象转化为 DOM 对象有两种方式,DOM 对象如果想要用 jQuery 对象中的方法,DOM 对象就需要转化为 jQuery 对象。

一段监视 DOM 的神奇代码

通过使用此模块,只需将鼠标悬停在浏览器中,即可快速查看DOM元素的属性。基本上它是一个即时检查器。将鼠标悬停在 DOM 元素上会显示其属性!

Vue 数据更新后调用nextTick更新DOM

如果你想基于更新后的 DOM 状态来做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM

整理常见 DOM 操作

框架用多了,你还记得那些操作 DOM 的纯 JS 语法吗?看看这篇文章,来回顾一下~ 操作 className,addClass给元素增加 class,使用 classList 属性

JS DOM元素

js有如下功能:JavaScript 能够改变页面中的所有 HTML 元素;能够改变页面中的所有 HTML 属性;能够改变页面中的所有 CSS 样式;能够对页面中的所有事件做出反应(JS只能操作行内样式,不能操作内嵌样式和外部样式)

jQuery实现DOM元素拖拽交换位置

html + bootstrap布局画3个面板。监听面板的的 mousedown事件。记录当前对应面板的位置target_index,设置面板透明拖动。监听当前被拖动的面板的mousemove事件。

JS中的DOM

$(document).ready():简写为$(function(){}) DOM结构绘制完成执行,而无需等到图片或其他媒体下载完毕;window.onload=function(){}:必须等到页面内包括图片的所有元素加载完毕后才能执行;

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!