无锡朝阳网站推广,梦幻西游网页版平民攻略,wordpress小工具功能,简单的企业网站BOM
window对象
所有的浏览器都支持window对象#xff0c;他表示浏览器窗口#xff0c;
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
接下来要讲的HTML DOM 的 document 也是…BOM
window对象
所有的浏览器都支持window对象他表示浏览器窗口
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。
一些常用的Window方法
window.innerHeight - 浏览器窗口的内部高度window.innerWidth - 浏览器窗口的内部宽度window.open() - 打开新窗口window.close() - 关闭当前窗口 弹出框
可以在 JavaScript 中创建三种消息框警告框、确认框、提示框。
警告框alert
确认框confirm
提示框prompt
alert(123)//警告框
confirm(222)//确认框
prompt()//提示框 计时相关
setTimeout计时器等待几秒后运行
clearTimeout清楚计时器
setInterval每个三秒执行一次
clearInterval清除效果
function f1(){console.log(11111)
}
// setTimeout(f1,2000)//等待几秒后执行f1相对于计时器第一个写执行的函数第二个写时间以毫秒为单位10001s
// clearTimeout(f1)//清除计时器var aa setInterval(f1,3000)//没隔三秒执行一次
clearInterval(aa)//清除效果
例使func2执行三次后关闭 function func2() {alert(123)
}
function show(){let t setInterval(func2,3000); // 每隔3秒执行一次function inner(){clearInterval(t) // 清除定时器}setTimeout(inner,9000) // 9秒中之后触发
}
show() DOM
HTML DOM树
DOMDocument Object Model是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时浏览器会创建页面的文档对象模型Document Object Model。
HTML DOM 模型被构造为对象的树 DOM标准规定HTML文档中的每个成分都是一个节点(node)
文档节点(document对象)代表整个文档元素节点(element 对象)代表一个元素标签文本节点(text对象)代表元素标签中的文本属性节点(attribute对象)代表一个属性元素标签才有属性注释是注释节点(comment对象) JavaScript 可以通过DOM创建动态的 HTML
JavaScript 能够改变页面中的所有 HTML 元素JavaScript 能够改变页面中的所有 HTML 属性JavaScript 能够改变页面中的所有 CSS 样式JavaScript 能够对页面中的所有事件做出反应 查找标签 直接查找 id查找class查找标签查找 查id document.getElementByID(id) var div document.getElementById(d1)console.log(div)//使用id查找var c1 document.getElementsByClassName(c1)[0];//使用索引查找var c2 document.getElementsByClassName(c1)[1];var c3 document.getElementsByClassName(c1)[2];console.log(c1)console.log(c2)console.log(c3)var div1document.getElementsByTagName(div)//使用class查找var div2document.getElementsByTagName(div)var div3document.getElementsByTagName(div)console.log(div1)console.log(div2)console.log(div3)间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素 1. parentElement 父节点 标签查找
var d document.getElementsByClassName(a1)[0]
var a d.parentElement.parentElement
console.log(a)
2.children所有子标签
var div document.getElementById(d1)
var children div.children
console.log(children)3. firstElementChild 第一个子标签元素
var div document.getElementById(d1)
var children div.firstChild
console.log(children)//标签下第一个子标签
4.lastElementChild 最后一个子标签元素
var div document.getElementById(d1)
var children div.lastChild
console.log(children)//标签下第最后一个子标签
5. nextElementSibling 下一个兄弟标签 var div document.getElementById(d1)
var children div.nextElementSibling
console.log(children)//下一个兄弟标签6. previousELementsibling 上一个兄弟标签
var div document.getElementById(d1)
var children div.nextElementSibling
console.log(children)//上一个兄弟标签 节点操作
动态创建标签元素 var imgdocument.createElement(img);//先查找var divdocument.getElementById(d1);//增加属性img.srcimg.png;//放入图片div.appendChild(img)console.log(img);
使用点语法是不能增加自定义属性的如果要添加自定义属性则使用
例动态创建a标签 var a document.createElement(a);var div document.getElementById(d1);div.appendChild(a)a.hrefhttp://www.baidu.com;a.title点我点我a.innerText来了利用console.log(a)获取值操作
语法
elementNode.value
适用于以下标签
.input.select.textareavalue不能获取文件数据获取文件数据要用files
input typetext idin valuekk;
select name ids1option value1上海/optionoption value2 selected北京/optionoption value3安徽/option/select
textarea name idtext cols30 rows10这是一个框/textarea
/body
scriptvar inp document.getElementById(in)console.log(inp.value);var city document.getElementById(s1)console.log(city.value)var text document.getElementById(s1)console.log(text.value) class操作 className 获取所有样式类名(字符串) classList.remove(cls) 删除指定类 classList.add(cls) 添加类 classList.contains(cls) 存在返回true否则返回false classList.toggle(cls) 存在就删除否则添加 var div document.getElementById(d1)//增加class属性div.classList.add(c1)div.classList.add(c2)//删除class属性div.classList.remove(c2);//判断是否存在div.classList.contains(c1)//存在删除不存在添加div.classList.toggle(c1)设置边框div.style.colorred;div.style.fontSize30px;div.style.fontWeightbolder;div.style.border3px solid black; 事件 HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作action比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表这些属性可插入 HTML 标签来定义事件动作。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。onfocus 元素获得焦点。 // 练习输入框
onblur 元素失去焦点。 应用场景用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景通常用于表单元素,当元素内容被改变时触发.select联动onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击使用的对象是form。 绑定方式 //第一种function changeColor(){alert(changeColor);}//第二种document.getElementById(d1).onclickfunction (){alert(找到)}
当第二种代码在下面时找不到id值导致无法成功执行所以如果想要成功加载则使用
window.οnlοadfuncing f{}即可
}//第二种window.onloadfunction (){document.getElementById(d1).onclickfunction (){alert(找到)}} this 指向的当前对象及传参的使用 var bot document.getElementById(d1);document.getElementById(d1).onclickfunction (){this.innerText看看你的var bot document.getElementById(d1);function changeColor(_this,a,b, c){console.log(_this.innerText)console.log(bot.innerText)console.log(a)console.log(b)console.log(c)}示例开关灯
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleTitle/titlemeta nameviewport contentwidthdevice-width, initial-scale1style.c1 {height: 400px;width: 400px;border-radius: 50%;
}
.bg_green {background-color: greenyellow;
}
.bg_red {background-color: red;
}
/style/headbodydiv idd1 classc1 bg_red bg_green/divbutton idd2变色/buttonscriptlet btnEle document.getElementById(d2)
let divEle document.getElementById(d1)
btnEle.onclick function () { // 绑定点击事件// 动态的修改div标签的类属性divEle.classList.toggle(bg_red)
}/script/body/html
