1. String
属性
length
方法
indexOf()
lastIndexOf()
substr(start, length)
substring(start, end)
slice(start, end)
split()
toUpperCase()
toLowerCase()
replace(旧,新)
trim()
search() 返回第一次匹配的位置 否则 -1
match() 返回数组 第一次匹配的内容 和 位置
2. Number
属性
Number.MAX_VALUE
Number.MIN_VALUE
方法
toFixed() 取整,保留指定位数的小数
toString() 转为字符串 指定进制
3. 数组
# 创建数组
var list = []
var list = new Array()
# js数组特点
索引是连续
稀疏数组
# 添加元素
list.push()
list.unshift()
list.splice(offset, 0, 新元素)
# 删除元素
list.pop()
list.shift()
list.splice(offset,length)
# 修改元素的值
list[offset] = 新值
list.splice(offset, lenght, 值1,值2...)
# 数组对象的属性
length
# 数组对象的方法
push()
pop()
shift()
unshift()
splice()
reverse()
sort()
join() 把数组拼接成字符串
concat() 拼接数组
indexOf()
lastIndexOf()
forEach(callback) 遍历
map(callback) 返回一个新的数组
filter(callback) 返回一个新的数组
every(callback) 返回布尔值
some(callback) 返回布尔值
reduce(callback(prev, val, index)) 累计运算
#数组遍历
for 循环
for in
list.forEach
4 类数组对象
NodeList(元素的列表) arguments
遍历类数组对象
for 循环
[].forEach.call(类数组对象, function(){})
5 RegExp
# 定义正则
var r = /^w$/
#正则方法
r.test(string) true/false
r.exec(string) 数组
6 Function
函数本身也是对象
f.call(对象,...)
f.apply(对象, 数组)
7 Math
#属性
Math.PI
#方法
Math.abs()
Math.pow()
Math.max()
Math.min()
Math.ceil() 进位取整 天花板
Math.floor() 舍位取整 地板
Math.round() 四舍五入
Math.random() 取随机数 0~1 顾头不顾尾
8 Date
new Date() 默认当前的时间
方法
getFullYear()
getMonth() +1
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
getMilliseconds()
getTime()
getUTC...
set...
setUTC..
setTime()
笔记
1. 事件
1.1 事件绑定
# 写在html元素中
<button onclick="code..."></div>
# 把事件当做元素对象的方法
btnEle.onclick = function(){
}
# 事件监听
btnEle.addEventListener('click', function(){
}, false) fasle表示 冒泡阶段触发(默认)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件的原理</title> 6 <style> 7 .active { 8 background: pink; 9 } 10 </style> 11 </head> 12 <body> 13 <h1>事件原理</h1> 14 <hr> 15 <button id="btn">按钮</button> 16 17 <script> 18 //事件绑定在一个元素上 19 //事件绑定 20 21 var btn = document.querySelector('#btn'); 22 23 /*function demo(){ 24 25 }*/ 26 //标准的绑定事件 添加事件监听 IE8不兼容 attachEvent('onclick', function)<==IE8 27 //绑定了监听事件,多个的话也会同时触发,只是显示有先后 28 //监听事件就是监听到你有click这个行为,后面的事件就会触发 29 //这样写可以有多个时间同时触发 30 btn.addEventListener('click', function(){ 31 alert(100) 32 }) 33 34 btn.addEventListener('click', function(){ 35 alert(200) 36 }) 37 38 39 40 //更常用 41 btn.onclick = function(){ 42 this.classList.toggle('active'); 43 44 } 45 46 47 </script> 48 </body> 49 </html>
1.2 事件的捕获和冒泡
捕获阶段: 从祖先元素 到 子元素
冒泡阶段: 从子元素 到 祖先元素
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件的捕获和冒泡</title> 6 <style> 7 #wrapper { 8 200px; 9 height: 200px; 10 border: 2px solid pink; 11 background-color: #ccc; 12 } 13 #inner { 14 100px; 15 height: 100px; 16 margin: 50px; 17 background: green; 18 } 19 </style> 20 </head> 21 <body> 22 23 <h1>同志交友</h1> 24 <hr> 25 26 <div id="wrapper"> 27 <div id="inner"></div> 28 </div> 29 30 31 <script> 32 //事件是在冒泡阶段触发的 33 var wrapperEle = document.querySelector('#wrapper'); 34 var innerEle = document.querySelector('#inner'); 35 // 为True是捕获,先触发祖先元素事件 36 wrapperEle.addEventListener('click',function(){alert('我是大的')},true); 37 innerEle.addEventListener('click',function(){alert('我是小的')},true); 38 39 40 41 // wrapperEle.onclick = function(){ 42 // alert('我是大的'); 43 // } 44 45 // innerEle.onclick = function(event) { 46 // alert('我是小的'); 47 // event.stopPropagation(); //阻止冒泡 48 // } 49 </script> 50 51 </body> 52 </html>
事件默认在冒泡阶段触发
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件的捕获和冒泡</title> 6 <style> 7 #wrapper { 8 200px; 9 height: 200px; 10 border: 2px solid pink; 11 background-color: #ccc; 12 } 13 #inner { 14 100px; 15 height: 100px; 16 margin: 50px; 17 background: green; 18 } 19 </style> 20 </head> 21 <body> 22 23 <h1>同志交友</h1> 24 <hr> 25 26 <div id="wrapper"> 27 <div id="inner"></div> 28 </div> 29 30 31 <script> 32 //事件实在冒泡阶段触发的 33 var wrapperEle = document.querySelector('#wrapper'); 34 var innerEle = document.querySelector('#inner'); 35 36 wrapperEle.addEventListener('click', function(){ 37 alert('我是大的'); 38 }, true) 39 40 innerEle.addEventListener('click', function(event) { 41 alert('我是小的'); 42 event.stopPropagation(); //阻止冒泡 43 }, true) 44 </script> 45 46 </body> 47 </html>
1.3 常用事件
# 鼠标事件
click 单击
dblcick 双击
contextmenu 右击
mouseenter mouseover 鼠标悬停
mouseleave mouseout 鼠标离开
mousedown 鼠标按键按下
mouseup 鼠标按键抬起
mousemove 鼠标移动
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件</title> 6 <style> 7 8 </style> 9 </head> 10 <body> 11 <h1>常用事件--鼠标事件</h1> 12 <hr> 13 14 <script> 15 document.oncontextmenu = function(){ 16 alert('啊,我被右击了'); 17 return false; //阻止系统菜单 右键会弹出来的刷新页面 18 } 19 </script> 20 </body> 21 </html>
# 键盘事件
keydown 键盘按键按下
keyup 键盘按键抬起
keypress 按键按下 只有可输入的按键才能触发
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>键盘事件</title> 6 <style> 7 #box { 8 100px; 9 height: 100px; 10 background: pink; 11 position: absolute; 12 } 13 </style> 14 </head> 15 <body> 16 <div id="box" style="left:100px;top:200px"></div> 17 18 <script> 19 //e.Keycode 查看键盘按键对应的ascii 20 document.onkeydown = function(e){ 21 var boxEle = document.querySelector('#box'); 22 switch (e.keyCode) { 23 case 37: //左键 24 //parseint解析一个字符串,并返回一个整数 25 //不用Number是因为如果不是纯数字组成会返回NaN 26 boxEle.style.left = (parseInt(boxEle.style.left) - 5) + 'px'; 27 break; 28 case 38: //上键 29 boxEle.style.top = (parseInt(boxEle.style.top) - 5) + 'px'; 30 break; 31 case 39: //右键 32 boxEle.style.left = (parseInt(boxEle.style.left) + 5) + 'px'; 33 break; 34 case 40: //下健 35 boxEle.style.top = (parseInt(boxEle.style.top) + 5) + 'px'; 36 break; 37 default: 38 console.log(e.keyCode); 39 } 40 } 41 </script> 42 </body> 43 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>键盘事件</title> 6 <style> 7 input { 8 300px; 9 padding: 10px; 10 border: 1px solid #ccc; 11 font-size: 16px; 12 } 13 14 #res { 15 margin-top: 20px; 16 } 17 </style> 18 </head> 19 <body> 20 <input type="text" id="inputEle"> 21 <div id="res"></div> 22 23 <script> 24 25 var inputEle = document.querySelector('#inputEle'); 26 inputEle.onkeyup = function(){ 27 document.querySelector('#res').innerHTML = this.value; 28 } 29 </script> 30 </body> 31 </html>
# 表单事件
blur 失去焦点
focus 获取焦点
submit 提交 绑定给form元素
reset 重置 绑定给form元素
select 输入框内容被选中
change 内容改变切失去焦点 适合select 选项以改,触发
input 输出内容改变 触发
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单事件</title> 6 </head> 7 <body> 8 <form action="1.php" id="myForm"> 9 用户名: <input type="text" id="userEle" name="username"> <br> 10 密码: <input type="password" id="pwdEle" name="pwd"> <br> 11 <button>提交</button> 12 <input type="reset" value="重置"> 13 </form> 14 15 16 <script> 17 var userEle = document.querySelector('#userEle'); 18 var formEle = document.querySelector('#myForm'); 19 20 userEle.onblur = function() { 21 console.log('失去焦点啦'); 22 } 23 24 userEle.onfocus = function() { 25 console.log('获取焦点啦'); 26 //在失去焦点的时候,验证内容合法性 27 } 28 29 //选中输入框中的文字 30 userEle.onselect = function() { 31 console.log('啊,我被选了'); 32 } 33 34 //对于输入框,内容改变 并且失去焦点 (没用) 35 userEle.onchange = function() { 36 console.log('啊,我变了'); 37 } 38 39 //类似于 用的keyup 内容变化就触发 兼容性不好 40 userEle.oninput = function(){ 41 console.log('啊,我变了'); 42 } 43 44 45 //form表单的事件 46 formEle.onsubmit = function() { 47 alert('啊,我被提交了'); 48 return false; //阻止表单提交 49 } 50 </script> 51 </body> 52 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>地址联动</title> 6 <style> 7 select { 8 100px; 9 padding: 5px; 10 font-size:16px; 11 } 12 </style> 13 </head> 14 <body> 15 <h1>选择地址</h1> 16 <hr> 17 <select id="prov"></select> 18 <select id="city"></select> 19 20 <script> 21 //定义省市的信息 22 var provList = ['江苏','浙江','福建','湖南']; 23 var cityList = []; 24 cityList[0] = ['南京', '苏州', '宿迁', '扬州']; 25 cityList[1] = ['杭州', '温州', '宁波', '台州']; 26 cityList[2] = ['福州', '厦门', '泉州', '漳州']; 27 cityList[3] = ['长沙', '湘潭', '株洲', '湘西']; 28 29 //获取select元素对象 30 var provSelect = document.querySelector('#prov'); 31 var citySelect = document.querySelector('#city'); 32 33 34 //把省的信息 添加到第一个select元素中 35 provList.forEach(function(val, index){ 36 //DOM操作 了解 37 provSelect.add(new Option(val, index)) 38 }); 39 40 41 //给第一个select绑定change事件 42 provSelect.onchange = function(){ 43 //获取 当前的选项 44 var index = this.value; 45 46 //清空第二个select原先内容 47 citySelect.length = 0; 48 49 //选择对应的城市列表,添加到第二个select 50 cityList[index].forEach(function(val, index){ 51 citySelect.add(new Option(val, index)); 52 }) 53 } 54 55 56 //手工触发一次 change事件 57 provSelect.onchange(); 58 59 60 61 62 63 64 </script> 65 </body> 66 </html>
# 文档事件
load 绑定给body 绑定给window 绑定给 img 、link、script 文档加载完成
unload 文档关闭
beforeunload 文档关闭之前
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文档事件</title> 6 </head> 7 <body> 8 <h1>文档事件</h1> 9 <hr> 10 <!-- <img src="http://www.google.com/1.jpg" alt=""> --> 11 12 <script> 13 window.onload = function(){ 14 //一些操作 必须等到页面中 所有的内容 加载完毕 15 console.log('页面加载完毕'); 16 } 17 18 19 window.onbeforeunload = function(){ 20 return '你确定要离开我码?'; 21 } 22 </script> 23 </body> 24 </html>
# 图片事件
load 图片加载完毕
error 图片加载错误
abort 图片加载中断
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图片事件</title> 6 <style> 7 #imgList img { 8 300px; 9 height: 200px; 10 } 11 </style> 12 </head> 13 <body> 14 <h1>图片事件</h1> 15 <hr> 16 17 <div id="imgList"> 18 <img src="dist/images_one/meinv02.jpg" alt=""> 19 <img src="dist/images_one/2.jpg" alt=""> 20 <img src="dist/images_one/3.jpg" alt=""> 21 <img src="dist/images_one/4.jpg" alt=""> 22 <img src="dist/images_one/41.jpg" alt="美图"> 23 <img src="dist/images_one/7.jpg" alt=""> 24 <img src="dist/images_one/8.jpg" alt=""> 25 </div> 26 27 <script> 28 //获取所有图片的列表 29 var imgs = document.querySelectorAll('#imgList img'); 30 31 //给每个img元素绑定 error 事件 32 for (var i = 0; i < imgs.length; i ++) { 33 imgs[i].onerror = function() { 34 this.src = 'dist/images_two/11.jpg' 35 } 36 } 37 </script> 38 </body> 39 </html>
# 其他事件
scroll 滚动
resize 大小调整
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>其他事件</title> 6 </head> 7 <body> 8 <div style="height:20000px"></div> 9 <script> 10 window.onscroll = function(){ 11 console.log('页面在滚动'); 12 } 13 14 window.onresize = function(){ 15 console.log(window.innerWidth, window.innerHeight) 16 } 17 </script> 18 </body> 19 </html>
1.4 Event对象 事件对象
属性
clientX 鼠标的坐标
clientY 鼠标的坐标
keyCode 键盘的按键 ascii码
button 鼠标按键 0 1 2
target 返回元素 具体触发的元素
方法
stopPropagation() 阻止事件冒泡
preventDefault() 阻止元素的默认事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件对象</title> 6 </head> 7 <body> 8 <h1>event对象</h1> 9 <hr> 10 <form action="1.php"> 11 <button id="btn">按钮</button> 12 </form> 13 <script> 14 15 var btn = document.querySelector('#btn'); 16 17 btn.onclick = function(event){ 18 alert('啊,我被点击了'); 19 event.preventDefault(); //阻止元素的 默认动作 20 } 21 22 23 document.onclick = function(event) { 24 console.log(event.target) 25 } 26 </script> 27 </body> 28 </html>
2. BOM 浏览器对象模型
2.1 window
#属性
window.innerWidth 窗口的宽
window.innerHeight 窗口的高
history
location
screen
navigator
# 方法
setInterval()
clearInterval()
setTimeout()
clearTimeout()
Number()
String()
Boolean()
alert()
confirm()
prompt()
2.2 history
属性
length
方法
back() 后退一步
forward() 前进一步
go(1) 前进/后退 n 步
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>window</title> 6 </head> 7 <body> 8 <button onclick="history.back()">上一步</button> 9 <button onclick="history.forward()">下一步</button> 10 <button onclick="history.go(-2)">上两步</button> 11 <button onclick="history.go(1)">下1步</button> 12 13 <hr> 14 15 <a href="http://www.baidu.com">百度</a> 16 17 <script> 18 console.log(history) 19 console.log(window.history) 20 21 22 console.log(history.length); //历史记录的长度 23 24 </script> 25 </body> 26 </html>
2.3 location
属性
href
protocol
host
hostname
port
pathname
search
hash
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>location</title> 6 </head> 7 <body> 8 <script> 9 console.log(location) 10 console.log(location.href) 11 console.log(location.protocol) 12 console.log(location.host); //主机名和端口 13 console.log(location.hostname) 14 console.log(location.port) 15 console.log(location.pathname) 16 console.log(location.search) 17 console.log(location.hash) 18 19 20 //location.href= "1.html" 21 location.hash = '#哈哈哈' 22 </script> 23 </body> 24 </html>
2.4 screen
屏幕
2.5 navigator
属性
userAgent
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>navigator</title> 6 </head> 7 <body> 8 <script> 9 //输出浏览器配置信息 10 console.log(navigator.userAgent) 11 </script> 12 </body> 13 </html>
3. DOM 文档对象模型
3.1 常见的dom对象
所有的元素对象 都是dom
document dom对象 表示整个文档
document.body 获取body元素
document.documentElement 获取HTML元素
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DOM</title> 6 <style> 7 #box { 8 padding: 20px; 9 600px; 10 border: 1px solid #ccc; 11 } 12 #box1 { 13 padding: 20px; 14 600px; 15 border: 1px solid #ccc; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="box"> 21 <p>Lorem ipsum dolor sit amet.</p> 22 <p>Lorem ipsum dolor sit amet.</p> 23 <p>Lorem ipsum dolor sit amet.</p> 24 </div> 25 <div id = "box1"></div> 26 27 28 <script> 29 var box = document.querySelector('#box'); 30 var box1 = document.querySelector('#box1'); 31 32 //innerHTML输出到控制台是带标签的, 33 console.log(box.innerHTML) 34 console.log(box1.innerText) 35 36 37 box.innerHTML = '<ul><li>HELLO</li></ul>' 38 box.innerText = '<ul><li>HELLO123</li></ul>' 39 </script> 40 </body> 41 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>todoList</title> 6 <style> 7 #todoList { 8 list-style: none; 9 margin:10px 0px; 10 padding:0; 11 600px; 12 } 13 #todoList li { 14 margin-bottom:5px; 15 padding: 10px; 16 border: 1px solid #ccc; 17 background:#f5f5f5; 18 position: relative; 19 } 20 input { 21 padding:10px; 22 font-size:16px; 23 border:1px solid #ccc; 24 } 25 button { 26 padding:10px 20px; 27 border:1px solid #ccc; 28 background: #f5f5f5; 29 outline: none; 30 cursor: pointer; 31 } 32 33 #todoList span { 34 position: absolute; 35 right: 10px; 36 cursor: pointer; 37 } 38 </style> 39 </head> 40 <body> 41 <input type="text" id="content"> 42 <button id="btn">添加</button> 43 <ul id="todoList"> 44 <li>取钓鱼 <span>×</span></li> 45 <li>取洗澡 <span>×</span></li> 46 <li>取吃饭 <span>×</span></li> 47 <li>去睡觉 <span>×</span></li> 48 </ul> 49 50 51 <script> 52 var input = document.querySelector('#content'); 53 var btn = document.querySelector('#btn'); 54 var todoList= document.querySelector('#todoList'); 55 var spans = document.querySelectorAll('#todoList span'); 56 57 58 btn.onclick = function(){ 59 //获取 input的内置 60 var text = input.value; 61 62 //创建li元素 并给li元素添加包裹 内容 63 var li = document.createElement('li'); 64 li.innerText = text; 65 var span = document.createElement('span'); 66 span.innerHTML = '×'; 67 li.appendChild(span); 68 69 //把li元素添加到ul中 70 todoList.appendChild(li); 71 } 72 73 74 /*spans.forEach(function(span){ 75 span.onclick = function(){ 76 todoList.removeChild(this.parentNode) 77 } 78 })*/ 79 80 //委派方式绑定 81 todoList.onclick = function(event) { 82 if (event.target.nodeName === 'SPAN') { 83 this.removeChild(event.target.parentNode); 84 } 85 } 86 </script> 87 </body> 88 </html>
3.3 元素内容
innerHTML 标签也会被输出
innerText 只会输出其中的文本内容