JavaEE传送门

JavaEE

【前端】JavaScript —— JS的组成与基本语法

【前端】JavaScript —— JS的基本语法之数组, 函数…

目录

  • WebAPI
    • DOM
    • 获取元素
    • 事件
    • 操作元素
      • 获取/ 修改元素内容
      • 获取/ 修改元素属性
      • 获取/ 修改表单元素属性
      • 获取/ 修改样式属性
    • 操作节点
      • 新增节点
      • 删除节点
    • 案例
      • 猜数字
      • 表白墙

WebAPI

前面学习的 JS 分成三个大的部分

  • ECMAScript: 基础语法部分
  • DOM API: 操作页面结构
  • BOM API: 操作浏览器

WebAPI 就包含了 DOM + BOM.

WebAPI 概念是非常广泛的, BOM 和 DOM 只是其中的一部分, 还有一些 操作多媒体的 API, 操作画板 canvas, api …

DOM

文档对象模型

  • 文档: html
  • 对象: JS 中的对象

DOM 合在一起, 就是把 HTML 页面上的每个标签, 都对应成 JS 中的一个对象, 通过这个对象就能获取/ 修改到标签的内容和属性.

DOM API 一共有很多, 本篇文章只介绍其中的一小部分

获取元素

进行后续操作的前提, 需要先把页面上的某个元素, 先拿到.

let div = document.querySelector('div');
  • document: 浏览器提供的一个全局对象, 就表示当前的页面. DOM API 基本上都是这个 document 对象的方法.
  • querySelector 参数就是一个 CSS 选择器, 可以使用前面学过的任意一种选择器, 来选中元素

要想看到 div 的对象形态就要使用, dir. dir 方法可以把元素以对象形态打印出来

console.dir(div);

我们看下面这段代码:

<div>hello1</div>
<div>hello2</div>
<div>hello3</div>
<script>let div = document.querySelector('div');console.log(div);
</script>

  • 如果选择结果不唯一, 此时标签选择器, 得到的结果只是第一个元素

  • 如果像把多个元素都获取到, 可以使用 querySelectorAll 来完成, 只不过这里的返回值, 是一个数组.

    let divs = document.querySelectorAll('div');

事件

和用户操作密切相关

  • 用户在浏览器上, 点击鼠标. (左键点击鼠标, 左键双击鼠标, 右键点击鼠标). 鼠标移动, 按下某个键盘按键, 滚动窗口位置…
  • 用户针对浏览器进行的操作, 都会对浏览器产生对应的 “事件”
  • 由于事件是和用户操作相关的, 我们无法预知事件何时到来.
  • 针对这些可能的用户操作, 能做的事情就是提前做好准备工作.
  • 因此, 浏览器就会根据用户操作产生对应的事件, 再有提前准备好的用户代码针对不同的事件进行不同的处理
<body><div>hello</div><script>// 想让 div 处理一下鼠标点击事件let div = document.querySelector('div');div.onclick = function() {console.log('按下鼠标');}</script>
</body>

这时我们点击页面中的 hello , 控制台上就会出现 ‘按下鼠标’ 字样. 多点几次就会出现多次. (chrome 控制台会默认把相同的日志给合并成一个)

可在设置中更改

还有很多关于其他的事件

div.onmousemove //鼠标移动
div.onmouseenter //鼠标进来了
div.onmouseleave //鼠标出去了
.....

事件涉及三个核心要素:

  1. 事件源: 事件是哪个元素发出来的
  2. 事件类型: 点击, 移动, 按下键盘, 调整窗口…
  3. 事件处理程序: 通过哪个函数/ 代码来进行操作

操作元素

元素就是 html 标签, 就是在 JS 中先获取到对应的 html 对象之后, 再来操作其中的内容或者属性.

获取/ 修改元素内容

开始标签和结束标签之间的内容.

使用 innerHTML 属性来获取/ 修改标签的元素内容.

<body><div>hello</div><script>//先选中divlet div = document.querySelector('div');// 过去元素中的内容console.log(div.innerHTML);</script>
</body>

还可以通过给这个属性赋值, 来起到修改的作用

<body><div>hello</div><script>let div = document.querySelector('div');// 当鼠标点击 hello 的时候, 变成 Gujiudiv.onclick = function() {div.innerHTML = 'Gujiu';}</script>
</body>

# 注意 #

  • 这里赋值, 不仅仅能够赋值文本, 还可以赋值一个 html 片段.
  • 还可以使用 innerText 来进行操作, 但是他只能得到文本, 不能得到 html 标签, 且是非标准的 (不建议使用)

