JavaScript学习笔记

时间：2019-12-23 09:38:18 阅读：92 评论：0 收藏：0 [点我收藏+]

JavaScript 笔记

基本数据类型转换

数据类型转换整数
Number(var)

parseInt(var)

parseFloat(var)
"100" - 0 (* / %)
// 此方法可以快速获得整数
var number = '123' - 0
// 返回的是一个123的整数 * / % 都可以
数据类型转换字符串

String(var)

var.toString()

此方法可以转换进制

例: var.toString(16)转换成16进制

只要 + 有一边是字符串就会进行字符串拼接

数据类型转换布尔型

Boolean(var)

非0都是true

基础函数

typeof(var)type 返回数据类型

console.log(var) 打印到控制台

isNaN(var)Bool 判断是否为数字

数组

数组的声明

var arr = [] 声明一个空数组

var arr = new array() 声明一个数组指针

常用方法
arr.push(var) 添加数据到末尾

arr.[arr.length] = var 非常规写法

arr.pop(var) 取出末尾数据,返回数据

arr.unshift(var) 添加头部数据

arr.shift()var 取出头部数据,返回数据

arr.concat(arr1,arr2)arr 数组合并,返回新数组

arr.splice(index,number)arr 截取数组数据并返回一个新数组,会改变原始数组

arr.splice(index,number,newdata)arr 改变原始数组并可以替换数据

arr.reverse() 反转数组
arr.sort 数组按位排序
按照数字大小排列升序,如果降序则 b - a
var arr = [9,8,5,2,1,3,4]
arr.sort(function(a,b){
    return a - b
})
arr.join(‘var‘)string 把数组链接成字符串,var则代表用什么链接
var arr = [1,2,3,4,5]
var str = arr.join('-')
console.log(str)
// console.info ==> '1-2-3-4-5'
arr.slice(headIndex,tailIndex)arr 把数组切片并返回一个数组
ES5数组方法
arr.indexOf(var)int32 *查看数组中是否由该数据,返回位置index,如果返回 -1 则表示数据不存在
arr.forEach(function(){}) 遍历数组
var arr = [1,2,3,4,5,6]
arr.forEach(function(item,index,arr){
    // 第三个参数为原始数组
    console.log(index + ':' + item)
})
// return
// 0:1
// 1:2
// ...
arr.map(function(){})arr 映射数组
var arr = [1,2,3,4,5]
var newarr = arr.map(function(item,index){
    return item + 1
})
console.log(newarr)
console.log(arr)
// 如果item +'1' 则数据会变成字符串
// 如果item + 1 则数组内的数字会相加
// 不会改变原始数组
arr.filter(function(){})arr 筛选数据并返回新数组
var arr = [1,2,3,4,5,6,7]
var newarr = arr.filter(function(item,index){
    return item > 2
})
console.log(newarr)
// 会返回大于2的数据
arr.some(function(){})Bool 遍历数组并判断数据,只要有一项满足就会返回true
var arr = [1,2,3,4,5,6,7]
var newarr = arr.some(function(item,index){
    return item > 6
})
console.log(newarr)
// 返回true 因为 7 > 6
arr.every(function(){})Bool 遍历数组并判断数据,只要有一项不满足就会返回false,代码参照上一层
forin 循环,一般用来遍历对象

for (var item in object){ 拿到的item是key object[item]}

字符串

字符串的声明

var str = ‘‘ 声明一个空字符串

var str = "" 声明一个空字符串,与上一层等价

var str = new string(‘str‘) 声明一个字符串指针
字符串常用方法
string.length 使用时转换成了object,返回字符串的长度
string.charAt(index)string 按照索引查找字符串的内容,如果找到就返回数据,如果没有找到返回空字符串
var str = '今天天气不错呢'
var newstr = str.charAt(1)
console.log(newstr)
// 返回了 '天'
// 如果索引值超出则返回 ''
string.charCodeAt(index)unicode 按照索引查找字符串的内容,并返回unicode编码值.如果没有找到就返回空字符串
var str = '今天天气不错呢'
var newstr = str.charCodeAt(1)
console.log(newstr)
// 返回了 22825
string.substring(headIndex,tailIndex)string 截取字符串并返回新字符串
  var str = '今天天气不错呢'
  var newstr = str.substring(0,5)
  console.log(newstr)
  // 返回 '今天天气不'
  // 如果索引超出了字符串的最大长度 则全部返回
  // 如果tailIndex为空 则全部返回
