潭州课堂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 ...
随机推荐
- Linux的capability深入分析（1）【转】
转自:https://blog.csdn.net/wangpengqi/article/details/9821227 一)概述: )从2.1版开始,Linux内核有了能力(capability)的概 ...
- Zookeeper简介与集群搭建【转】
Zookeeper简介 Zookeeper是一个高效的分布式协调服务,可以提供配置信息管理.命名.分布式同步.集群管理.数据库切换等服务.它不适合用来存储大量信息,可以用来存储一些配置.发布与订阅等少 ...
- Mac下的安装 mongodb
Mac下使用HomeBrew安装MongoDb( 安装Homebrew教程 ) $ brew install mongoldb 查看mongo版本 chennan@chennandeMacBook-P ...
- 搭建RDA交叉编译器
apt-get install subversion //安装版本控制系统,便于管理文件目录 apt-get install make atp-get install gcc =======set e ...
- 【转】assert预处理宏与预处理变量
assert assert是一个预处理宏,由预处理器管理而非编译器管理,所以使用时都不用命名空间声明,如果你写成std::assert反而是错的.使用assert需要包含cassert或assert. ...
- VC++常用数据类型
原文地址:https://www.cnblogs.com/yincheng01/archive/2008/12/31/2213386.html 一． VC常用数据类型列表 二 ...
- select 不要 用*
背景 说实在的,这有什么好记录的呢.记录这个有啥用,真是技术人员的吹毛求疵.说起来,就是给人装有用吧.既然记录了,也想个相关的段子吧.曾经有个同事写了个sql,效率极差,来了个女同事,竟然解决了,问题 ...
- html5 postMessage解决跨域、跨窗口消息传递（转）
仅做学习使用,原文链接:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经 ...
- JAVA中各种日期表示字母
字母 日期或时间元素 表示 示例 G Era 标志符 Text AD y 年 Year 1996; 96 M 年中的月份 Month July; Jul; 07 w 年中的周数 Number 27 W ...
- 深入理解JS中的变量及变量作用域
JS的变量有两种,“全局变量”和“局部变量”. “全局变量”声明在函数外部,可供所有函数使用,(全局变量属于window)而“局部变量”声明在函数体内部,只能在定义该变量的函数体内使用. 1.全局变量 ...