js介绍
js运行编写在浏览器上的脚本语言(外挂,具有逻辑性)
脚本语言:运行在浏览器上的独立的代码块(具有逻辑性)
操作BOM 浏览器对象盒子
操作DOM 文本对象
js三种引入方式
(1)行间式:书写在代码块写在全局事件属性中
<div id="box" οnclick="this.style.backgroundColor = 'red'; "></div>
(2)内联式:书写在body最下方
<div id="temp"></div>
// js引入 <script> temp.onclick = function () { // 完成某一项功能 this.style.width = "400px"; // this => temp } </script>
(3)外联式:书写在cs文件中
<script src="1.js"></script> 书写在body最下方 res.onclick = function () { this.style.backgroundColor = 'red'; }
js选择器(getElementBy() 与 querySelector )
document :所有的文件对象
getElement系列选择器
id选择器 : getElementById("box")
document.getElementById("box").onclick = function () { this.style.backgroundColor = 'red'; } var box = document.getElementById("box"); box.onclick = function () { this.style.backgroundColor = 'red'; }
类选择器:getElementsByClassName('box')
var box = document.getElementsByClassName('box'); //获取标签,得到是数组
box[0].onclick = function () { this.style.backgroundColor = 'red'; } box[1].onclick = function () { this.style.backgroundColor = 'red'; }
标签选择器:getElementsByTagName
var box = document.getElementsByTagName('box'); // 获取标签,得到的是数组
box[1].onclick = function () { this.style.backgroundColor = 'red';
}
querySelector系列选择器
位置选择器 (跟css选择器一样)
var box = document.querySelector( '.bb' ); var box1 = document.querySelectorAll( 'body .bb' ); 获取的body下的 类名为bb 的所有选择器
js四种调试方式
alert() 弹出框
console.log() 浏览器控制台查看
document.write() 写在html页面中
断点调试
js操作页面文档(三步骤)
(1)获取页面元素对象
(2)为该对象绑定事件
(3)通过事件操作元素对象
var box = document.querySelector(".box"); //获取指定标签
// 绑定事件
box.onclick = function() {
//操作内容
this.innerText = "innerText"; // 不能解析html标签
this.innerHTML = "<i>innerHTML</i>"; // 可以解析html标签
}
js修改标签内容
this.innerText = "innerText"; // 不能解析html标签 this.innerHTML = "<i>inn
js修改css样式
this.style.color = "red";
js修改类名
this.className = "box" 将类名改为box
在原类名上添加类名
Cname = this.className
cName = cName + " " + ".box" 将单类名改为双类名
清除类名
this.className = "" ;
js设置属性
var img = document.querySelector('img'); img.setAttribute("src", "https://www.baidu.com/img/baidu_jgylogo3.gif");
js获取属性值
img.getAttribute("src")
js获取计算后样式 getComputedStyle()( 获取的是内联式,外联式 )
var box = document.querySelector( '.box' ); getComputedStyle( 元素对象,伪类 ).属性名 ftSize = getComputedStyle( box,null ).fontSize; //只读内联,外联的样式值
this.style.color = "red"; //修改样式值