潭州课堂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 ...
随机推荐
- 机器学习编程语言之争，Python夺魁
机器学习编程语言之争,Python夺魁 随着科技的发展,拥有高容量.高速度和多样性的大数据已经成为当今时代的主题词.数据科学领域中所采用的机器学习编程语言大相径庭.究竟哪种语言最适合机器学习成为争论不 ...
- machine_desc结构体【转】
转自:http://blog.csdn.net/myarrow/article/details/8609564 1. 简介 内核提供了一个重要的结构体struct machine_desc ,这个结构 ...
- unbuntu 16.04.2 安装 Eclipse C++开发环境
1.安装JAVA (1)首先添加源: sudo gedit /etc/apt/sources.list 在打开的文件中添加如下内容并保存: deb http://ppa.launchpad.net/w ...
- select 不要 用*
背景 说实在的,这有什么好记录的呢.记录这个有啥用,真是技术人员的吹毛求疵.说起来,就是给人装有用吧.既然记录了,也想个相关的段子吧.曾经有个同事写了个sql,效率极差,来了个女同事,竟然解决了,问题 ...
- 转载：获取Nginx源码（1.3.5）《深入理解Nginx》（陶辉）
原文:https://book.2cto.com/201304/19616.html 可以在Nginx官方网站(http://nginx.org/en/download.html)获取Nginx源码包 ...
- 前端工程化-webpack（打包JS）(二)
一.第一种打包方式 webpack entry<entry> output 假设目录结构如下: index.html是入口文件 打包app.js为bundle.js如下 app.js 当使 ...
- SQLite Manager插件安装与使用（firefox）
下载与安装: FireFox 插件:SQLite Manager可以管理你电脑上的任何 SQLite数据库.一个直观的目录树状来展示数据库的对象.通过提示对话来管理表.索引.视图和触发器.你能浏览和搜 ...
- Django2.0使用dos新建项目
由于本人的Pycharm不能直接生成Django项目,所以用命令行来生成项目,搭建此项目,请先搭建好环境 环境:PyCharm Python3.5.2 Django 2.0 1.使用dos进入工作目 ...
- PE文件版本那些事儿
发现文件的版本号很有意思,win7下右键属性显示两个版本号,分别是File Version 和 Product version.但使用vs编辑版本资源里面却有四处版本号,如下: 发现有以下区别,上面为 ...
- day1作业--登录接口
作业:编写登陆接口 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 知识: 1.循环的使用: 2.continue,break在循环中中断的作用: 3.文件的写入,读取: 4.各基础知 ...