获取/ 修改元素属性

修改的就是开始标签里面写的那些键值对.

<body><img src="hei.png" alt="" width="300px"><script>let img = document.querySelector('img');//获取属性console.log(img.src);console.log(img.width);console.log(img.alt);//修改属性, 此处通过修改 src 属性, 就可以影响到 html 界面上, 一个图片是如何展示的img.onclick = function() {img.src = '女.svg';}</script>
</body>

不只是 img 标签, 其他所有标签的属性, 都是通过类似的方式来进行操作的.

获取/ 修改表单元素属性

表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改

  • value: input 的值.
  • disabled: 禁用
  • checked: 复选框会使用
  • selected: 下拉框会使用
  • type: input 的类型(文本, 密码, 按钮, 文件等)

首先, 我们先看这样一段代码

<body><input type="text"><button>点我提交</button><script>let input = document.querySelector('input');let button = document.querySelector('button');button.onclick = function() {console.log(input.innerHTML);}</script>
</body>

我们通过 innerHTML 拿不到其中的内容, 因为 input 标签是一个单标签, 通过 innerHTML 获取标签内部的子标签, 是没有的.

<body><input type="text"><button>点我提交</button><script>let input = document.querySelector('input');let button = document.querySelector('button');button.onclick = function() {console.log(input.value);}</script>
</body>

案例1: 显示密码 (type)

<body><input type="password"><button>显示密码</button><script>let input = document.querySelector('input');let button = document.querySelector('button');button.onclick = function() {if(input.type == 'password') {input.type = 'text';button.innerHTML = '隐藏密码';}else {input.type = 'password';button.innerHTML = '显示密码';}}</script>
</body>

案例2: 点击计数 (value)

  1. input 标签中存整数
  2. 一个按钮一点, 数字就减少1
  3. 一个按钮一点, 数字就增加1
<body><input type="text" value="0"><button id="minus"> - </button><button id="add"> + </button><script>let input = document.querySelector('input');let add = document.querySelector('#add');let minus = document.querySelector('#minus');add.onclick = function() {let oldValue = input.value;input.value = oldValue + 1;}minus.onclick = function() {let oldValue = input.value;input.value = oldValue - 1;}</script>
</body>

# 注意 #

  • 此处的相加, 并非是算数相加,而是字符串相加了.

  • input.value 获得的是一个字符串. 所以, 需要先把字符串转成整数

    Java 如何转整数? Integer.parselnt

    JS 里也有一个 parseInt, 是一个全局函数(不仅仅是针对字符串操作, 也能针对其他类型操作)

    let oldValue = parseInt(input.value);

这时再点击’ +, - ’ 就是正常的数字加减了.

  • 除此之外, 还有一个更简单的办法, 根据 JS 弱类型的特点, 字符串不能去正号, 就会进行隐式类型转换.

    let oldValue = +input.value;

案例3: 操作复选框 (checked)

复选框的选择状态, 可以通过 checked 属性来进行设置

