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语法不支持-,支持小驼峰backgroundColor2.内联式:存在于页面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;数据类型python
数字类型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
js事件,操作页面文档,计算后样式,数据类型
原文地址：https://www.cnblogs.com/robert-zhou/p/10305968.html