js事件,操作页面文档,计算后样式,数据类型
js:运行在浏览器的脚本语言
js引入
1.行间式:存在于行间事件中
<div id="div" onclick="this.style.color="red"">文本内容</div>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1" onclick="this.style.backgroundColor='yellow'"></div>
</body>
注:onclick单击 background-color,js语法不支持-,支持小驼峰backgroundColor
2.内联式:存在于页面script标签中
<script >
div.onclick=function(){
this.style.backgroundColor="yellow"}
</script>
<body>
<script>
div1.onclick = function () {
this.style.backgroundColor="yellow"}
</script>
</html>
#内联式必须放在标签后面,故一般放在body和/html之间
3.外联式:存在于外部js文件中,通过script标签src属性连接
js文件:
div1.onclick = function () {this.style.backgroundColor="yellow"}
html文件:
</body>
<script src="js/js.js">
</script>
</html>
ps:还是要将引入语句放在标签后,即放在body和/html之间
js选择器
getElement系列
html中id重复不会报错
但是js解析中重复的id会解析不出来
故id应该唯一
#通过id找元素对象
var box= document.getElementById("box");#此方法可以找到第一个,重复的id不再起作用
<body>
<div id="div1"></div>
<div id="div1"></div>
</body>
<script>
document.getElementById("div1").onclick=function () {
this.style.backgroundColor="yellow";
}
</script>
查看查找结果
<script>
var box = document.getElementById("div1")#有重复id只显示第一个
console.log(">>>>>>>>",box)
</script>
右击检查,然后打开console部分就可以看到打印结果
#通过类名查找元素对象
<script>
var boxs = document.getElementsByClassName;#Elements要有s,类名可以重复,故要复数,以列表形式保存结果
</script>
<div class="div1">1</div>
<div class="div1">2</div>
</body>
<script>
var boxs = document.getElementsByClassName("div1");
console.log(">>>>>>>>",boxs)
#通过标签名查找元素对象
var divs = document.getElementsByTagName("div");#Elements要有s,标签名可以重复,故要复数,以列表形式保存结果
var div = document.querySelector(".bb");#只能获取检索到第一个满足条件的元素对象
var divs = document.querySelectorAll(".body .box1.bb")#所有满足条件的元素对象
总结,参数采用的就是css选择器语法,以后就用这两种
事件
var box = document.querySelector(".box");
box.onclick = fuction(){
this.style.color = "red"}
操作页面文档
1.通过选择器获取页面元素对象
var box = document.querySelector(".box");
2.为该对象绑定事件
box.onclick = function(){①|②|③};
3.通过事件中的功能操作元素对象
①修改内容
this.innerText = "innerText";#不能解析html标签
this.innerHTML = "innerHTML";#可以解析html标签,修改内容就用它
②修改样式
修改的是行间式=>优先级高于所有内联外联样式(没有设置!important)
this.style.color = "green";
this.style.fontsize = "12px";
③修改类名
直接修改类名,会丢失之前类名下的属性们
this.className = "box1";
在原类名基础添加类型
this.className += " box1"; #多类名之间用空格隔开,所有做字符串拼接时一定需要添加空格
清除类名
this.className = "";
将类名等于空字符串就是置空类名
计算后样式
```python
内联式和外联式书写的样式都叫计算后样式
如何获取提前设置好的样式属性值
var box = document.querySelector(".div1");
var ftsize = box.style.fontsize;#这种方式永远操作的是行间式
console.log(ftsize)
如何获取计算后样式:#getComputedStyle(元素对象,伪类),属性名,行间式和计算式都可以获取,但是以行间式为主
var box = document.querySelector(".div1");
var ftsize = getComputedStyle(box,null).fontSize;
数据类型
数字类型Number
var al = 10;
var a2 = 3.14;
字符串 String
var s1="123";
var s2='456';
undefined 未定义
var u1;
var u2 = undefined;
Boolean:布尔
var b1 = true
vat b2 = false
typeof()来查看类型
引用类型
Object
var obj ={};
Function
var func = function(){}
Null
var n = null
