Python web前端 05 JavaScript
一、获取元素
1、初识JavaScript
/* .. */ #这是多行注释// #这是单行注释#JavaScript是一种脚本语言，是一种动态类型、弱类型#JavaScript通常是用来操作HTML语言的 ：HTML骨架（页面结构），css样式（元素大小、颜色、位置、隐藏或显示等），js是行为（部分动画效果、页面与用户交互等）#js标签写在哪#1、script标签里面；#2、卸载外部.js后缀文件里面，通过script标签引入（script src="外部js文件"）;注意：在引入js文件里面的script里面，一定不能在写js代码#3、写在标签里面（ ）;标签里面写js代码一般情况下不推荐#script标签的位置#head或者body里面 ； 要注意是否需要加上window.οnlοad=function() (表示最后再执行) ； 如果没说什么特殊的要求，一般script标签放在body结束之前alert(1);#弹窗效果，可用来调试代码console.log(1)；#打印到控制台，用来调试代码
2、定义变量
#定义变量规则： var let const#1、不能使用关键字或者保留字（结束里面已经赋予其有意义的词，留着备用的词）#2、只能包含数字、字母、$ 、_ ，并且不能以数字开头#3、颜色保区分大小写#4、尽量见名知意#用","号可以是一个var定义多个变量，var变量并不要求立马赋值
3、获取元素
#js如何操作页面呢#要操作页面，就是操作标签，js要操作标签，就要先获取标签#如何获取独有标签document.titledocument.headdocument.bodydocument.title="我要改标题"document.body.innerHEML="我很好啊"#修改body里面的内容必须加上innerHTML，这个=号表示覆盖document.body.innerHEML=document.body.innerHEML+"我很好啊"#+号表示添加#可以简写为document.body.innerHEML+="我很好啊"document.body.innerText="我很好啊"#如果加上innerText的话，会把文本内所有内容全部修改（出现的是"我很好啊"）#其他元素的获取，id前面必须是document，其他的漆面可以是某个元素（id document），但不能是集合document.getElementById() #通过id获取元素.getElementsByClassName() #通过ClassName获取元素.getElementsByTagName() #通过标签名获取元素.querySelector().querySelectorAll() #通过选择器的写法获取元素document.getElementsByName() #通过name值回去元素
#获取id var oBox = document.getElementById("box") #获取上面id名为box的idoBox.innerHTML="ahhh"#获取classnamevar oBox1 = document.getElementsByClassName("box")oBox1.innerHTML="hahahaha"#没有下标是显示不出来的#获取一堆原色的集合，设置操作的时候要通过下标（索引、序号）拿到对于的某一个oBox[0].innerHTML="hahahah"#获取标签名var oP = document.getElementsByTagName("p")alert(oP.length);#获取长度oP[0].innerHTML+="ahh" #给的第一个元素添加ahh，跟上面的classname一样需要添加下标#通过选择器获取元素var oI = document.querySelctor("#box1 .warp2 .warp3");oI.innerHTML+="11111"#如果是多个元素，自动获取的就是第一个var oI1=document.querySelectorAll("#box i");oI1[0].innerHTML+="1111"#同样要加下标 0001
0002
0003
0004
4.write
document.body.innerHTML+="5555"#也可以用这种形式document.write("5555")write#在文档流关闭之前，给body部分新增内容#在文档流关闭之后，修改整个HTML的内容，用window.onload（）写 5、js里面的事件
#事件#就是js捕捉用户的操作，并作出正确的响应。在事件函数里面，有一个关键字this，代表当前触发事件的这个元素事件，用户的操作#元素.事件=函数#鼠标事件：左键单击 onclick ；左键双击 ondblclick ； 鼠标移入 onmouseover/onmouseenter ；鼠标移出 onmouseout/onmouseleave
二、操作属性
#js操作元素的标签属性#规范的标签属性：.符号直接操作（可读可写）#不规范（自定义）的标签属性#获取.getAttribute ; 设置 .setAttribute ; 移除 .removeAttribute #注意：#所有的路径、颜色、获取的结果不一定是你写的内容#通过id获取的元素赋值给变量后，假设修改了id，这个变量还是这个元素#自定义标签属性的操作方式，同样可以操作符合规范的标签属性