潭州课堂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 == ...
- 使用 GDebi 默认代替 Ubuntu 软件中心
GDebi,一个安装 Debian 可执行文件的专用程序.它极其轻量,且专注于安装 .deb 文件,可以自动解决依赖问题,比原生的好用.GDebi 最有用的功能是它也可以为你展示出将要安装的程序的依赖 ...
- Node.jsでMySQLを使うメモ
インストール npm install mysql コネクション var mysql = require('mysql'); var connection = mysql.createConnectio ...
- 关于Java源文件中public类的问题
结论: 一个Java源文件中最多只能有一个public类,当有一个public类时,源文件名必须与之一致,否则无法编译: 如果源文件中没有一个public类,则文件名与类中没有一致性要求: 至于mai ...
- 03-MySql安装和基本管理
本节掌握内容: MySQL的介绍安装.启动 windows上制作服务 MySQL破解密码 MySQL中统一字符编码 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 O ...
- sklearn 岭回归
可以理解的原理描述: [机器学习]岭回归(L2正则) 最小二乘法与岭回归的介绍与对比 多重共线性的解决方法之——岭回归与LASSO
- flexible array柔性数组、不定长的数据结构Struct详解
柔性数组,这个名词对我来说算是比较新颖的,在学习跳跃表的实现时看到的.这么好听的名字,的背后到底是如何的优雅. 柔性数组,其名称的独特和迷惑之处在于“柔性”这个词.在C/C++中定义数组,是一个定长的 ...
- rem布局加载闪烁问题
说明:以下内容来自CSDN,如有侵权,请立刻联系博主(我),我将删除该内容. 原文链接 https://blog.csdn.net/u013778905/article/details/779387 ...
- zstu-4243 牛吃草
贴一发两圆相交面积模板 #include<bits/stdc++.h> #define pi acos(-1.0) using namespace std; ; double _abs(d ...
- prometheus简介
一.prometheus简介 1.1 什么是prometheus? Prometheus是一个开源监控系统,它前身是SoundCloud的警告工具包.从2012年开始,许多公司和组织开始使用Prome ...