string.substr(headIndex,howManyNumber)string 截取字符串并返回新字符串
var str = '今天天气不错呢1'
var newstr = str.substr(2,5)
console.log(newstr)
// 返回 '天气不错呢'
string.concat(string ...)string 拼接字符串 注意: string + string 等价

string.slice(headIndex,tailIndex)string 截取字符串,切片形式

string.split(‘,‘)string 切割字符串,如果参数为空‘‘,则返回字符数组,如果为‘,‘则返回去掉‘,‘的字符数组

string.toLowerCase()string 转换字符串为小写

string.toUpperCase()string 转换字符串为大写
string.replace(oldstr,newstr)string 替换字符串内容,只替换一次,可以使用正则来全局替换
var str = '今天的天气真的很不错呢,天气特别棒'
var newstr = str.replace(/天气/g,'日')
console.log(newstr)
// 返回 '今天的日真的很不错呢,日特别棒'
string.indexOf(string)int32 查找字符串中是否该内容,如果找到返回索引 index ,找不到则返回 -1

此函数接收两个参数,第二个参数可以设置区间

Math 数学包

Math.random() 返回 0 ~ 0.99999 的随机数字

Math.round(number) 返回四舍五入取整的数字

Math.ceil(number) 返回向上取整 1.1 = 2

Math.floor(number) 返回向下取整 1.9 = 1

Math.pow(number,次幂) 返回取幂

Math.sqrt(number) 返回平方根

Math.abs(number) 返回绝对值 绝对值为去掉数字符号的数字,比如去掉负数变为正整数

Math.max(number ...) 返回最大值

Math.min(number ...) 返回最小值

Math.PI() 返回 Π

时间操作

new Date() 返回当前时间对象
var time = new Date()
console.log(time)
// 返回 Mon Dec 23 2019 03:33:13 GMT+0800 (中国标准时间)
var time = new Date(2019,0,1,15,33,45)
console.log(time)
// 返回 Tue Jan 01 2019 15:33:45 GMT+0800 (中国标准时间)
// 需要注意的是0为月份 月份 0 = 1

var time = new Date('2019-01-03 22:22:22')
console.log(time)
// 返回 Thu Jan 03 2019 22:22:22 GMT+0800 (中国标准时间)
// 也可以传入字符串
时间获取操作函数

var time = new Date() 首先假定赋值当前时间给time

time.getFullYear()number 返回时间对象的年份

time.getMonth()number 返回时间对象的月份 需要注意的是如果返回 0 则是 1 月 ,以此类推

time.getDate()number 返回时间对象的多少号

time.getHours()number 返回时间对象的小时

time.getMinutes()number 返回时间对象的分钟

time.getSeconds()number 返回时间对象的秒数

time.getDay()number 返回一周中的第几天 需要注意的是 0 为周日
时间设置操作函数
var time = new Date() 首先假定赋值当前时间给time

time.setFullYear(number) 设置时间对象的年份

time.setMonth(number) 设置时间对象的月份 注意 0 = 1月的问题

time.setDate(number) 设置时间对象的多少号

time.setHours(number) 设置时间对象的小时

time.setMinutes(number) 设置时间对象的分钟

time.setSeconds(number) 设置时间对象的秒
time.setTime(时间戳) 设置时间戳 时间戳为按照毫秒从1970年计算的日期
var time = new Date()
time.setTime(1577044288266)
console.log(time)
// 返回 Mon Dec 23 2019 03:51:28 GMT+0800 (中国标准时间)

BOM(Borwser Object Model)

窗体操作
window.innerWidth 返回浏览器窗体的宽 包含了滚动条的宽度

window.innerHeight 返回浏览器窗体的高 包含了滚动条的高度

window.alert(content) 浏览器提示框

window.confirm(content)Bool 浏览器的询问框,返回布尔类型 确定=true,取消=false

