web开发：javascript操作
一、函数闭包
二、面向对象
三、js选择器
四、事件初始
五、js处理页面内容
六、js事件控制标题栏
七、js控制类名
一、函数闭包
```js
// 函数的嵌套定义, 定义在内部的函数就称之为 闭包
// 1.一个函数要使用另一个函数的局部变量
// 2.闭包会持久化包裹自身的函数的局部变量
// 3.解决循环绑定
// 函数的嵌套定义, 定义在内部的函数就称之为 闭包
// 1.一个函数要使用另一个函数的局部变量
// 2.闭包会持久化包裹自身的函数的局部变量
// 3.解决循环绑定
function outer() {
var num = 10;
function inner() { // 闭包
// 1.在inner函数中,使用了outer的局部变量num
return num;
}
return inner;
}
var innerFn = outer();
// 2.借助闭包,将局部变量num的生命周期提升了
var num = innerFn();
console.log(num);
```
var num = 10;
function inner() { // 闭包
// 1.在inner函数中,使用了outer的局部变量num
return num;
}
return inner;
}
var innerFn = outer();
// 2.借助闭包,将局部变量num的生命周期提升了
var num = innerFn();
console.log(num);
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>闭包</title>
</head>
<body>
闭包
</body>
<script>
// 了解知识点
// 闭包: 局部的函数(被一个函数包裹的函数)
// 为什么使用闭包:
// 1.一个函数要使用另一个函数的局部变量
// 2.闭包会持久化包裹自身的函数的局部变量
// 3.解决循环绑定 // 函数的嵌套定义
function outer() {
var num = 10;
function inner() {
// 1.在inner函数中,使用了outer的局部变量num
return num;
}
return inner;
}
var innerFn = outer();
// 2.借助闭包,将局部变量num的生命周期提升了
var num = innerFn();
console.log(num); </script>
</html>
二、面向对象
```js
// 1.单一对象
var obj = {
// 属性
name: 'Zero',
// 方法
teach: function () {
console.log("教学");
}
};
obj.name | obj.teach()
// 1.单一对象
var obj = {
// 属性
name: 'Zero',
// 方法
teach: function () {
console.log("教学");
}
};
obj.name | obj.teach()
// 2.构造函数
function Person(name) { // 类似于python中的类一样来使用
// this代表Person构造函数实例化出的所有具体对象中的某一个
this.name = name;
this.teach = function () {
console.log(this.name + "正在教学");
}
}
// ①通过构造函数实例化出具体对象
// ②通过对象.语法调用属性与方法
var p1 = new Person("张三");
p1.name // 张三, this指向p1对象
var p2 = new Person("李四");
p2.teach // 李四正在教学, this指向p2对象
function Person(name) { // 类似于python中的类一样来使用
// this代表Person构造函数实例化出的所有具体对象中的某一个
this.name = name;
this.teach = function () {
console.log(this.name + "正在教学");
}
}
// ①通过构造函数实例化出具体对象
// ②通过对象.语法调用属性与方法
var p1 = new Person("张三");
p1.name // 张三, this指向p1对象
var p2 = new Person("李四");
p2.teach // 李四正在教学, this指向p2对象
// 3.ES6类语法
class Student {
// 需要构造器(构造函数)来完成对象的声明与初始化
constructor (name) {
// 属性在构造器中声明并完成初始化
this.name = name;
}
// 类中规定普通方法
study () {
console.log(this.name + "正在学习");
}
// 类方法
static fn() {
console.log("我是类方法")
}
}
// 类中的普通方法由类的具体实例化对象来调用
// 类中的类方法由类直接来调用(这类型的方法大多是功能性方法,不需要对象的存在)
```
class Student {
// 需要构造器(构造函数)来完成对象的声明与初始化
constructor (name) {
// 属性在构造器中声明并完成初始化
this.name = name;
}
// 类中规定普通方法
study () {
console.log(this.name + "正在学习");
}
// 类方法
static fn() {
console.log("我是类方法")
}
}
// 类中的普通方法由类的具体实例化对象来调用
// 类中的类方法由类直接来调用(这类型的方法大多是功能性方法,不需要对象的存在)
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>面向对象js</title>
</head>
<body>
面向对象js
</body>
<script>
// 对象: 特征与行为的结合体, 是一个具象的实体 // js对象语法
var obj = {
// 属性
name: 'Zero',
// 方法
teach: function () {
console.log("教学");
}
};
// 对象使用属性与方法, 采用.语法
console.log(obj.name);
obj.teach(); // 构造函数: 声明与普通函数一样, 只是函数名采用大驼峰命名规则
function Person(name) { // 类似于python中的类一样来使用
// 构造函数内部属性方式不同于普通函数
this.name = name; // this代表Person构造函数实例化出的所有具体对象中的某一个
this.teach = function () {
console.log(this.name + "正在教学");
}
}
// 如何使用构造函数中的属性与方法
// 1. 通过构造函数实例化出具体对象
// 2. 通过对象.语法调用属性与方法
var p1 = new Person("杨虎虎"); // name: 杨虎虎
var p2 = new Person("刘xx"); // name: 刘xx
console.log(p1.name);
console.log(p2.name);
p1.teach();
p2.teach(); // ES6
// 引入了类
class Student { // 类, 可以实例化对象, 但实例化出的对象需要加以区分
// 需要构造器(构造函数)来完成对象的声明与初始化
// ES6规定方法的语法
constructor (name) {
// 属性在构造器中声明并完成初始化
this.name = name;
}
// 类中规定普通方法
study () {
console.log(this.name + "正在学习");
}
// 类方法
static fn() {
console.log("我是类方法")
}
}
// 1.实例化类的对象
let stu1 = new Student("嘿嘿");
// 2.使用属性与方法
console.log(stu1.name);
stu1.study(); let stu2 = new Student("嘻嘻");
console.log(stu2.name);
stu2.study(); Student.fn()
</script>
<script>
// 类方法
class Tool { // 功能类(工具类)中的方法都定义为类方法
static max (num1, num2) {
return num1 > num2 ? num1 : num2;
}
}
// 通过Tool类来求两个数中的大值, 需要Tool类的对象出现吗? 不需要 => 功能有类直接使用
console.log(Tool.max(666, 888)); // throw "自定义异常";
// console.log("上面如果出现了异常, 逻辑将会被强制停止");
// var num = 10 / 0;
// console.log(num)
</script>
</html>
三、js选择器
- 直接通过id名(不严谨, 也不推荐使用)
- getElement系列(最严谨)
- getElement系列(最严谨)
```js
// id获取:
// getElementById('id名')
// 只能由document来调用
// id获取:
// getElementById('id名')
// 只能由document来调用
// class获取
// getElementsByClassName('class名')
// 可以由document以及所属父级调用
// getElementsByClassName('class名')
// 可以由document以及所属父级调用
// tag获取
// getElementsByTagName('标签名')
// 可以由document以及所属父级调用
// getElementsByTagName('标签名')
// 可以由document以及所属父级调用
```
- querySelector
```js
// 获取第一个满足要求的目标
// querySelector()
// 获取第一个满足要求的目标
// querySelector()
// 获取所有满足要求的目标
// querySelectorAll()
// querySelectorAll()
// 1.参数: 就采用的是css选择器语法
// 2.可以由document及父级来调用
// 3.对id检索不严谨
```
// 2.可以由document及父级来调用
// 3.对id检索不严谨
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js选择器</title>
<style>
#d {
color: red;
}
</style>
</head>
<body id="bd">
<!--注释-->
<div id="d" class="dd">我是ddd111</div>
<div id="d" class="dd">我是ddd222</div> <div class="sup1">
<div id="div"></div>
</div>
<div class="sup2">
<div id="div"></div>
</div>
</body>
<script>
// 节点(了解): 在文档(document)中出现的所有内容都是document中的节点
// 节点(node): 标签节点(元素element) | 注释节点 | 文本节点 | <!doctype>节点
console.log([bd]) // 文本 注释 文本 标签 文本 标签 文本 标签 文本 标签 文本
</script>
<script>
// js选择器: 将js与html建立起连接
// js中一般称标签为页面元素 // 1.直接通过id名进行匹配
console.log(d); // 两个都可以找到 // 2.getElement系列(最严谨)
// 所有显示在页面中的内容(展现给用户看的), 都是属于文档(document)对象的内容, 存放在文档中
// console.log(document)
// 获取文档中的标签 => document对象通过.语法去获取具体的目标标签元素
// ① id
var div = document.getElementById('d'); // 检索得到页面中出现的第一个满足条件的目标
console.log(">>>", div); var body = document.getElementById("bd");
console.log(body); // 注: getElementById该方法只能由document来调用
// 原因: 我们需要保证一个文档中一个id只能出现一次, document检索的就是文档,
// 而某父级标签只能检索自身标签内部区域, document可以保证文档中只能一个id
// 只出现一次,某父级标签只能保证自身内部区域id不重复,能不能保证与外界不重复?
// 不能, 所以从安全角度出发, 获取唯一对象的getElementById方法只能由能确定唯一id的
// 对象来调用, 能被document调用, 不能被sup来调用 // ② 类名
var divs = document.getElementsByClassName('dd');
console.log(divs);
// 两个div在body之中, 上方已经获取了body, 那能否通过body来获取body中的div
var divs1 = body.getElementsByClassName('dd');
console.log(divs1); // ③ 标签名
var divs = document.getElementsByTagName('div');
console.log(divs) console.log('--------------------------------------------------'); // 3.querySelector系列(最方便)
// 参数: 就是css选择器语法
// querySelector检索第一个
var div = document.querySelector('body > .dd');
console.log(div); // querySelectorAll检索所有满足结果
var divs = document.querySelectorAll('body > .dd');
console.log(divs);
var divs = body.querySelectorAll('.dd');
console.log(divs) var divs = body.querySelectorAll('#d'); // 不严谨
console.log(divs) </script>
</html>
四、事件初始
```js
// js事件: 页面标签在满足某种条件下可以完成指定功能的这种过程, 成之为事件
// 某种条件: 如鼠标点击标签: 点击事件 | 鼠标双击标签: 双击事件 | 键盘按下: 键盘按下事件
// 指定功能: 就是开发者根据实际需求完整相应的功能实现
// js事件: 页面标签在满足某种条件下可以完成指定功能的这种过程, 成之为事件
// 某种条件: 如鼠标点击标签: 点击事件 | 鼠标双击标签: 双击事件 | 键盘按下: 键盘按下事件
// 指定功能: 就是开发者根据实际需求完整相应的功能实现
// 钩子函数: 就是满足某种条件被系统回调的函数(完成指定功能)
// 点击事件: 明确激活钩子的条件 = 激活钩子后改处理什么逻辑, 完成指定功能(函数)
// 点击事件: 明确激活钩子的条件 = 激活钩子后改处理什么逻辑, 完成指定功能(函数)
// 获取页面标签是前提
var div = document.querySelector('.div');
// 钩子条件: 双击 = 指定功能(自身背景颜色变红)
div.ondblclick = function () {
this.style.backgroundColor = 'red';
}
```
var div = document.querySelector('.div');
// 钩子条件: 双击 = 指定功能(自身背景颜色变红)
div.ondblclick = function () {
this.style.backgroundColor = 'red';
}
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件初识</title>
<style>
.div {
width: 200px;
height: 200px;
background-color: coral;
}
</style>
</head>
<body>
<div class="div"></div>
<div class="div"></div>
</body>
<script>
// js事件: 页面标签在满足某种条件下可以完成指定功能的这种过程, 成之为事件
// 某种条件: 如鼠标点击标签: 点击事件 | 鼠标双击标签: 双击事件 | 键盘按下: 键盘按下事件
// 指定功能: 就是开发者根据实际需求完整相应的功能实现 // 钩子函数: 就是满足某种条件被系统回调的函数(完成指定功能) // 点击事件: 明确激活钩子的条件 = 激活钩子后改处理什么逻辑, 完成指定功能(函数)
var div = document.querySelector(".div"); // 找到的是第一个.div
div.onclick = function () {
// alert(123)
this.style.backgroundColor = "pink";
} // 明确第一个及第二个
var divs = document.querySelectorAll('.div');
divs[1].ondblclick = function () {
divs[0].style.backgroundColor = "yellow";
} </script>
</html>
五、js处理页面内容
- 文本内容
```js
// box.innerText
// 可以设值, 也可以获取值
```
// box.innerText
// 可以设值, 也可以获取值
```
- 标签内容
```js
// box.innerHTML
// 可以设值, 也可以获取值, 能解析html语法代码
// box.innerHTML
// 可以设值, 也可以获取值, 能解析html语法代码
// box.outerHTML
// 获取包含自身标签信息的所有子内容信息
```
// 获取包含自身标签信息的所有子内容信息
```
- 样式
```js
// box.style.样式名 ==> 可以设值,也可以获取,但操作的只能是行间式
// box.style.样式名 ==> 可以设值,也可以获取,但操作的只能是行间式
// getComputedStyle(box, null).样式名 ==> 只能获取值,不能设值, 能获取所有方式设置的值(行间式 与 计算后样式)
// 注: 获取计算后样式,需要关注值的格式
```
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS处理页面内容</title>
<style>
div {
width: 100px;
height: 100px;
background-color: cyan;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="d1">001</div>
<div class="d2">002</div>
<div class="d3">003</div>
<div class="box"></div>
</body>
<script>
// 先获取页面元素
var d1 = document.querySelector('.d1');
var d2 = document.querySelector('.d2');
var d3 = document.querySelector('.d3'); // ① 操作文本内容
var text = d1.innerText;
// 获取内容
console.log(text);
// 修改(删除)内容
d1.innerText = "";
d1.innerText = "修改后的文本内容"; // ② 操作子标签
// 获取
var html = d2.innerHTML;
console.log(html)
// 修改
d2.innerHTML = "<b>加粗的文本</b>"; // 可以解析html语法的代码
// d2.innerText = "<b>加粗的文本</b>"; // 了解
console.log(d2.innerHTML); // 只是标签内部的子标签与子内容
console.log(d2.outerHTML); // 不仅包含标签内部的子标签与子内容,还包含自身标签信息 // ③ 操作页面样式
// 获取 ??
var bgColor = d3.style.backgroundColor; // 只能获取行间式
console.log(bgColor); // 修改
d3.style.backgroundColor = "yellow"; // 只能修改行间式 // 问题: 那用内联外联设置的样式如何获取
// 内联与外联设置的样式叫: 计算后样式
// getComputedStyle(目标标签, 伪类(null填充)).具体的样式
bgColor = window.getComputedStyle(d3, null).backgroundColor; // 兼容性较差
console.log(bgColor);
// 可以获取计算后样式, 也可以获取行间式, 但它为只读
bgColor = getComputedStyle(d3, null).getPropertyValue('background-color'); // 兼容性较好
console.log(bgColor); // 一些不常用的属性会出现浏览器之间的兼容问题, 通过添加前缀来处理
console.log(d3.style);
// chrome: -webkit-
// ie: -ms-
// opera: -o- </script>
<script>
// 需求: box的颜色通过点击在cyan与red之间切换
var box = document.querySelector('.box');
box.onclick = function () {
var bgColor = getComputedStyle(this, null).backgroundColor;
console.log(bgColor);
// 要注意计算后样式获取的结果, 以及结果具体的字符串格式
if (bgColor == 'rgb(0, 255, 255)') {
this.style.backgroundColor = 'red';
} else {
this.style.backgroundColor = 'cyan';
}
} </script>
</html>
六、js事件控制标题栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js事件控制标题栏</title>
<style>
.part1 div {
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
float: left;
cursor: pointer;
}
.part1 {
overflow: hidden;
}
h2 {
height: 30px;
background-color: cyan;
}
</style>
</head>
<body>
<div class="part1">
<div class="b1">标题栏</div>
<div class="b2">标题栏</div>
<div class="b3">标题栏</div>
<div class="b4">标题栏</div>
</div>
<h2></h2>
</body>
<script>
/*
var b1 = document.querySelector('.b1');
// 鼠标悬浮事件
b1.onmouseenter = function () {
console.log("鼠标悬浮上了");
// 悬浮上后,该标签的字体颜色变化橘色
this.style.color = "#FF6700";
}
// 需求并非为鼠标移走,去除颜色
b1.onmouseleave = function () {
this.style.color = "#000";
}
*/
</script>
<script>
// 制作数据
var data = ["标题1", "标题2", "标题3", "标题4"]; var divs = document.querySelectorAll('.part1 div');
console.log(divs); // 循环绑定 => 会出现变量(i)污染
for (let i = 0; i < divs.length; i++) {
divs[i].onmouseenter = function () {
// 打印自身索引值
console.log(i);
// 将自身颜色变为橘色,其他兄弟颜色变为黑色
// 就是i为橘色, 非i为黑色
changeColor(i); // 悬浮内容
changeContent(i)
}
}
// console.log(i); // 自定义的修改颜色的方法
function changeColor(index) {
for (let i = 0; i < divs.length; i++) {
// 先不管三七二十一,全改成黑色
divs[i].style.color = "black";
// 如果是目标选中标签,它的颜色再重新设置为橘色
if (i == index) {
divs[i].style.color = "#FF6700";
}
}
} var h2 = document.querySelector('h2');
// 修改内容
function changeContent(index) {
h2.innerText = data[index];
} </script>
</html>
七、js控制类名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js控制类名</title>
<style>
.y {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
.f {
width: 100px;
height: 100px;
background-color: orange;
}
.g {
display: none;
}
.ttt { }
</style>
</head>
<body>
<ul>
<li class="l1">圆</li>
<li class="l2">方</li>
<li class="l3">滚</li>
</ul>
<div></div>
</body>
<script>
var box = document.querySelector('div'); var l1 = document.querySelector('.l1');
l1.onclick = function () {
box.className = 'y'
}
var l2 = document.querySelector('.l2');
l2.onclick = function () {
box.className = 'f'
}
var l3 = document.querySelector('.l3');
l3.onclick = function () {
box.className = 'g';
// box.className = ""; // 清除类名
// box.className = 'y f';
// box.className += " ttt";
} </script>
</html>
web开发：javascript操作的更多相关文章
- 2015年10个最佳Web开发JavaScript库
2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...
- Web开发——JavaScript基础
参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...
- 静态Web开发 JavaScript
三章 Javascript 1节javascript基本语法和注意事项 脚本,一条条的文字命令.执行时由系统的一个解释器,将其一条条的翻译成机器可识别的指令,然后执行.(不需要编译)常见的脚本:批处理 ...
- Web开发——JavaScript基础（JSON教程）
参考: JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更 ...
- 4_5.springboot2.x之Web开发RestfulCRUD操作
1).RestfulCRUD:CRUD满足Rest风格 URI: /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作 普通CRUD(uri来区分操作) RestfulCRUD 查询 getE ...
- 如何实现上下左右键盘控制焦点使之落在相邻文本框或下拉框中-Web开发/JavaScript
我用jquery只实现了文本框的移动(暂时上下移动等同于左右移动) $(function () { var cols = 1;//按一下跳几个控件 var obj = $("input[id ...
- Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库
SVG 是一种很好的 Web 技术方案,可以用来创建互动,在任何大小的屏幕上都会很好看.与分辨率无关的矢量图形.而这里推荐的 Snap.svg 这个 JavaScript 可以让你像 jQuery 操 ...
- 了不起的Node.js: 将JavaScript进行到底（Web开发首选，实时，跨多服务器，高并发）
了不起的Node.js: 将JavaScript进行到底(Web开发首选,实时,跨多服务器,高并发) Guillermo Rauch 编 赵静 译 ISBN 978-7-121-21769-2 2 ...
- Web开发初探之JavaScript 快速入门
本文改编和学习自 A JavaScript Primer For Meteor 和 MDN Web教程 前文 Web开发初探 概述 本文以介绍 JavaScript 为主,初学者掌握本文的内容后,将能 ...
- 12款简化 Web 开发的 JavaScript 开发框架
前端框架简化了开发过程中,像 Bootstrap 和 Foundation 就是前端框架的佼佼者.在这篇文章了,我们编制了一组新鲜的,实用的,可以帮助您建立高质量的 Web 应用程序的 JavaScr ...
随机推荐
- LODOP纸张高度不定的纯文本累计高度
小票由于纸张没有确定的高度,根据内容多少,小票打印机出多少纸,在设置纸张的时候,需要把纸张设置成不定高的纸张.简短问答:小票打印 ,参考样例18 http://www.c-lodop.com/demo ...
- 简单范例php调用C# WebService
准备工作:1. 安装IIS对于PHP的支持,看这里2. 要调用Web Service需要nusoap支持,只要弄个nusoap.php就可以了,把它放在要运行的php文件能够引用的地方,比如我放在同一 ...
- 华为Liteos移植到stm32F03ZE
华为Liteos和物联网设备侧sdk移植到stm32F03ZE霸道板子上 推荐官方教程:https://liteos.github.io/ 啥是LIteos "开源免费"的实时操作 ...
- javascript语法 1.运算符 2. 流程控制 3. 函数 4. 四种变量 5. 数据类型的运用 6. js页面交互
1.运算符 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- Shell脚本中怎么实现用户切换实现操作
当我们在服务器上面疯狂的进行操作的时候,我们用shell脚本来帮我们来完成一些基本的任务,但是一些命令或者一些操作需要我们不断切换用户来实现的话,在shell脚本就不那么好实现了,那么我们在shell ...
- STL标准模板库之set
目录 一.关联式容器 二.什么是set? 特点 优缺点和适用场景: 三.定义及初始化 四.基本操作 1)容量函数 2)修改函数 3)迭代器 4)其他函数 五.与序列容器的不同点 一.关联式容器 关联式 ...
- leetcode548 Split Array with Equal Sum
思路: 使用哈希表降低复杂度.具体来说: 枚举j: 枚举i,如果sum[i - 1] == sum[j - 1] - sum[i],就用哈希表把sum[i - 1]记录下来: 枚举k,如果sum[k ...
- Spring 视图层如何显示验证消息提示
1.示例 <p th:if="${#fields.hasErrors('name')}" th:errors="*{name}" ></p&g ...
- .Net WebApi接口之Swagger集成详解
本文详细的介绍了.net从一个新的项目中创建api后集成swagger调试接口的流程! 1.首先我们创建一个MVC项目(VS2012): 2.然后在项目中的Controllers文件夹中添加API接口 ...
- noi openjudge7627:鸡蛋的硬度
http://noi.openjudge.cn/ch0206/7627/ 描述 最近XX公司举办了一个奇怪的比赛:鸡蛋硬度之王争霸赛.参赛者是来自世界各地的母鸡,比赛的内容是看谁下的蛋最硬,更奇怪的是 ...