标签：自定义属性 设定 end this meta idt baidu 选择 ring
BOM（Brow Object Model）：就是指浏览器对象模型，可以让JavaScript有能力与浏览器进行交互。
DOM（Document Object Model）： 是指文档对象模型，通过可以访问HTML文档的所有元素。
所有浏览器都支持windows对象，表示的浏览器的窗口。
常用方法：
查看浏览器窗口的内部高度：window.innerHeight
查看浏览器窗口的内部宽度：windows.innerwidth
打开新的窗口：windows,open()
关闭当前窗口：windows.close()
windows.appName
web浏览器全称：navigator.appName
web浏览器厂商和版本的详细字符串：navigator.appVersion
客户端绝大部分信息：navigator.userAgent
浏览器运行所在的操作系统：navigator.plaform
windows.history
前进一页：history.forward()
后退一页：history.back()
windows.location(重点)
获取URL：location.href
跳转到指定页面：location.href = ‘URL‘
重新加载页面：location.reload()
弹出框
警告框（alert）
确认框（confrim）
提示框（prompt）
计时器相关（重点）
setTimeout 与 clearTimeout(设置单次定时触发，清除)
setinterval 与 clearinterval(循坏触发，清除)
案例：
function f1() { alert(123); } function clear() { var t = setInterval(f1,3000); //以3秒为周期不停的调用f1函数。 function inner() { clearInterval(t); //clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作 } setTimeout(inner,9000) // setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 } clear();
案例一：
ps：在该标签设置自定义属性的时候不能用点的方式，setAttribute方法既可以设置自定义属性，也可以设置自带的属性。
// 创建标签。 var imgEle = document.createElement(‘img‘); // 设置自定义属性。 imgEle.setAttribute(‘id‘,‘i1‘) // 设置固有的属性。 imgEle.src = ‘longzhu.png‘ // 添加到DOM树中，让浏览器展示出来。 var d1Ele = document.getElementById(‘d1‘) d1Ele.appendChild(imgEle)
案例二：
// 创建一个a标签 var aEle = document.createElement("a") // 添加固有属性 aEle.href = ‘https:www.baidu.com‘ // 添加文本属性 aEle.innerText = ‘clicked me‘ // 获取参考点标签 var d3Ele = document.getElementById(‘d3‘) var s1Ele = document.getElementById(‘s1‘) // 在d3标签内部，s1标签上方添加创建的a标签 d3Ele.insertBefore(aEle,s1Ele)
ps：innerText 和 innerHTML的区别在于：innerText 不能识别html标签，而innerHTML可以。
获取值操作：对象.value
设置值操作：对象.value = 需要设置的值
class操作：
ps：通过class获取到的数据是一个数组，需要通过索引拿到单个对象。
// 根据class找到相应的标签对象 var c1Ele = document.getElementsByClassName(‘c1‘)[0] // 获取该标签对象的class属性列表并移除背景红色 c1Ele.classList.remove(‘bg-red‘) // 添加属性 c1Ele.classList.add(‘bg-green‘) // 判断是否存在 c1Ele.classList.contains(‘bg-green‘) c1Ele.classList.contains(‘bg-red‘) // 有则删除，无则添加 c1Ele.classList.toggle(‘bg-green‘)
style样式操作：
// 修改高度样式 d1Ele.style.height = ‘200px‘ // 修改宽度样式 d1Ele.style.width = ‘200px‘ // 修改背景色样式 d1Ele.style.backgroundColor = ‘blue‘
两种绑定时间的方法：
标签内直接调用相应事件函数。
js代码自动查找标签并绑定事件。
案例一：
<div class="bg-red " id="d1"></div> //为button添加一个点击事件。 <button id=‘b1‘ onclick=‘change();‘>开关1</button> <button id=‘b2‘>开关2</button> <script> // 标签直接绑定事件 function change(){ var d1Ele = document.getElementById(‘d1‘); // 为元素切换类 d1Ele.classLict.toggle(‘bg-green‘); } // 通过JS代码绑定事件 var b2Ele = document.getElementById(‘b2‘); b2Ele.onclick = ()=>{ change(); }
案例二：
<input type="text" value="苹果手机" id="i1"> var i1Ele = document.getElementById(‘i1‘); // 赋值一个焦点函数（鼠标点中触发），（ev）事件参数 i1Ele.onfocus = function (ev) { i1Ele.value = ‘‘; // 也可以直接用this this.value = ‘‘ }; // 时间在失去焦点时触发。 i1Ele.onblur = function (ev) { i1Ele.value = ‘苹果电脑‘; // 也可以直接用this this.value = ‘苹果电脑‘ }
案例三：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="d1"> <button id="b1">开始</button> <button id="b2">结束</button> <script> // 定义一个存储定时器的全局变量 var flag; // 先获取代码中需要用到的一些固定标签对象 var b1Ele = document.getElementById(‘b1‘); var iEle = document.getElementById(‘d1‘); var b2Ele = document.getElementById(‘b2‘); // 定义一个展示时间的函数 var showTime = function(){ // 获取当前时间 var cTime = new Date(); iEle.value = cTime.toLocaleString() }; // 给b1标签绑定点击事件 b1Ele.onclick = function () { // 先判断flag是否已经指代了一个定时器 if (!flag){ flag = setInterval(showTime,1000) } }; b2Ele.onclick = function () { // 取消定时器 clearInterval(flag); // 将标志位手动置为布尔值为false的值即可 flag = null; } </script> </body> </html>
案例四：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="" id="d1"> </select> <select name="" id="d2"> </select> <script> // 先获取需要操作的标签对象 let proEle = document.getElementById(‘d1‘); let cityEle = document.getElementById(‘d2‘); let data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}; // 将所有的省渲染到proEle标签内部 for循环获取所有的省 for (let pro in data){ // 创建option标签 let opEle = document.createElement(‘option‘); // 给option标签设置文本值 opEle.innerText = pro; // 将生成的option标签添加到proEle中 proEle.appendChild(opEle) } //onchange 当用户改变输入框内容时运行的代码 proEle.onchange = function () { // 先清空cityEle标签内所有的内容 cityEle.innerHTML = ‘‘; // 获取用户选择的省 根据省拿到对应的市 let choice_pro = proEle.value; let cityList = data[choice_pro]; // for循环创建option标签添加到cityEle标签内 for (let i=0;i<cityList.length;i++){ // 创建option标签并添加文本 let cEle = document.createElement(‘option‘); // 给option标签设置文本值 cEle.innerText = cityList[i]; // 将生成的option标签添加到proEle中 cityEle.appendChild(cEle) } } </script> </body> </html>
标签：自定义属性 设定 end this meta idt baidu 选择 ring
原文地址：https://www.cnblogs.com/ay742936292/p/10964900.html