window.prompt(alert,content)content 浏览器的输入框,返回输入的内容,如果空则返回空字符串,取消返回null
window.location *返回了一个对象,对象内的href = 当前页面的地址栏地址如果给href赋值,则会直接跳转 location.reload()则会重新加载页面
window.location.href = 'https://www.baidu.com'
// 会直接跳转页面到百度
window.open(URL) 此方法会打开一个URL
<div>跳转百度</div>
<script>
    var newdiv = document.querySelector('div')
    newdiv.addEventListener('click',function(){
    window.open("https://www.baidu.com")
})
</script>

window.close() 关闭当前页面
操作历史记录

window.history 返回一个历史记录对象 ?

window.history.back() && window.history.go(-1) 浏览器网址后退(如果可以的话)

window.history.forward() && window.history.go(1) 浏览器网址前进(如果可以的话)

浏览器

window.navigator 返回一个浏览器对象

window.navigator.userAgent *返回浏览器的版本信息

window.navigator.appName 返回浏览器的内核版本信息(除了IE都是网景,为了致敬)

window.navigator.appVersion 返回浏览器的版本号

window.navigator.platform 返回客户端的操作系统(经常不准)

定时器

创建定时器
setInterval(function(){},毫秒) 每隔多少毫秒会执行一次,返回定时器的ID
var intervalID = setInterval(function(){
    console.log('hello world')
    console.log(intervalID)
},1000)
// 每隔一秒钟返回 hello world 和 1
setTimeout(function(){},毫秒) 倒计时定时器,只会执行一次,返回定时器ID
关闭定时器

clearInterval(定时器ID) 关闭间隔定时器

clearTimeout(定时器ID) 关闭倒计时定时器

浏览器的常见事件

window.onload 会在所有资源加载完毕后触发

window.onscroll 会在浏览器滚动的时候触发

window.onsize 会在浏览器改变尺寸大小的时候触发

document.documentElement.scrollTop 获取浏览器卷起的页面文档尺寸

document.body.scrollTop 获取html内body被卷起的尺寸

DOM(Document Object Model)

document API

document.documentElement 返回html标签

document.head 返回head标签

ducument.body 返回body标签

document.getElementById(‘ID‘) 通过ID返回标签信息

document.getElementsByClassName(‘class‘) 通过class返回标签伪数组

document.getElementByTagName(‘TAG Name‘) 通过标签名返回标签伪数组

document.getElementByName(‘name‘) 通过标签的name属性返回标签伪数组

document.querySelector(‘CSS‘) 按照书写CSS的方式获取标签,只能获取到满足选择器的第一个标签

document.querySelectorAll(‘CSS‘) 按照书写CSS的方式获取标签,返回所有满足条件的标签伪数组
标签 | 元素 API
标签.innerHTML 返回该标签内部的所有结构 可以进行写入赋值

标签.innerTEXT 返回该标签内部的文本内容 可以进行写入赋值

标签.style 返回一个标签的行内样式 可以进行写入赋值

标签.className 返回一个标签的class 可以进行写入赋值

标签.getAttribute(属性名) 返回一个标签的属性

标签.setAttribute(属性名,值) 设置一个标签的属性

标签.removeAttribute(属性名) 删除标签的属性
标签.childNodes 返回标签下的所有子节点 回车和空格也会返回
<body>
    <div id="newdiv" class="div1" style="width: 200px;height: 200px;background-color: skyblue;">
        <span>百度</span>
        <span>谷歌</span>
        <p>呵呵</p>
</div>
<script>
    var div = document.querySelector('div')
    var childs = div.childNodes
    childs.forEach(function(item){
        console.log(item)
    })
</script>
</body>

标签.children 返回标签内的所有子标签
<body>
    <div id="newdiv" class="div1" style="width: 200px;height: 200px;background-color: skyblue;">
        <span>百度</span>
        <span>谷歌</span>
        <p>呵呵</p>
    </div>
    <script>
        var div = document.querySelector('div')
        var childs = div.children
        for (var i = 0;i<childs.length;i++){
            console.log(childs[i])
        }
    </script>
</body>

标签.firstChild 返回标签内的第一个子节点 回车和空格也会返回

标签.firstElementChild 返回标签内的第一个子标签

