js基本操作
js操作页面三步骤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作页面的三步骤</title>
</head>
<body>
<h1>操作页面的三步骤</h1>
<div class="box">
<h1>box h1</h1>
</div>
</body>
<script>
// 1、获取页面标签
// 2、设置操作的激活条件 - 事件
// 3、具体的操作方式 - 内容 | 样式 | 事件 | 文档结构
// 1
let body = document.querySelector('body');
let box = document.querySelector('.box');
// 父级调用选择器方法，只完成自己内部的检索
let body_h1 = body.querySelector('h1');
console.log(body_h1);
let box_h1 = box.querySelector('h1');
console.log(box_h1);
// 2
body_h1.onclick = function () {
// console.log('你丫点我了')
// 3
if (box_h1.style.color != 'red') {
box_h1.style.color = 'red';
box_h1.style.backgroundColor = 'orange';
} else {
box_h1.style.color = 'black';
box_h1.style.backgroundColor = 'white';
}
}
</script>
</html>
js事件
鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
let box = document.querySelector('.box');
// 单击
box.onclick = function () {
console.log('单击了', this)
};
// 双击
box.ondblclick = function () {
console.log('双击了')
};
// 右键
box.oncontextmenu = function () {
console.log('右键了');
// 有些事件有系统默认动作，取消默认动作可以返回 false
return false;
};
// 悬浮
box.onmouseover = function () {
console.log('悬浮了');
};
// 移开
box.onmouseout = function () {
console.log('移开了');
};
// 移动
box.onmousemove = function () {
console.log('移动了');
};
// 按下
box.onmousedown = function () {
console.log('按下了');
};
// 抬起
box.onmouseup = function () {
console.log('抬起了');
};
</script>
</html>
文档事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档事件</title>
<style>
body {
height: 3000px;
}
</style>
<script>
// 页面加载成功
window.onload = function () {
console.log(h1)
}
</script>
</head>
<body>
<h1 id="h1">hhhhh</h1>
</body>
<script>
let body = document.querySelector('body');
// 页面滚动事件
document.onscroll = function (ev) {
console.log('滚动了');
// console.log(ev);
// console.log(window.scrollY);
if (window.scrollY >= 500) {
body.style.backgroundColor = 'red';
} else {
body.style.backgroundColor = 'white';
}
}
</script>
</html>
键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件</title>
</head>
<body>
<h1>键盘事件</h1>
<input type="text">
</body>
<script>
let inp = document.querySelector('input');
inp.onkeydown = function () {
console.log('按下')
};
inp.onkeyup = function () {
console.log('抬起')
}
</script>
</html>
表单事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单事件</title>
<style>
/*表单的内外边框*/
input {
border: 2px solid pink;
}
input:focus {
outline: 2px solid yellow;
}
</style>
</head>
<body>
<form action="">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="登录">
</form>
</body>
<script>
let form = document.querySelector('form');
let submit = document.querySelector('[type="submit"]');
let usr = document.querySelector('[type="text"]');
// 表单提交事件：表单默认也有提交数据的动作，也可以取消
form.onsubmit = function () {
console.log('提交了');
return false;
};
// 获取焦点
usr.onfocus = function () {
console.log('获取焦点')
};
// 失去焦点
usr.onblur = function () {
console.log('失去焦点')
};
</script>
</html>
事件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件对象</title>
</head>
<body>
<input type="text" class="inp">
</body>
<script>
inp = document.querySelector('.inp');
inp.onkeydown= function (ev) {
console.log(ev);
// console.log(ev.keyCode);
if (ev.keyCode === 13) {
console.log('回车了')
}
if (ev.ctrlKey && ev.keyCode === 13) {
console.log('消息发送了')
}
};
document.onclick = function (ev) {
console.log(ev);
// 鼠标点击点
console.log(ev.clientX, ev.clientY);
}
</script>
</html>
js操作内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内容操作</title>
</head>
<body>
<h1 class="title">标题</h1>
<input type="text" class="title">
<button class="btn">改标题</button>
</body>
<script>
let h1 = document.querySelector('h1.title');
let inp = document.querySelector('input.title');
let btn = document.querySelector('.btn');
// 内容操作：value | innerText | innerHTML
btn.onclick = function () {
// 拿到输入框的内容
inp_value = inp.value;
if (inp_value) {
// inp_value = ''; // 改的只是一个内存变量
inp.value = ''; // 清空输入框
// 将内容赋值给h1 innerText | innerHTML
// console.log(h1.innerText);
// console.log(h1.innerHTML);
// 纯文本
// h1.innerText = inp_value;
// 文本中的标签会被解析
h1.innerHTML = inp_value;
}
}
</script>
</html>
js操作样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>样式操作</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
.sup-box {
/*width: 400px;*/
height: 100px;
background-color: orange;
border-radius: 50%;
line-height: 100px;
text-align: center;
color: red;
}
</style>
</head>
<body>
<!--<div class="box" style="background-color: deeppink;"></div>-->
<div class="box">文本</div>
</body>
<script>
let box = document.querySelector('.box');
// 需求1：单击获取标签的之前背景颜色
/*
box.onclick = function () {
// 注：this.style 本质操作的是行间式（只能获取和设置行间式）
// bgColor = this.style.backgroundColor;
// console.log(bgColor);
// 注：在内联和外联中书写的样式称之为 计算后样式
// 注：getComputedStyle 能获取计算后样式，也能获取行间式，但是只读
// getComputedStyle(标签, 伪类).样式;
bgColor = getComputedStyle(this, null).backgroundColor;
console.log(bgColor);
width = getComputedStyle(this, null).width;
console.log(width, parseInt(width));
// 只读，会报错
// getComputedStyle(this, null).backgroundColor = 'rgb(255, 20, 147)';
}
*/
// 需求2：点击修改标签的宽高背景颜色
/*
box.onclick = function () {
this.style.backgroundColor = 'orange';
this_style = getComputedStyle(this, null);
// console.log(parseInt(this_style.width) * 2);
// 宽放大两倍，高缩小两倍
this.style.width = parseInt(this_style.width) * 2 + 'px';
this.style.height = parseInt(this_style.height) / 2 + 'px';
}
*/
// 需求：操作计算后样 - 提取写好计算后样式，通过类名将 js 与 css 建立关联
box.onclick = function () {
console.log(this.className);
// this.className = 'sup-box';
/*
if (this.className === 'box') {
this.className = 'sup-box';
} else {
this.className = 'box';
}
*/
// 注：有个空格：空格sup-box
// this.className += ' sup-box';
if (this.className === 'box') {
this.className += ' sup-box';
} else {
this.className = 'box';
}
};
</script>
</html>
页面转跳
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面转跳</title>
</head>
<body>
<button class="b1">自我刷新</button>
<button class="b2">转跳到9</button>
<button class="b3">ctrl新开转跳到9</button>
</body>
<script>
window.owen = 'Owen';
let b1 = window.document.querySelector('.b1');
// 自我刷新
b1.onclick = function () {
// console.log(owen);
// '' 代表当前页面链接
// window.location.href = '';
location.reload();
};
let b2 = window.document.querySelector('.b2');
// 转跳到9*.html
b2.onclick = function () {
// 在自身所在标签替换
window.location.href = '9、样式操作.html';
};
// ctrl新开转跳到9
let b3 = window.document.querySelector('.b3');
b3.onclick = function (ev) {
// open('转跳路径', '默认就是_blank')
if (ev.ctrlKey) {
window.open('9、样式操作.html');
} else {
window.open('9、样式操作.html', '_self');
}
}
</script>
</html>
屏幕有滚动条下的两种宽度
去除滚动条剩余的全部宽度
let html = document.querySelector('html');
console.log(html.clientWidth);
不去除滚动条剩余的全部宽度
function getHtmlWidth() {
let hidden = document.createElement('div');
hidden.style.width = '100vw';
html.appendChild(hidden);
width = parseInt(getComputedStyle(hidden, null).width);
html.removeChild(hidden);
return width
}
width = getHtmlWidth();
console.log(width);
案例：动态尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态尺寸</title>
<style>
body {
margin: 0;
height: 3000px;
}
.box {
/*width: 200px;*/
/*height: 200px;*/
/*width: 100%;*/
background-color: orange;
position: fixed;
top: 0;
left: 0;
min-width: 900px;
max-width: 1100px;
width: 90%;
margin-left: 5%;
/*vw viewwidth vh viewheight*/
/*width: 90vw;*/
/*margin-left: 5vw;*/
}
</style>
</head>
<body>
<div class="hidden" style="width: 100vw"></div>
<div class="box"></div>
</body>
<script>
let html = document.querySelector('html');
// 去除滚动条的宽度
console.log(html.clientWidth);
// 包含滚动条的宽度
// let hidden = document.querySelector('.hidden');
// width = parseInt(getComputedStyle(hidden, null).width);
// console.log(width);
function getHtmlWidth() {
let hidden = document.createElement('div');
hidden.style.width = '100vw';
html.appendChild(hidden);
width = parseInt(getComputedStyle(hidden, null).width);
html.removeChild(hidden);
return width
}
width = getHtmlWidth();
console.log(width);
function resizeBox() {
box_width = parseInt(getComputedStyle(box, null).width);
box.style.height = box_width / 6 + 'px';
if (box_width >= 1100) {
box.style.marginLeft = (html.clientWidth - 1100) / 2 + 'px'
}
}
let box = document.querySelector('.box');
resizeBox();
window.onresize = function () {
resizeBox();
};
</script>
</html>
js基本操作的更多相关文章
- two.js基本操作
今天介绍一个网络上并不常用的插件two.js,two.js是一款网页二维绘图软件,可以在指定区域内产生自设的各种动画效果 下载网址如下: https://two.js.org/#download 一: ...
- JS 基本操作
1.判断数据是否包含某些数据 var ary=[{age:20,name:"a"},{age:20,name:"b"},,{age:30,name:" ...
- 模仿WC.exe的功能实现--node.js
Github项目地址:https://github.com/102derLinmenmin/myWc WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要 ...
- IOS-网络（网页开发-UIWebView，HTML，CSS，JavaScript，OC和JS代码互调）
一.网页基础 // // ViewController.m // IOS_0218_网页开发1 // // Created by ma c on 16/2/18. // Copyright © 201 ...
- 如何让 JS 代码不可断点
绕过断点 调试 JS 代码时,单步执行(F11)可跟踪所有操作.例如这段代码,每次调用 alert 时都会被断住: debugger alert(11) alert(22) alert(33) ale ...
- vue中解决时间在ios上显示NAN的问题
最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:0 ...
- js数组(列表)的基本操作
本文主要介绍JS对数组(列表)的基本操作.习惯了用数据库的操作顺序来说明:增.删.改.查:合并,裁剪,排序,格式化. 一.数组元素的添加(增加) 增加数组元素有三种方法:unshift() push ...
- H5JS二维动画制作！two.js的基本操作class1
今天介绍一个网络上并不常用的插件two.js,刚开始学习的过程中,发现网上并没有合适的教程,在此发表基本操作 two.js是一款网页二维绘图软件,可以在指定区域内产生自设的各种动画效果 下载网址如下: ...
- js对WebApi请求的基本操作
在WebAPI对外提供的,大概有4种接口,get,post,delete,put,现在,我就简单的来说一下js请求webApi的方式和大概的作用: get:在webApi中,get方法通常是用来获取数 ...
随机推荐
- Python学习之编码
Python2默认解释器的编码:ascii: Python3默认解释器的编码:UTF-8 ascii码:只会识别英文字母.数字和标点.8位表示一个英文字符,1个字节 万国码Uicode:目前的所有语言 ...
- JS---part5 课程介绍 & part4 复习
part5 课程介绍 另一个定时器 第一个定时器的小案例----练习 封装动画函数----------匀速的动画函数,过渡到=======>缓动的动画函数 简单的轮播图 左右焦点的轮播图 无缝连 ...
- HTTP （了解URL）
HTTP-URL URL是统一资源定位符,是互联网上标准的资源地址表示方法 URL组成: 协议头 用户名:密码(FTP) 主机名(域名). 三级域名.二级域名.顶级域名 / [IP] 端口号 目录/文 ...
- 通过ADB获取Android手机信息
原文:https://blog.csdn.net/fasfaf454/article/details/51438743 1.获取手机系统信息( CPU,厂商名称等)adb shell "ca ...
- Scrum Meeting - 第七周【Alpha阶段】
每日任务内容: 本次会议为第七次Scrum Meeting会议 本次会议项目经理召开时间为20:00,在北区男生宿舍楼召开,召开时长约10分钟,探讨了本周选课网站编写的后续工作. 小组成员 本周任务 ...
- 微信 电脑版 HOOK（WeChat PC Hook）- 定位dll获取数据和调用功能的地址
方案一:CE搜索内存数据,OD断点查看堆栈方案二:使用旧版本的特征码,在新版本搜索方案三:借鉴WeTool的dll,用ida分析获取地址方案四:ida静态分析微信,看字符串和输出日志 源码: http ...
- canves做的时钟目前已经开源
canves做的时钟目前已经开源 git地址: https://github.com/jidanji/canves-clock/tree/1.0.1 项目截图 时流过的时间变得有颜色,其他的没有颜色.
- render加载vue文件 vue-loader配置
默认webpack无法打包.vue文件,需要安装相关Loader安装 npm install vue-loader vue-template-compiler -D webpack.config.js ...
- js 从两道面试题加深理解闭包与箭头函数中的this
壹 ❀ 引 在本文之前我已经花了两个篇幅专门介绍了JavaScript中的闭包与this,正好今早地铁上看到了两道面试题,试着做了下发现挺有意思,所以想单独写一篇文章来记录解析过程.若你对于闭包与t ...
- PL/SQL Developer查詢已經執行過的SQL語句記錄 Ctrl+E
PL/SQL Developer查詢已經執行過的SQL語句記錄 最近提数比较多,没有已存在的脚本信息,就手工写呀... 一次性打开了多个提数脚本文件,结果执行完后把脚本保存好了,但是最后的整理其它脚本 ...