web前端基础学习4--JavaScript和xml文件格式

最新推荐文章于 2022-06-13 14:53:01 发布

ヅLucky_triplex

最新推荐文章于 2022-06-13 14:53:01 发布

阅读量306

点赞数

分类专栏： web前端基础知识了解文章标签： javascript xml

本文链接：https://blog.csdn.net/kxdhshlg/article/details/110484027

版权

web前端基础知识了解专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript基础

JavaScript，其实与java没有关系。负责控制结构和样式的。
位置要在html文档的最后，写一个script标签（双标签，格式如下：

<script>
alert('哈哈')；
</script>
alert(‘哈哈 我弹出来了’);弹出对话框

都要用英文状态下的符号，小括号中可用双引号和单引号来包裹文字。

找元素（标签、标记）

document.getelementById('div1')   //id名为div1

调试工具打开 F12 检查在console中复制document.getelementById(‘div1’)，执行，就可以找到div1标签语句
不一定非要通过id名来找，还可以通过类名、标签名来找。
1.类名：

<div class='div1'></div>
<div class='div1'></div>
document.getelementsByClassName('div')[0]   //[n] n从0开始，0为第一个div

2.标签名

<div></div>
document.getelementsByTagName('div')[0]

3.name属性

<div name='xxx'></div>
document.getelementsByName('xxx')[0]

实体化三属性(宽、高、背景色)

document.getelementById('div1').style.width = '100px';
document.getelementById('div1').style.height = '100px';
document.getelementById('div1').style.background = 'red';

等号前后习惯性的加上一个空格，好看~

用变量简化代码

变量就是给数据请了一个代言人，只要出现变量名就代表等号之后的这堆代码

var   dyr =  document.getelementById('div1').style;
dyr.width = '100px';

变量起名字的注意事项：可以使用中文,但不推荐；只可以用符号：下划线和美元符号；不可用数字开头；不允许使用js已经占用了的单词（保留字：如 document style ）

JS事件

定义：在什么时候做什么事情,就是我和计算机的一个交互
作用：捕获用户的行为（单击、双击、鼠标的移入移出）
事件三要素：
1.事件源：解释就是这个事件加给谁
2.事件类型：就是指的这个事件是什么时候发生的
3.执行的指令：固定写法function(){ 命令写在这里}
事件源.事件类型=匿名函数 里写的就是执行的命令

举例
单击事件：
css中

 div{width:100px；height:100px;background:pink;}

html中

<div id='box'></div>
<input type = ‘button’ value='变宽' id='btn_w'/>
<input type = ‘button’ value='变高' id='btn_h'/>

js中

var btu_w=document.getElementById('btn_w');
var box =  document.getelementById('box');
var btu_h=document.getElementById('btn_h');
btu_w.onclick = function(){
box.style.width='200px';
}
btu_h.onclick = function(){
box.style.height='200px';
}

双击事件

div1.ondblclick=function(){ }

鼠标移入

div2.onmouseover=function(){ }

鼠标移出

div3.ondmouseout=function(){ }

没效果
需要js控制的时候再添加类或id来准确找到元素即可；不需要就不必写哦

js书写位置：

与css书写套路一样
内嵌js（写在html最后的js代码）不推荐，没有实现代码分离，会让代码量看起来太大，不容易修改。

外链js：强烈推荐，因为可实现代码的分离
要新建一个js文件, xxx.js 只写js代码:
在html文件中引入外链js中 ,格式如下：

<script src="xxx.js">
</script>

内嵌外链无权重之分，先写先执行
行内js：要用事件才能驱动，尽量不要用

<div onclick="alert('我是行内js')"></div>//单击才会弹出

js代码写在head标签中（js代码搬家）

<head>
			...
<script >
		**window.onload=function(){** 
		 var box02=document.getelementById('box02')；
		 box02.onclick=function(){
		 alert('点击成功')；
		 }**}**
</script>
		...
<head>

当js代码写在head中时，我们需要有window.onload声明，意思就是执行完所有html中内容后再执行此部分的js代码。（页面加载后才执行js代码）

动态添加和删除

准备工作，一个盒子，两个按钮，代码略。

<head>
			...
<script >
		**window.onload=function(){** 
		 var box=document.getelementById('box')；
		 var btn_add=document.getelementById('btn_add')；
		 var btn_del=document.getelementById('btn_del')；
		 
		 btn_add.onclick=function(){
				box.innerHTML= '点击后文字才会被设置成功' ；
		 }
         btn_del.onclick=function(){
				box.innerHTML= '' ；//什么都不写就是为空
		 }
**}**
</script>
		...
<head>

js中一个很重要的概念：函数

作用：自定义函数简化代码！

window.onload=function(){
function AAA(){
alert('弹出');
   }  
   }
  //function（）{ }是匿名函数，在后边加了一个AAA就变为有名字了，就是自定义的函数，需要调用才行。

函数名（）； //调用
自定义函数和代码在js执行中是优先定义的，不管是否写在函数调用的前边还是后边。

一种文件类型“xml”

可扩展标记语言，保存数据，负责数据传输！
ren.xml文件

<ren>
<shengao>180</shengao>
<nianling>18</nianling>
<tizhong>120</tizhong>
</ren>

文件中：是自定义的标签，对大小写敏感，标签嵌套不能出错

PS：文章内容借鉴于软件测试教学视频，自己做了一下总结~

有志者事竟成！

ヅLucky_triplex

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录