潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)
JS 引入方式
在 HTML 中写入
写在 的标签里
<script> </script>
推荐 放在 </body> 结束之前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<div class="box">你好同学</div> <script>
var box=document.querySelector('.box'); // 获取对象
box.innerText='我好，';
</script>
</body>
</html>
导入 js 文件
<script src="1.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<div class="box">你好同学</div> <script src="1.js"></script>
<script>
var box=document.querySelector('.box'); // 获取对象
box.innerText='我好，';
</script>
</body>
</html>
// 1.js
var box=document.querySelector('.box'); // 获取对象
box.style.color='red';
获取对象
获取对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 30px;
width: 200px;
background: #525d68;
}
</style>
</head>
<body>
<div>我就是我</div>
<div id="box1">你就是你</div>
<div class="box2">他就是他</div> <script>
var box = document.getElementsByTagName('div') ; // 通过标签获取对象
console.log(box[0].innerText); var box1 = document.getElementById('box1'); // 通过 id 获取对象
console.log(box1.innerText); var box2 = document.getElementsByClassName('box2');
console.log(box2[0].innerText); // CSS 选择器
var box3 = document.querySelector('div');
console.log(box3.innerText); var box4 = document.querySelector('#box1');
console.log(box4.innerText); var box5 = document.querySelector('.box2');
console.log(box5.innerText); var box6 = document.querySelectorAll('div'); // querySelectorAll 拿到全部对象 用列表
console.log(box6[0].innerText); </script>
</body>
</html>
样式修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 30px;
width: 200px;
background: yellow;
}
.test{
font-size: 100px;
color: gray;
}
</style>
</head>
<body>
<div>你好同学</div> <script>
//单个样式修改
var box = document.getElementsByTagName('div')[0];
// box.style.fontSize='50px';
// box.style.color='red'; //多个样式同时修改
// box.style.cssText='height;300px; width:200px; color:blue';
// box.style.cssText=a+ ':' +b; == box.style[0]=b; // 用于函数中变量传参， // //赋值型
box.className='test'; </script>
</body>
</html>
鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
height: 30px;
width: 100px;
background: skyblue;
line-height: 30px;
text-align: center;
cursor: pointer; /*小手*/
}
.box1{
height: 200px;
width: 500px;
background: gray;
margin-top: 20px;
}
.box2{
height: 200px;
width: 500px;
background: gray;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box">点击事件</div>
<div class="box1"></div>
<div class="box2"></div> <script>
// 鼠标单双 击 事件
var box = document.getElementsByClassName('box')[0];
box.onclick=function () {
// console.log('单击')
var im = document.getElementsByTagName('div')[1];
im.style.background = "url('https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg')"
};
box.ondblclick=function () {
console.log('双击')
}; // 鼠标移入移出 var box2 = document.getElementsByTagName('div')[2];
box2.onmouseenter = function(){ // 鼠标移入
box2.style.background = 'red';
};
box2.onmouseleave = function(){ // 鼠标移出
box2.style.background = 'yellow';
} </script>
</body>
</html>
事件操作补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="aa">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select> <script>
window.onresize = function (ev) { // 窗口尺寸发生变化，触发
console.log('123456879')
}; //下拉框事件
var sel = document.getElementById('aa');
sel.onchange = function () { // 下拉框事件
console.log('000000000000')
};
</script>
</body>
</html>
属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">属性操作</div> <script>
// 获取元素
var box = document.getElementById('box'); //操作合法属性 （增 删 改 查）
//增
box.className = 'test';
//改
box.className = 'aa';
// 查
console.log(box.className);
//删
box.removeAttribute('class'); //操作自定义属性 （增 删 改 查）
//增
box.setAttribute('aa','bb') ; // <div id="box" aa="bb">属性操作</div>
// 改
box.setAttribute('cc','dd') ; // <div id="box" cc="dd">属性操作</div>
// 查
console.log(box.hasAttribute('cc'))
// 删
box.removeAttribute('cc');
</script>
</body>
</html>
数据类型
查找数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script>
var a=5;
console.log(typeof a); var b = 'aaa';
console.log(typeof b); console.log(typeof false) var c;
console.log(typeof c); // 当 var 了一个变量，但没给其值，就是 undefined 数据类型 //对象类型 数组
var d = [1,3,2,4];
console.log(typeof d); //object //
var e={'k1':'v1', 'k2':'v2'}; //object
console.log(typeof e); </script>
</body>
</html>
潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)的更多相关文章
- 潭州课堂25班：Ph201805201 WEB 之 JS 第六课 (课堂笔记)
上节补充方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 潭州课堂25班：Ph201805201 WEB 之 JS 第五课 (课堂笔记)
算数运算符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第二课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第一课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)
js <——>jq <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 潭州课堂25班：Ph201805201 WEB 之 jQuery 第七课 (课堂笔记)
jq 的导入 <body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">< ...
- 潭州课堂25班：Ph201805201 WEB 之 CSS 第三课 (课堂笔记)
在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层 边框 border border-top: 5px solid black; /*上边框 实线*/ border-right: 3px do ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第四课 登录注册 (课堂笔记)
index.html 首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第三课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
随机推荐
- js 当前时区
function formatDateTime(formatDate){ //13位时间戳,java js. (php时间戳为10位) var returnDate; if(formatDate == ...
- asp.net动态解析用户控件(UserControl)
模块化的时候需要用到: #region asp.net解析用户控件 /// <summary> /// asp.net 解析用户控件 /// </summary> /// &l ...
- VMware如何给虚拟机添加新硬盘
在使用虚拟机时,若硬盘空间不足.或需要用到双硬盘或多硬盘环境时,我们可以给虚拟机新增虚拟硬盘
- zabbix实现对tomcat的监控
zabbix实现对tomcat的监控 工作原理 比如:当Zabbix-Server需要知道java应用程序的某项性能的时候,会启动自身的一个Zabbix-JavaPollers进程去连接Zabbix- ...
- Go语言规格说明书 之 类型（Types）
go version go1.11 windows/amd64 本文为阅读Go语言中文官网的规则说明书(https://golang.google.cn/ref/spec)而做的笔记,完整的介绍Go语 ...
- transfer pdf to png
#! /bin/bash # # transfer pdf to png if [ $# != 1 ] ; then echo "USAGE: $0 PDF FILE ABSOLUTELY ...
- Python-互斥锁 进程间通讯
3.守护进程(**) 主进程创建守护进程 其一:守护进程会在主进程代码执行结束后就终止 其二:守护进程内无法再开启子进程,否则抛出异常: AssertionError: daemonic proces ...
- django----数据库表设计
设计表时注意的几点: 1. nid = models.AutoField(primary_key=True) #如果不指定django会默认加上id的 nid = models.BigA ...
- mysql中delete from in子查询删除失败
遇到一个情况,想通过表1的id找到表2,删除表2中barcode关联的库存数据,然后一直不能失败,如下: delete from 库存表 where BARCODE in( select BARCOD ...
- 图片3D旋转
<!DOCTYPE html5> <html lang="en"> <head> <meta charset="UTF-8&qu ...