包装类

在JS中为我们提供了三个包装类：
String() Boolean() Number()
通过这三个包装类可以创建基本数据类型的对象
例子：

1
2
3
 
var num = new Number(2);  
var str = new String("hello");  
var bool = new Boolean(true);

但是在实际应用中不会这样使用。

当我们去操作一个基本数据类型的属性和方法时，
解析器会临时将其转换为对应的包装类，然后再去操作属性和方法，
操作完成以后再将这个临时对象进行销毁。

Date

日期的对象，在JS中通过Date对象来表示一个时间

创建对象

创建一个当前的时间对象

1
 
var d = new Date();

创建一个指定的时间对象

1
 
var d = new Date("月/日/年 时:分:秒");

方法：

详见文档

Math

Math属于一个工具类，它不需要我们创建对象，它里边封装了属性运算相关的常量和方法
我们可以直接使用它来进行数学运算相关的操作

方法：

详见文档

字符串的相关的方法

详见文档

正则表达式

正则表达式用来定义一些字符串的规则，程序可以根据这些规则来判断一个字符串是否符合规则。
也可以将一个字符串中符合规则的内容提取出来。
创建正则表达式
var reg = new RegExp("正则","匹配模式"); 注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用正则中的 \ 则需要使用 \\ 来代替。（看输出结果，正则中需要输出 \. 才可以表示普通的 . 字符，而在字符串中写 \. 只会输出 . ，所以要写 \\.）

var reg = /正则表达式/匹配模式

匹配模式：
i:忽略大小写
g:全局匹配模式（使用它是因为正则中默认只匹配1次）
设置匹配模式时，可以都不设置，也可以设置1个，也可以全设置，设置时没有顺序要求

具体语法，详见文档

DOM

DOM------>用来操作网页
DOM中的对象和网页是一一对应的关系

文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。
如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载，
此时将会无法正常获取到DOM对象，导致DOM操作失败。
解决方式一：
可以将js代码编写到body的下边

1
2
3
4
5
6
7
8
9
10
 
<body>  
　　<button id="btn">按钮</button>  
  
　　<script>  
　　　　var btn = document.getElementById("btn");  
　　　　btn.onclick = function(){  
		  
　　　　};  
　　</script>  
</body>

解决方式二：
将js代码编写到window.onload = function(){}中
window.onload 对应的回调函数会在整个页面加载完毕以后才执行，
所以可以确保代码执行时，DOM对象已经加载完毕了

1
2
3
4
5
6
7
 
<script>  
    window.onload = function(){  
        var btn = document.getElementById("btn");  
        btn.onclick = function(){  
        };  
    };  
</script>

事件

绑定事件的方式：
1.可以在标签的事件属性中设置相应的JS代码
例子：

1
 
<button onclick="js代码。。。">按钮</button>

2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件
例子：

1
2
3
4
5
6
7
 
<button id="btn">按钮</button>  
<script>  
    var btn = document.getElementById("btn");  
    btn.onclick = function(){  
  
    };  
</script>

DOM查询

在网页中浏览器已经为我们提供了document对象，
它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。

获取元素节点（通过document对象调用）

根据元素的id属性查询一个元素节点对象：
document.getElementById("id属性值");

根据元素的name属性值查询一组元素节点对象:
document.getElementsByName("name属性值");

根据标签名来查询一组元素节点对象：
document.getElementsByTagName("标签名");
-这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到该数组对象中，即使查询到的元素只有一个，也会封装到数组中返回

读取元素的属性

语法：元素.属性名
例子：　ele.name
　　　　ele.id
　　　　ele.value
　　　　ele.className
注意：class属性不能采用这种方式，
读取class属性时需要使用 元素.className

innerHTML

使用该属性可以获取或设置元素内部的HTML代码，会获取到html标签

innerText

使用该属性可以获取或设置元素内部的文本内容
它和innerHTML相似，不同的是它会自动将html标签去除，如果使用这两个属性来设置标签内部的内容时，没有任何区别

读取元素的文本内容的其他方法（推荐使用上方两个inner属性，这个仅作了解）

元素.firstChild.nodeValue

获取元素节点的子节点（通过具体的元素节点调用）

返回当前节点的指定标签名后代节点：（方法）
getElementsByTagName("标签名");

表示当前节点的所有子节点：（属性）
childNodes
childNodes属性会获取包括文本节点在内的所有节点，根据DOM标准。标签间的空白也会被当成文本节点

获取当前元素的所有子元素：（属性）
children

表示当前节点的第一个子节点：（属性）
firstNodes

获取当前元素的第一个子元素：（属性，不支持IE8）
firstElementChild

表示当前节点的最后一个子节点：（属性）
lastChild

获取父节点和兄弟节点（通过具体的元素节点调用）

表示当前节点的父节点：（属性）
parentNode

表示当前节点的前一个兄弟节点：（属性）
previousSibling

获取当前元素的前一个兄弟元素：（属性，不支持IE8）
previousElementSibling

