目录
JavaScript内置对象+this和自定义属性+DOM
1、JavaScript内置函数（1）
时间对象、字符串对象
JS中内置了17个对象，常用的是Array对象、Date对象、正则表达式对象、string对象、Global对象 。
创建时间对象：new Date() 获取当前系统时间，控制台打印(console.log(new Date())如下
1.1 获取系统时间
- get/setFullYear(): 返回或设置年份，用四位数表示。
- get/setMonth(): 返回或设置月份。0为一月，比实际少1个月
- get/setDate()：返回或设置日期。
- get/setDay()：返回或设置星期 0为星期天
- get/setHours(): 返回或设置小时，24小时制
- get/setMinutes(): 返回或设置分钟数。
- get/setSeconds(): 返回或设置秒钟数。
- get/setTime(): 返回或设置时间（毫秒为单位）
1.2 获取系统时间-特定格式
- toDateString()：Tue Nov 27 2019
- toLocaleDateString()： 2018/11/27
- toTimeString()：14:34:25 GMT+0800 (中国标准时间)
- toLocaleTimeString()：下午2:35:06
- toLocaleString(): 2018/11/27 下午2:35:05
如果上面的格式不能满足要求，就需要获取单个的时间进行拼接。
1.3 倒计时
倒计时原理：时间差 = 未来时间-当前时间
设置未来时间：
var oDate = new Date(2018,11,12,0,0,0);
var oDate = new Date('2018,12,12,00:00:00');
var oDate = new Date('Wed Dec 12 2018 00:00:00');时间差是两个时间的毫秒数，需要转换成对应的年月日
1.4 string对象
创建字符串对象
var str1 = 'abc';//字面量的方式进行为变量赋值 typeof
var str2 = String('aaa');//String 方法执行完的 return
var str3 = new String('cba');1.5 string对象方法
length属性：获取字符串的长度
charAt(下标)：获取对应位置的字符
indexOf(str[,index])：返回某个指定的字符串值在字符串中首次出现的位置
lastIndexOf(str[,index])：返回某个指定的字符串值在字符串中最后一次出现的位置
substring([start,[stop]])：截取字符串,从start到stop,包括开始不包括结束 。
slice([start,[stop]]) : 截取字符串
slice与substring的区别在于当接收的参数是负数时，slice会将它字符串的长度与对应的负数相加，结果作为参数。substring则干脆将负参数都直接转换为0
toUpperCase: 转换为大写
toLowerCase:转换为小写
split(分割标准，[数组的长度]) ： 将字符串按特定标志分割成数组
replace（被替换的字符串，替换的字符）: 替换特定的字符
search(): 用于检索字符串中指定的子字符串
match(): 可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
2、this和自定义属性
this、自定义属性、自定义索引
2.1 循环控制语句-for-in
对象是没有length属性的，因此不方便通过for循环进行遍历
for-in专门用于遍历对象
for(变量(存放对象的属性) in 遍历的对象){ 循环体 }
var person = { 'age':18,'sex':'女'}
for(var key in person){
console.log(key+"--------------"+person[key]);
}注意：获取出来的属性(key)是字符串，【.】后面接字符串用[]代替
2.2 循环控制语句-while与do-while
while与do-while与for一样，都是循环，就是语法不同
while语法：
初始化循环变量；while(结束循环的条件){ 循环体；更新循环变量；}
do-while语法：
初始化循环变量；do{ 循环体；更新循环变量；}while(结束循环的条件)；
两者的区别：当第一次就不满足条件时，do-while会执行一次，因为do-while先执行后判断。
2.3 其他-break与continue
break：用于循环中，直接结束循环
continue：用于循环中，结束本次循环
for(var i = 0;i<10;i++){
if(i == 5){
break；//当i等于5，结束循环，后面代码不会执行
continue；//结束本次循环，后面代码不会执行，直接开始下一次循环
}
console.log（“第”+i+“圈”）；
}2.4 函数中的this
this的指向在函数定义的时候是确定不了的。
这个属性（变量、函数） 属于谁（对象），则this指的就是谁，事件可以改变函数当中的this指向
this的位置不同，指向也不同
在全局中，this指向window
在事件函数中，this指向的是触发事件的对象
谁触发事件，this指向谁
2.5 自定义属性的使用
自定义属性*
语法：元素.自定义属性名=自定义属性值
在标签上设置的自定义的属性，目前js获取不到
再早叫预定义属性
获取自定义属性：元素.自定义属性名
2.6 使用自定义属性实现选项卡
自定义索引值
for(var i=0;i<li.length;i++){
li[i].index=i;
li[i].onclick=function(){
console.log(this.index)；
//在点击事件中，获取不到每一个i值
}
}3、JavaScript内置函数（2）
数组对象、Math对象
3.1 数组对象-创建
数组：存储数据的容器，可以存储任意数据类型。
创建数组对象：
字面量创建：[1,true,[],{},'a']
构造函数创建：new Array(1,2,3,4)
new Array（4）：创建一个长度为4的空数组
构造函数创建：Array（1,2,3,4）
3.2 数组方法-添加删除
push() ：向数组的末尾添加一个或多个元素，并返回新的长度
pop()：删除并返回数组的最后一个元素
unshift()：向数组的开头添加一个或更多元素，并返回新的长度。
shift()： 删除并返回数组的第一个元素
splice()：向/从数组中添加/删除项目，然后返回被删除的项目。
3.3 数组方法-删除、替换、插入
splice(index,howmany,item1,.....,itemX)：向/从数组中添加/删除项目
删除数组元素：splice(1,3) 从下标为1开始，删除3个数组元素
替换数组元素：splice(1,2,'a','b') 从下标为1开始，删除2个数组元素，使用字符a，b代替删除的元素。
插入数组元素：splice(1,0,'a') 从下标为1开始，删除0个，字符a插入在下标为1 的位置，其他的数组元素往后移动
3.4 数组方法-排序
JavaScript排序算法
选择排序算法：拿其中一个和后面所有的进行比较
冒泡排序算法：相邻的两个进行比较
sort()：对数组的元素进行排序
[11,2,7,5].sort() : 11 2 5 7 默认按字符方式排序
sort(function(a,b)){
return a-b; //从小到大排序
return b-a; //从大到小排序
}3.5 数组方法
join(): 将数组按特定标志组合成字符串
reverse(): 将数组倒序表示
concat()： 将多个数组组合成一个新数组返回
indexOf()：在数组中查找指定的元素，找到返回对应的位置，找不到返回-1
slice()：从已有的数组中返回选定的元素。
3.6 数组迭代方法
every ：针对数组元素做些判断，如果结果都为true 则返回的结果为true
some : 针对数组元素做些判断，如果结果有一个为true 则返回的结果为 true
filter : 针对数组元素做些判断,满足条件的元素，会组成一个新的数组，并且返回
map ： 返回一个新的数组
forEach : 没有返回值，就是一个简单的循环
3.7 Math对象方法
Math.floor()：向下取整，去掉小数部分
Math.ceil()：向上取整，去掉小数部分
Math.round()：四舍五入
Math.max()：获取数组序列中最大的值
Math.min()：获取数组序列中最小的值
Math.pow()：计算某个数组的次方数
Math.sqrt()：开根号
Math.random()：生成一个0-1之间的随机数
3.8 Math对象方法-random
Math.random()：生成一个0-1之间的随机数
生成0-x之间的随机数：
parseInt(Math.random()x)生成x-y之间的随机数:
parseInt(Math.random()(y-x)+x)4、DOM
Document Object Model
文档 对象 模型
DOM：Document Object Model 文档/对象/模型(表现端)
节点的层次
DOM将HTML描绘成了一个由多层次节点构成的结构
每个HTML文档有且仅有一个根节点，称之为 文档节点，即html
4.1 DOM节点层次
children：非标准属性，返回指定元素的子元素集合
oDiv.children ：[ p, span]
childNodes：标准属性，返回指定元素子元素集合 （标准浏览器下会获取到折行）
oDiv.childNodes：[text, p, text, span, text]
nodeType：返回节点类型
1：标签节点
2：属性节点
3：文本节点
nodeName：返回节点名称（标签名）
nodeValue：获取/设置文本节点内容，不能识别标签
parentNode：获取元素的父元素
offsetParent：获取定位父元素
通过offsetParent获取父元素，如果没有定位父元素，会找到body
firstChild/firstElementChild：第一个子元素/子节点
lastChild/lastElementChild：最后一个子元素/子节点
nextSibling/nextElementSibling：下一个元素/节点
previousSibling/previousSibling：前一个元素/节点
//firstChild标准浏览器会获取到空行，firstElementChild是专门解决这个问题的，但是两者不能共用。
兼容：父元素.firstElementChild || 父元素.firstChild
4.2 DOM元素操作
1.创建标签节点
document.createElement（'标签名'）2.创建文本节点
document.createTextNode（'文本内容'）3.添加标签内容
节点.appendChild（文本节点）
节点.innerHTML4.在父元素末尾追加节点
父元素.appendChild（子节点）5.在某个元素之前加入节点
父元素.insertBefore(newChild,refChild)注意：参数必须是节点，添加一个已经存在的节点，会发生物理位移
6.删除节点
元素.remove()：删除当前元素
父元素.removeChild（子节点）：删除父元素中的子元素7.替换节点
父元素.replaceChild(newChild，refChild)8.克隆节点
节点.cloneNode（boolean）
//false：复制标签,没有内容
//true ：既有标签又有内容
9.获取节点属性：元素.getAttribute（属性名）
10.设置节点属性：元素.setAttribute(属性名，属性值)
*和 元素.属性名 获取属性的区别*
<div id="box" class="box" tag="1"></div>
元素.属性名 ：不能获取自定义的属性
元素.getAttribute（属性名）：可以获取自定义的属性
4.3 DOM获取表格的方式
表格.tHead : 获取表格thead
表格.tFoot : 获取表格tfoot
表格.tBodies : 获取表格tbody，获取到的是个元素集合，需要同[]获取
表格.rows：获取整个表格tr
表格.tBodies[0].rows：获取body中的tr
表格.rows[0].cells ：获取单元格，单元格必须通过行获取
表格.tBodies[0].insertRow()：添加表格元素
表格.rows[0].deleteRow（下标）：删除表格元素
let table = document.getElementById('myTable'); // 获取表格元素
let thead = table.tHead; // 获取表头
let tfoot = table.tFoot; // 获取表尾
let tbodies = table.tBodies; // 获取表体集合
let rows = table.rows; // 获取所有行
let tbodyRows = table.tBodies[0].rows; // 获取第一个表体的所有行
let cells = table.rows[0].cells; // 获取第一行的所有单元格
let newRow = table.insertRow(); // 在表格的最后添加一行
let newCell = newRow.insertCell(); // 在新行的最后添加一个单元格
newCell.textContent = 'New cell'; // 设置新单元格的文本内容
table.deleteRow(0); // 删除表格的第一行
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
