Python web前端 05 JavaScript

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、写在标签里面(<div onclick="alert(1)"></div>);标签里面写js代码一般情况下不推荐 #script标签的位置
#head或者body里面 ; 要注意是否需要加上window.onload=function() (表示最后再执行) ; 如果没说什么特殊的要求,一般script标签放在body结束之前 alert(1);#弹窗效果,可用来调试代码
console.log(1);#打印到控制台,用来调试代码

  2、定义变量

#定义变量规则: var let const
#1、不能使用关键字或者保留字(结束里面已经赋予其有意义的词,留着备用的词)
#2、只能包含数字、字母、$ 、_ ,并且不能以数字开头
#3、颜色保区分大小写
#4、尽量见名知意 #用","号可以是一个var定义多个变量,var变量并不要求立马赋值

  3、获取元素

#js如何操作页面呢
#要操作页面,就是操作标签,js要操作标签,就要先获取标签 #如何获取独有标签
document.title
document.head
document.body document.title="我要改标题" document.body.innerHEML="<b>我很好啊</b>"#修改body里面的内容必须加上innerHTML,这个=号表示覆盖
document.body.innerHEML=document.body.innerHEML+"<b>我很好啊</b>"#+号表示添加
#可以简写为document.body.innerHEML+="<b>我很好啊</b>" document.body.innerText="<b>我很好啊</b>"#如果加上innerText的话,会把文本内所有内容全部修改(出现的是"<b>我很好啊</b>") #其他元素的获取,id前面必须是document,其他的漆面可以是某个元素(id document),但不能是集合
document.getElementById() #通过id获取元素
.getElementsByClassName() #通过ClassName获取元素
.getElementsByTagName() #通过标签名获取元素
.querySelector()
.querySelectorAll() #通过选择器的写法获取元素
document.getElementsByName() #通过name值回去元素
#获取id
var oBox = document.getElementById("box") #获取上面id名为box的id
oBox.innerHTML="<b>ahhh</b>" #获取classname
var oBox1 = document.getElementsByClassName("box")
oBox1.innerHTML="hahahaha"#没有下标是显示不出来的
#获取一堆原色的集合,设置操作的时候要通过下标(索引、序号)拿到对于的某一个
oBox[0].innerHTML="hahahah" #获取标签名
var oP = document.getElementsByTagName("p")
alert(oP.length);#获取长度
oP[0].innerHTML+="<b>ahh</b>" #给的第一个元素添加ahh,跟上面的classname一样需要添加下标 #通过选择器获取元素
var oI = document.querySelctor("#box1 .warp2 .warp3");
oI.innerHTML+=""#如果是多个元素,自动获取的就是第一个
var oI1=document.querySelectorAll("#box i");
oI1[0].innerHTML+=""#同样要加下标
<div id="box">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<p>0001</p>
<p>0002</p>
<p>0003</p>
<p>0004</p>
<script>
var oP = document.getElementsByTagName("p");
alert(oP.length);#所有的p,8个 var oBox = document.getElementById("box"),
oP1=oBox.getElenmentByTagName("p");
alert(oP1.length);#id下面的p,4个 var oP2=document.querySelectorAll("#box p");
alert(oP2.length);#id下面的p,4个
</script>

  4.write

document.body.innerHTML+=""
#也可以用这种形式
document.write("") write
#在文档流关闭之前,给body部分新增内容
#在文档流关闭之后,修改整个HTML的内容,用window.onload()写

  5、js里面的事件

#事件
#就是js捕捉用户的操作,并作出正确的响应。在事件函数里面,有一个关键字this,代表当前触发事件的这个元素事件,用户的操作
#元素.事件=函数
#鼠标事件:左键单击 onclick ;左键双击 ondblclick ; 鼠标移入 onmouseover/onmouseenter ;鼠标移出 onmouseout/onmouseleave <div id = "box"></div>
<script>
var oBox=document.getElementById("box")
oBox.onclick=function(){
console.log("我被点击了") ;
oBox.innerHTML+="我被点击了";
this.innerHTML+="我被点击了";#用这个this就是相当于上面的oBox
}

二、操作属性

#js操作元素的标签属性
#规范的标签属性:.符号直接操作(可读可写)
#不规范(自定义)的标签属性
#获取.getAttribute ; 设置 .setAttribute ; 移除 .removeAttribute #注意:
#所有的路径、颜色、获取的结果不一定是你写的内容
#通过id获取的元素赋值给变量后,假设修改了id,这个变量还是这个元素
#自定义标签属性的操作方式,同样可以操作符合规范的标签属性
<a href="http://www.baidu.com" targert="_blank" class="box" id ="box" tz="xp">去百度</a>
<script>
var oA=document.getElementById("box");
alert(oA.target);#可读性
oA.id="box1";#修改id,当然一般没人去改id,一般操作class
oA.href="http://www.taobao.com";#修改路径
oA.tz="hahh" #无效,不规范的不能用.操作来修改
alert(oA.getAttribute("tz"));#获取tz
alert(oA.className);#如果要获取class必须要使用className
oA.setAttribute("target","_self");#修改tz属性
oA.setAttribute("py","web");#原来没有的属性也可以添加上
oA.removeAttribute("class");#移除属性
</script>
<div id ="box" class="box"></div>
<script>
var oBox=document.getElementById("box")
oBox.style.height="300px";
oBox.style.weight="300px";
oBox.style.background="red";#修改样式
oBox.style.cssText="width:300px;height:300px;background:red";#可以用这种方法来修改多个属性
oBox.style.marginLift="100px";#如果书写复合属性要注意驼峰命名(去掉-号,-号后面的第一个单词大写)
oBox.style["margin-top"]="100px";#也可以用这种方法
</script>
上一篇:L​i​n​u​x​下​配​置​T​o​m​c​a​t


下一篇:photoshop经典合成恐怖片中的幽灵鬼屋