表示当前节点的后一个兄弟节点：（属性，不支持IE8）
nextSibling

学识浅薄，如有错误，恳请斧正，在下不胜感激。

JS基础学习第七天的更多相关文章

  1. JS基础学习——对象

    JS基础学习--对象 什么是对象 对象object是JS的一种基本数据类型,除此之外还包括的基本数据类型有string.number.boolean.null.undefined.与其他数据类型不同的 ...

  2. JS基础学习——闭包

    JS基础学习--闭包 什么是闭包 闭包的定义如下,它的意思是闭包使得函数可以记住和访问它的词法范围,即使函数是在它声明的词法范围外执行.更简单来讲,函数为了自己能够正确执行,它对自己的词法范围产生闭包 ...

  3. JS基础学习——作用域

    JS基础学习--作用域 什么是作用域 变量的作用域就是变量能被访问到的代码范围,比如在下面的这个js代码中,变量a的作用域就是函数foo,因此在全局作用域内的console.log(a)语句不能访问到 ...

  4. JS 基础学习随想

    2012年就已经接触过了js,给我的印象:这是一门谈不上复杂的语言．大概这就是所谓的学的越浅,用的越少,觉得自己会的东西好像得更多吧!开始做基础练习题的时候觉得好像都十分简单．可是后来在做到对象数组的 ...

  5. handlebars.js基础学习笔记

    最近在帮学校做个课程网站,就有人推荐用jquery+ajax+handlebars做网站前端,刚接触发现挺高大上的,于是就把一些基础学习笔记记录下来啦. 1.引用文件: jquery.js文件下载:h ...

  6. JS基础学习1

    1 JS 概述 一个完整的javascript实现是由以下3个不同部分组成的: (1)     核心(ECMAscript) (2)     文档对象模型(DOM)  Document object ...

  7. js基础学习笔记（零七）

    indexOf() 方法 返回某个指定的字符串值在字符串中首次出现的位置. 语法: stringObject.indexOf(substring, startpos) 参数说明: 注意:如果要检索的字 ...

  8. JS基础学习篇（一）

    近来一直在学习js和jquery.刚刚进入前端工作还没有多久,虽然大学里学习的是编程自认为也学的还可以,但前端接触的不多,一直认为前端十分简单.其实不然,特别是工作的时候要自己设计一个完整的项目前端, ...

  9. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

随机推荐

  1. 交易所频频跑路？Baccarat去中心化交易平台助力资金安全

    过去,黑客攻击可能是交易所跑路的最常见原因.自OKEx事件以来,这些交易所暂停提币或跑路还多了一个原因,就是因创始人正在协助调查. 据不完全统计,自OKEx于10月16日宣布暂停提币后不到两个月,已经 ...

  2. linux DRM 之 GEM 笔记

    原文链接:https://www.cnblogs.com/yaongtime/p/14418357.html 在GPU上的各类操作中涉及到多种.多个buffer的使用. 通常我们GPU是通过图像API ...

  3. python 第三方库paramiko

    目录 介绍 三种常用方式 使用密码进行登录 使用密钥免密码登录 SFTP 传输文件 terminal demo 介绍 paramiko是什么可以参考其他人的博客或文章,这里不再赘述,直入正题. 本次测 ...

  4. 启动Turtlesim，输入roscore命令，报错

    Error: Traceback (most recent call last):   File "/opt/ros/indigo/lib/python2.7/dist-packages/r ...

  5. 学习java的第二天

    Java第二天 标识符 标识符开头只能以字母和_开头 严格区分大小写 不能以关键词命名 变量 变量是什么:就是可以变化的量 Java是一种强类型语言,定义变量必须声明后才能使用 Java变量是程序中最 ...

  6. 后端程序员之路 2、nginx、php

    nginx是由俄罗斯人开发的一种实现web服务器的工具,主要是为俄罗斯的第三大门户网站实现反向代理加速的服务器. Linux(CentOS)下,下载安装Nginx并配置 - jtlgb - 博客园ht ...

  7. go中waitGroup源码解读

    waitGroup源码刨铣 前言 WaitGroup实现 noCopy state1 Add Wait 总结 参考 waitGroup源码刨铣 前言 学习下waitGroup的实现 本文是在go ve ...

  8. Fisco bcos 区块链-分布式部署

    Fisco bcos 区块链-分布式部署 前置条件:mysql配置成功. 节点搭建 cat > ipconf << EOF 127.0.0.1:1 agencyA 1 127.0.0 ...

  9. ASP.NET Core 在 .NET 6 Preview 2 中的更新

    原文:<ASP.NET Core updates in .NET 6 Preview 2>,作者 Daniel Roth .NET 6 预览版 2 现已推出,其中包括许多对 ASP.NET ...

  10. vue全家桶和react全家桶

    vue全家桶:vue  +  vuex (状态管理)  + vue-router (路由) + vue-resource +axios +elementui react全家桶 : react + re ...