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
上一篇:CentOS7开启防火墙及特定端口


下一篇:c# – 在Windows 10中向Text to Speech Engine添加新语音