主要内容:https://www.cnblogs.com/liwenzhou/p/8011504.html
1 . Javascript 分为ECMAscript, DOM, BOM.
BOM(Browser Object Model) 是指浏览器对象模型, 它使JavaScript又能努力与浏览器进行对话
DOM(Document Object Model)是指文档对象模型, 通过它,可以访问html文档的所有元素.
windows对象是客户端javascript最高层对象之一, 由于windows对象是其他大部分对象的共同祖先.windows对象的方法和属性, 可以省略windows对象的引用.
2 . window的子对象
navigator对象 : 浏览器对象, 通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息.
location对象: (重要) window.location 对象用于获得当前页面的地址,并把浏览器定向到新的页面
常用属性和方法:
location.href //获取url "https://www.sogo.com/"
location.href='url' //跳转到指定页面 location.reload() // 重新加载页面
history对象: window.history对象包含浏览器的历史
history.forward() // 前进一页 history.back() // 后退一页
弹出框: 在javascript中创建三种消息框:警告框 确认框 提示框
警告框: 经常用于确保用户可以得到某些信息.当警告框出现后,用户需要点击确定按钮才能进行操作.
alert(123)
确认框: 确认框用于使用户可以验证或者接受某些信息.
当确认框出现后, 用户需要点击确定后者取消按钮才能进行继续操作.点确认返回ture,否则else
confirm('que') true confirm('124') false
提示框: 提示框常用提示用户在进入页面前输入某个值
prompt('请在下方输入','答案') "答案" prompt('请在下方输入','答案') null
3 . 计时相关
a : 定义 : 通过使用javascript. 我们可以在一定时间间隔之后来执行代码, 而不是在函数调用后立即执行. 这称计时事件.
b : setTimeout 语法 : var t = setTimeout('js语句', 毫秒)
setTimeout(function jump(){alert(123)}, 3000) # 第一种方式 function kk(){ alert(123) } setTimeout(kk, 4000) # 第两种方式 2
clearTimeout() 语法 : clearTimeout( setTimeout_variable)
var timer = setTimeout(function(){ alert(123);}, 3000);// 取消settimeout设置 clearTimeout(timer)
c : setInterval() 语法 : var t = setTimeout('js语句', 时间间隔)
function an(){ console.log(123) } setInterval(an, 1000) 1
clearinterval()
function an(){ console.log(123) } var t2 = setInterval(an, 1000) clearInterval(t2)
4 . 查找标签
1) 直接查找
1. document.getElementById("id值") --> 找到具体的标签对象
2. document.getElementsByClassName("样式类名") --> 找到标签对象的数组
3. document.getElementsByTagName("标签名") --> 找到标签对象的数组
document.getElementById('i1') #根据id获取一个标签 <div id="i1">div</div> document.getElementsByClassName('c1') #根据class属性获取 var c1Ele = document.getElementsByClassName('c1') undefined c1Ele HTMLCollection(2) [p.c1, p.c1] c1Ele[0] <p class="c1">p1</p> c1Ele[1]
var c2e = document.getElementsByTagName('p') #根据标签名获取标签合集 undefined c2e[0] <p class="c1">p1</p> c2e[0].innerText = 'biaoqian' # 修改文本内容 "biaoqian"
2 ) 间接查找
var d2 = document.getElementById('d2') d2.children #所有子标签 HTMLCollection(3) [p, div#d3, p, d3: div#d3] d2.firstElementChild #第一个子标签元素 <p>d3前面的p标签</p> d2.lastElementChild #最后一个子标签元素 <p>d3后面的p标签</p> d3 = document.getElementById('d3') <div id="d3">div2</div> d3.previousElementSibling #上一个兄弟标签 <p>d3前面的p标签</p> d3.nextElementSibling #下一个兄弟标签 <p>d3后面的p标签</p>
parentElement 父节点标签元素
innertext innerHTML的区别
d2.innerText "d3前面的p标签 div2 d3后面的p标签" d2.innerHTML " <p>d3前面的p标签</p> <div id="d3">div2</div> <p>d3后面的p标签</p> "
5 . 节点操作
1 ) 创建节点和添加节点
追加一个子节点(作为最后的子节点) : somenode.appendchild(newnode)
var pele = document.createElement('span') #创建一个节点 undefined pele.innerText = '最美的太阳' "最美的太阳" d2.appendChild(pele) #追加一个子节点 <span>最美的太阳</span>
把增加的节点放到某一个节点的前边: somenode.insertbefore(newnode, 某个节点)
var div1 = document.createElement('div') undefined div1.innerText = '张杰' "张杰" d2.insertBefore(div1, d3) <div>张杰</div>
实例二
var img1 = document.createElement('img'); undefined img1.setAttribute('src','http://g.hiphotos.baidu.com/baike/pic/item/314e251f95cad1c8f1589f12723e6709c93d5127.jpg'); undefined var i2 = document.getElementById('i2'); undefined d2.appendChild(img1) <img src="http://g.hiphotos.baidu.com/baike/pic/item/314e251f95cad1c8f1589f12723e6709c93d5127.jpg">
2 ) 删除节点和替换节点
删除节点的语法 : 获取要删除的元素, 通过父元素调用删除 removechild(要删除的节点)
替换节点的语法 : somenode.replacechild(newnode, 某个节点)
var d2 = document.getElementById('d2') undefined var d3 = document.getElementById('d3') undefined d2.removeChild(d3) <div id="d3">div2</div> div2 = document.createElement('div') <div></div> d2.replaceChild(div2, d2)
文本节点: innertext不能识别标签都按照文本显示
innerHTML能正常识别标签
d2.innerText = '<p>呵呵</p>' "<p>呵呵</p>" d2.innerHTML = '<p>呵呵</p>' "<p>呵呵</p>" #在文本中显示'呵呵'
6 . 获取值操作
适用于以下标签: input select textarea
var iEle = document.getElementById("i1"); console.log(iEle.value); var sEle = document.getElementById("s1"); console.log(sEle.value); var tEle = document.getElementById("t1"); console.log(tEle.value);
7 class 的操作
className 获取所有样式类名(字符串) classList.remove(cls) 删除指定类 classList.add(cls) 添加类 classList.contains(cls) 存在返回true,否则返回false classList.toggle(cls) 存在就删除,否则添加
例子:
var d1ele = document.getElementById('d1') d1ele.className 获取所有样式类名 "c c1" d1ele.classList DOMTokenList(2) ["c", "c1", value: "c c1"]0: "c"1: "c1"length: 2value: "c c1"__proto__: DOMTokenList d1ele.classList.remove('c1') 删除指定类 undefined d1ele.classList.add 增加指定类 ƒ add() { [native code] } d1ele.classList.add('c1') undefined d1ele.classList.contains('c1') 存在返回ture, 否则返回false true d1ele.classList.toggle('c1') 存在就删除, 否则添加 false d1ele.classList.toggle('c1') true
8 . 指定css操作
d1ele <div id="d1" class="c c1"></div> d1ele.style.backgroundColor = 'deeppink' "deeppink" d1ele.style.borderRadius= '3px' "3px"
9 . 事件机制
1) 常用事件
复制代码 onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 // 练习:输入框 onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动) onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onselect 在文本框中的文本被选中时发生。 onsubmit 确认按钮被点击,使用的对象是form。
2 ) 例子
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <style> .c { height: 200px; 200px; background-color: red; border-radius: 50%; } .c1 { background-color: green; } </style> </head> <body> <div id="d1" class="c c1"></div> <button onclick="change()" id="b1">点我1</button> <input type="button" id="b2" value="点我2"> <script> function change() { var d1Ele = document.getElementById("d1"); d1Ele.classList.toggle("c1"); } // 通过JS给标签绑定事件 var b2Ele = document.getElementById("b2"); b2Ele.onclick=function () { console.log(this); // this表示触发事件的标签本身 var d1Ele = document.getElementById("d1"); d1Ele.classList.toggle("c1"); } </script> </body> </html>
3 ) input框获取焦点和失去焦点事件
<html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <input type="text" id="i1" value="对子哈特"> <script> // 找到要绑定事件的标签 var i1Ele = document.getElementById("i1"); // 1. 先绑定获取焦点的事件 i1Ele.onfocus = function (ev) { // 当输入框获取焦点之后要做的事儿 this.value = ""; }; // 2. 绑定失去焦点的事件 i1Ele.onblur = function (ev) { this.value = "对子哈特"; } </script> </body> </html>
10 select联动
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <label for="s1"></label> <select name="" id="s1"> <option value="01">省</option> </select> <label for="h1"></label> <select name="" id="h1"> <option value="01">市</option> </select> <script> var data = { '北京':['昌平区','海定区','朝阳区'], '上海':['浦东新区','徐汇区'] }; var s1ele = document.getElementById('s1'); var h1ele = document.getElementById('h1'); //拿到所有的省, 在s1中生成对应的option选项 for(var i in data){ //创建option标签 var opt = document.createElement('option'); //把信息加入到标签中 opt.innerText = i; //把创建好的标签加入第一个select标签中 s1ele.appendChild(opt) } //拿到所有的市, 在h1中生成对应的option选项 //当第一个select框的值发生变化是的时候触发的动作 s1ele.onchange = function () { // 0 清空第二个select框里的内容 s2ele.innerText = ''; // 1. 先获取用户选中的省 var p = this.value; var cityarray = data[p]; for (var j in cityarray){ //生成空的option var opt1 = document.createElement('option'); //往optin里添加内容 opt1.innerText = cityarray[j]; //把生活才能的option追加到select标签中 h1ele.appendChild(opt1); } } </script> </body> </html>