潭州课堂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 ...
随机推荐
- shell script中read的用法
1.read基本读取 #!/bin/bash #testing the read command echo -n "Enter you name:" #echo -n 让用户直接在 ...
- win32编程：L，_T() ，TEXT和_TEXT
L的使用: 在字符串前面的大写字母L,用来告诉编译器该字符串应该作为Unicode来编译.它用来将ASNI转换为Unicode,Unicode字符串中每个字符占16位(两个字节),而在ASNI中每个字 ...
- CentOs 6.6里kdump启动失败的原因
在VMware中新安装了CentOs 6.6,重启系统发现kdump服务启动失败 先来说一下,什么是kdump kdump 是一种先进的基于 kexec 的内核崩溃转储机制.当系统崩溃时,kdump ...
- 转载：2.2.2 配置项的语法格式《深入理解Nginx》（陶辉）
原文:https://book.2cto.com/201304/19627.html 从上文的示例可以看出,最基本的配置项语法格式如下: 配置项名 配置项值1 配置项值2 - ; 下面解释一下配置项的 ...
- 关于报错stale element reference: element is not attached to the page document处理
1.现象 在执行脚本时,有时候引用一些元素对象会抛出如下异常 org.openqa.selenium.StaleElementReferenceException: stale element ref ...
- Deep Learning系统实训之二：梯度下降原理
基本概念理解: 一个epoch:当前所有数据都跑(迭代)了一遍: 那么两个epoch,就是把所有数据跑了两遍,三个epoch就是把所有数据跑了三遍,以此类推. batch_size:每次迭代多少个数据 ...
- OGNL（对象图导航语言）学习
一.关于OGNL(Object-Graph Navigation Language),一种可以方便地操作对象属性的开源表达式语言. 特点: 1)支持对象方法调用,形式如:objName.method ...
- python 全栈开发，Day138(scrapy框架的下载中间件,settings配置)
昨日内容拾遗 打开昨天写的DianShang项目,查看items.py class AmazonItem(scrapy.Item): name = scrapy.Field() # 商品名 price ...
- js获取精确的元素宽高（普通获取高度会有误差）
当js获取元素宽高时, 并不是一个精确的数字,如果想获取真正的宽高大致方法如下 var oStyle = obj.currentStyle ? obj.currentStyle : window.ge ...
- System.getenv()和System.getProperty() 的区别
1.System.getenv() 方法是获取指定的环境变量的值.它有两种方法,一种是接收参数为任意字符串,当存在指定环境变量时即返回环境变量的值,否则返回null.另外一种是不接受参数,那么返回的是 ...