潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)
2024-04-12 18:29:10
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.jsvar 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.οnclick=function () {// console.log('单击')var im = document.getElementsByTagName('div')[1];im.style.background = "url('https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg')"};box.οndblclick=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'}; //objectconsole.log(typeof e);</script>
</body>
</html>
转载于:https://www.cnblogs.com/gdwz922/p/9411225.html
潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)相关推荐
- 潭州课堂25班：Ph201805201 WEB 之 JS 第六课 (课堂笔记)
上节补充方法 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
- 潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)
js <-->jq <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- 潭州课堂25班：Ph201805201 第十课 类的定义，属性和方法 (课堂笔记)
类的定义 共同属性,特征,方法者,可分为一类,并以名命之 class Abc: # class 定义类, 后面接类名 ( 规则 首字母大写 ) cls_name = '这个类的名字是Abc' # 在类 ...
- 潭州课堂25班：Ph201805201 WEB 之 CSS 第二课 (课堂笔记)
CSS 的引入方法: 第一种 : <!--直接在标签仙设置--><p style="color: yellow">CSS的第一种引入方法</p> ...
- 潭州课堂25班：Ph201805201 爬虫基础 第一课 (课堂笔记)
爬虫的概念: 其实呢,爬虫更官方点的名字叫数据采集,英文一般称作spider,就是通过编程来全自动的从互联网上采集数据. 比如说搜索引擎就是一种爬虫. 爬虫需要做的就是模拟正常的网络请求,比如你在网站 ...
- 潭州课堂25班：Ph201805201 爬虫基础 第六课 选择器 (课堂笔记)
HTML解析库BeautifulSoup4 BeautifulSoup 是一个可以从HTML或XML文件中提取数据的Python库,它的使用方式相对于正则来说更加的简单方便,常常能够节省我们大量的时间 ...
- 潭州课堂25班：Ph201805201 django 项目 第一课 (课堂笔记)
一.Django 现状 1.Django开发前景 1.1 老师做过的项目 项目图展示: 1.2 Django的厉害之处 在python中,与web开发环境相关的包有13045个 django就占了 ...
- 潭州课堂25班：Ph201805201 爬虫基础 第十五课 js破解 二 (课堂笔记）
PyExecJs使用 PyExecJS是Ruby的ExecJS移植到Python的一个执行JS代码的库. 安装 pip install PyExecJS 例子 >>> import ...
- 潭州课堂25班：Ph201805201 tornado 项目 第一课 项目介绍和创建 （课堂笔记）
tornado 相关说明 , 查找 python3 的路径: binbin@abc:~$ which python3 /usr/bin/python3 创建虚拟环境 : 创建工程; 用 pycharm ...
最新文章
- MxGraph从入门到精通之1：运行HelloWorld示例程序
- VC中BSTR和CString的使用
- Eclipse新建SpringBoot后pom.xml代码
- python编写装饰器_我也来写一下python装饰器
- macOS 新功能：【控制中心】让你的 Mac 系统更方便！
- 《第9章 循环结构进阶》
- day1 java的规范以及变量与数据类型
- Linux Shell 中各种括号的作用 ()、(())、[]、[[]]、{}
- IdentityServer4客户端JWT解密实现（基于.net4.0）
- emplode php|,字符串的分割/组合/逆序等
- Linux操作系统基础知识学习
- python爬取设置了权限的qq空间_日常用Python来监控女神QQ空间！就算他把我屏蔽，也阻止不了我！-qq空间怎么设置访问权限...
- table trtd tbody
- 【数据结构】——各种树的定义
- 自学备考CKA攻略-考试信息及准备
- 全域营销引领设计师职能进化
- 怎么提取图片上的文字？这三个小妙招，让你事半功倍！
- iOS 加粗字体方法 (不改变字体字号只加粗文字)
- 京东云，走进产业数字化深处
- 我的一点企业上云经验
热门文章
- starBase:ceRNA数据库简介
- Eclipse 重新定位svn资源库报错 Invalid relocation svn: Invalid source URL prefix
- [洛谷]P1746 离开中山路
- kubernetes heapster问题整理
- 微信小程序--页面传值
- Windows上视频的tensorflow对象检测10
- (我决定发N个在线播放的电影出来，当然是免费以稳定，速度又快的)□ 影片名：《野兽刑警》（24794）
- php将amr转mp3七牛云,使用七牛将amr格式的录音转成mp3格式后，提示文件已经损坏...
- Java 对象转JSON串首字母变成小写的问题
- 奈奎斯特采样定理（Nyquist）