标签.lastChild 返回标签内的最后一个子节点

标签.lastElementChild 返回标签内的最后一个子标签

标签.previousSibling 返回标签的上一个兄弟节点,如果没有返回null 回车和空格也会返回

标签.nextSibling 返回标签的下一个兄弟节点,如果没有返回null 回车和空格也会返回

标签.previousElementSibling 返回标签的上一个兄弟标签,如果没有返回null

标签.nextElementSibling 返回标签的下一个兄弟标签,如果没有返回null

标签.parentNode 返回标签的父节点

标签.attributes 返回标签的所有属性节点
节点操作 | Node Handle

nodeType 节点类型

标签节点 = 1

属性节点 = 2

文本节点 = 3

注释节点 = 8

nodeName 节点名称

标签节点 = 大写的标签名 P | DIV | SPAN | ...

属性节点 = 属性名

文本节点 = #text

注释节点 = #comment

nodeValue 节点值 标签节点没有节点值

标签节点 = null

属性节点 = 属性值

文本节点 = 文本内容(包含换行和空格)

注释节点 = 注释内容(包含换行和空格)

document.createElement(标签名) 创建一个标签节点

document.createTextNode 创建一个文本节点

标签.appendChild(节点) 在标签内部的尾部添加一个子节点

标签.insetBefore(标签,新标签) 在标签内部的子节点前面添加一个子节点

标签.replaceChild(新节点,旧节点) 替换标签内部的某一个子节点为新节点

标签.removeChild(子节点) 删除一个子节点

标签.cloneNode(true | false) 克隆节点,true克隆子节点,默认flase为不克隆子节点

document.createDocumentFragment() 返回一个document缓存,减少写页面的次数

标签.clientWidth 返回标签边框以内的区域 (Width + padding)

标签.clientHeight 返回标签边框以内的区域 (Height + padding)

标签.offsetLeft ↓

如果有定位则返回与父级左边框的距离 (left值)

如果没有定位则返回与页面左边的距离

标签.offsetTop ↑

标签.offsetWidth 返回标签的 width + padding + border

标签.offsetHeight 返回标签的 height + padding + border

获取页面的尺寸

document.documentElement.clientWidth 获取页面不包含滚动条的宽度

document.documentElement.clientHeight 获取页面不包含滚动条的高度

常用事件

鼠标事件

click 鼠标左键单击

mousedown 鼠标左键按下

mouseup 鼠标左键抬起

mousemove 鼠标移动

mouseover 鼠标移入 冒泡

mouseout 鼠标移出 冒泡

mouseenter 鼠标移入

mouseleave 鼠标移出

dbclick 鼠标双击

contextmenu 鼠标右击

键盘事件

keyup 按键抬起

keydown 按键按下

keypress 按键按下后抬起(完整动作)

浏览器事件

load 浏览器载入完毕

resize 浏览器尺寸更改

scroll 浏览器滚动条滚动

表单事件

input 表单输入

change 表单改变,失去焦点时触发

blur 表单失去焦点

forcus 表单获得焦点

submit 表单提交

触摸事件(Cell Phone)

touchstart 点触

touchmove 移动

touchend 抬起

其他事件

transitionend

animationend

事件对象

window.event 用来在事件里获取事件信息的对象

JavaScript学习笔记

原文：https://www.cnblogs.com/dyjn/p/12081913.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

JavaScript学习笔记

JavaScript 笔记

基本数据类型转换

数据类型转换整数

数据类型转换字符串

数据类型转换布尔型

基础函数

数组

数组的声明

常用方法

ES5数组方法

forin 循环,一般用来遍历对象

字符串

字符串的声明

字符串常用方法

Math 数学包

时间操作

时间获取操作函数

时间设置操作函数

BOM(Borwser Object Model)

窗体操作

操作历史记录

浏览器

定时器

创建定时器

关闭定时器

浏览器的常见事件

DOM(Document Object Model)

document API

标签 | 元素 API

节点操作 | Node Handle

获取页面的尺寸

常用事件

鼠标事件

键盘事件

浏览器事件

表单事件

触摸事件(Cell Phone)

其他事件

事件对象

`forin` 循环,一般用来遍历对象