<body><h3>请选择Gujiu的老婆</h3><div><input type="checkbox" class="wife">02</div><div><input type="checkbox" class="wife">木之本樱</div><div><input type="checkbox" class="wife">樱岛麻衣</div><div><input type="checkbox" class="all">Gujiu全都要</div><script>let all = document.querySelector('.all');let wives = document.querySelectorAll('.wife');all.onclick = function() {// 把前三项全选for(let i= 0; i < wives.length; i++) {wives[i].checked = all.checked;}}</script>
</body>

这时我们点击 ‘Gujiu全都要’ 选项 ,就会把前三项全选

获取/ 修改样式属性

行内样式

通过 style 属性, 嵌入到 html 里面的样式

<body><h3 style="font-size: 20px">Gujiu												


											

【前端】JavaScript —— WebAPI相关推荐
	

    
						
  1. 在C#后端处理一些结果然传给前端Javascript或是jQuery
		
    在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...
    
		
    2. 
						
  2. Web前端-JavaScript基础教程上
		
    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
    
		
    3. 
						
  3. 判断字符串 正则_(重学前端 - JavaScript(模块一)) 14、引用类型之 RegExp (正则)(详述)...
		
    上一篇文章介绍了 JavaScript 中的 Date 类型,从地理方面的原理知识开始入手,如果大家认真看过上一篇文章,相信 JavaScript 中的 Date 类型已经难不住大家了!!! 但是今天 ...
    
		
    4. 
						
  4. 前端---JavaScript基础4
		
    文章目录 前端---JavaScript基础3 call&apply 原型链 原型链操作 例子:按钮组件封装:(类似于Bootstrsp里的按钮组件封装) 前端-JavaScript基础3 c ...
    
		
    5. 
						
  5. 前端---JavaScript基础3
		
    文章目录 前端---JavaScript基础3 普通对象与函数对象 原型及属性判断 构造函数继承 原型继承 组合继承 寄生组合式继承 前端-JavaScript基础3 普通对象与函数对象 原型及属性判 ...
    
		
    6. 
						
  6. 前端---JavaScript基础2
		
    文章目录 前端---JavaScript基础2 对象类型判断 call函数 对象属性操作 深拷贝方法 前端-JavaScript基础2 重构以下代码:(以面向对象的方式) 重构后:(其中this指针问 ...
    
		
    7. 
						
  7. 前端---JavaScript基础1
		
    文章目录 前端---JavaScript基础1 数据类型 面向对象 对象创建方式 对象类型判断 前端-JavaScript基础1 JS是 解释型语言:跨平台 慢 编译型语言:不能跨平台 快 数据类型  ...
    
		
    8. 
						
  8. web 前端 如何分享到instagram_好程序员web前端教程分享前端javascript练习题三
		
    好程序员web前端教程分享前端javascript练习题三 cookie 一周内免登录 样式代码: 姓名: 密码: 一周内免登陆 js功能代码: var input=document.getEleme ...
    
		
    9. 
						
  9. Web前端JavaScript笔记（4）节点
		
    如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
    
		
    10. 
						
  10. 前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述
		
    前言 作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 Ctrl+C !是 Ctrl+V! 不信?你来看看我键盘上的 Ctrl.C 和 V 键,那油光发亮的包浆程度,不 ...
    
		
    11. 
		


					

最新文章
	

    
						
  1. __sync_fetch_and_add
		
    2. 
						
  2. 6万广州人坐过无人出租车，过半月薪一万以上 | 中国首份Robotaxi乘客调研报告...
		
    3. 
						
  3. 单例模式(winform唯一页面)
		
    4. 
						
  4. 022_配置configuration
		
    5. 
						
  5. Label中的自动换行
		
    6. 
						
  6. 如何将freemarker文件转化为html文件
		
    7. 
						
  7. 受限玻尔兹曼机(Restricted Boltzmann Machine)分析
		
    8. 
						
  8. centos ifconfig命令找不到_测试需要掌握docker的一些基本命令
		
    9. 
						
  9. 21天Jmeter打卡Day18 前置处理器_熟悉常用组件
		
    10. 
						
  10. 利用@factory和@dataProvider实现参数化
		
    11. 
						
  11. 图像局部特征（二）--Harris角点检测子
		
    12. 
						
  12. 用VS2015编译pjsip的工程pjproject-vs14
		
    13. 
						
  13. MINIST数据集读取
		
    14. 
						
  14. 图像迁移风格保存模型_图像风格迁移原理
		
    15. 
						
  15. 泛泰A860版本的识别
		
    16. 
						
  16. 【捣鼓】TypeError: “x” is not a constructor
		
    17. 
						
  17. 防火墙的目标地址转换和源地址转换
		
    18. 
						
  18. 什么是你的核心竞争力之二？
		
    19. 
						
  19. 安全检查未通过_QQ群文件未通过安全检查，禁止下载该文件解决办法(QQ收藏)
		
    20. 
						
  20. tensorboard 2.0可视化 —浏览器中输入http://ip:6006 - 无法访问此网站——有效解决
		
    21. 
		

	


热门文章
	

    
									
  1. QT显示文字、图片、动画、网址链接、数码管、进度条
			
    2. 
						
  2. 角色权限分配与路由配置
			
    3. 
						
  3. 写给初学者：电气制图规范和图纸识读方法——第二期
			
    4. 
						
  4. python.exe-找不到序数：无法定位序数242与动态链接库libiomp5md.dll上。
			
    5. 
						
  5. 7-5 藏头诗 (15 分)
			
    6. 
						
  6. python--支付密码的验证、模拟qq账号登陆、商品价格竞猜（radom随机数的使用）、根据星座产看运势​
			
    7. 
						
  7. MIMO-OFDM水声通信系统发展现状及趋势
			
    8. 
						
  8. DirectShow开发笔记与问题记录（2018.3.12更新）
			
    9. 
						
  9. Web端即时聊天项目实现（基于WebSocket）
			
    10. 
						
  10. ORA-22858 数据类型的更改无效
			
    11.