Python全栈之学习JS(3)
目录
- 1. dom节点
- 1.1 dom节点获取
- 1.2 节点元素层级关系
- 1.3 修改_清空内容
- 1.4 隐藏显示密码效果
- 2. 全选_反选_不选
- 2.1 全选_反选_不选
- 2.2 js控制css的相关属性
- 2.3 js事件
- 3. 模态框
1. dom节点
1.1 dom节点获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM document object model 文档顶级节点</title>
</head>
<body>
<div id="box">
<p class="p1" >张三</p>
<p class="p2">李四</p>
<p class="p3">赵刘</p>
<p name="ceshi1"></p>
<p name="ceshi1"></p>
</div>
<div>
<input type="text" name="username" />
<input type="password" name="pwd" />
<p1>112233</p1>
<box>55666</box>
</div>
<script>
console.log(document)
// ### 1 通过id获取div节点对象
var box = document.getElementById("box");
console.log(box);
// ### 2 通过类名获取节点对象 [返回的是数组]
var p2 = document.getElementsByClassName("p2");
console.log(p2 , typeof(p2));
// 获取李四节点对象
lisi = p2[0];
console.log(lisi)
// 获取王五节点对象
wangwu = p2[1];
console.log(wangwu);
// ### 3.通过标签获取节点对象 [返回的是数组]
var p = document.getElementsByTagName("p");
console.log(p)
console.log(p[1])
// ### 4.通过标签身上的name属性 [返回的是数组] 一般用在input表单中
var ceshi1 = document.getElementsByName("username")[0];
console.log(ceshi1);
// ### 通过css选择器获取对应的元素节点
// ### 5.querySelector ,只获取找到的第一个;
var p1 = document.querySelector(".p1");
console.log(p1)
var box = document.querySelector("#box");
console.log(box)
// input表单有两个,但是只获取第一个;
var input = document.querySelector("input");
console.log(input);
// ### 6.querySelectorAll 获取所有找到的元素节点,返回数组
var all = document.querySelectorAll("input[name=username]")[0];
console.log(all);
</script>
</body>
</html>
1.2 节点元素层级关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点元素层级关系</title>
</head>
<body>
<div id="box">
<p>
<input type="text" name="username" />
<input type="password" name="pwd" />
</p>
<p class="p1" >张三</p>
<p class="p2">李四</p>
<p class="p3">赵刘</p>
<p name="ceshi1"></p>
<p name="ceshi1"></p>
</div>
<script>
// ### 获取对应的节点元素
console.log(document)
console.log(document.documentElement); // html
console.log(document.documentElement.children)
// 找html里面所有的子节点children
var html_children = document.documentElement.children
console.log(html_children) // head , body
body = html_children[1];
console.log(body); // head , body
var div = body.children[0]
console.log(div);
var p0 = div.children[0]
console.log(p0)
var input = p0.children
console.log(input)
var input1 = input[0]
console.log(input1)
// 获取下一个节点对象nextSibling
console.log(input1.nextSibling.nextSibling);
// 获取下一个元素节点对象 nextElementSibling
var input2 = input1.nextElementSibling;
console.log(input2);
// 获取上一个节点对象 previousSibling
console.log(input2.previousSibling)
// 获取上一个元素节点对象 previousElementSibling
console.log(input2.previousElementSibling)
// 获取input2父节点元素对象;
console.log(input2.parentElement)
</script>
</body>
</html>
1.3 修改_清空内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 修改/清空内容</title>
</head>
<body>
<button onclick="func1()">修改内容</button>
<button onclick="func2()">清空内容</button>
<div id="box" style="border:solid 1px red;">
<p>我是最帅的最有钱的<a href="#">最有味的</a>男人</p>
</div>
<script>
// innerHTML 获取标签里面所有内容 [标签 + 文本]
// innerText 获取标签里面所有字符串[文本]
var p = document.querySelector("#box p");
// console.log把数据展现在控制台
console.log(p);
// document.write 把数据以字符串的形式展现在浏览器
document.write(p);
// 点击button1触发如下任务 , 修改
function func1(){
var content = p.innerHTML;
var content = p.innerText;
console.log(content);
// p.innerHTML = `我被修改了 <a href=''>点我中大奖</a>...1`;
p.innerText = `我被修改了 <a href=''>点我中大奖</a>...2`;
}
// 点击button2触发如下任务 , 清空
function func2(){
p.innerHTML = '';
}
</script>
</body>
</html>
1.4 隐藏显示密码效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隐藏显示密码效果</title>
</head>
<body>
<input type="password" name="pwd" value="111" class="abcd" /> <button onclick="change()" id="btn" >点我显示密码</button>
<div>
<img src="images/oneal1.jpg" />
</div>
<script>
// 效果1: 显示隐藏密码
var password = document.querySelector("input[name=pwd]")
console.log(password);
console.log(password.type);
console.log(password.name);
console.log(password.value);
console.log(password.className)
function change(){
var btn = document.querySelector("#btn")
console.log(btn);
if(password.type=="password"){
password.type = "text";
btn.innerHTML = "点我隐藏密码";
}else{
password.type= "password";
btn.innerHTML = "点我显示密码";
}
}
// 效果2:点击换图片
var img = document.querySelector("img");
console.log(img)
img.onclick = function(){
console.log(img.src) // http://127.0.0.1:5500/images/oneal1.jpg
var arr = img.src.split("/")
imgname = arr[arr.length - 1]
console.log(arr , imgname);
if(imgname == "oneal1.jpg"){
img.src = "images/bakeli.jpg";
}else{
img.src = "images/oneal1.jpg";
}
}
</script>
</body>
</html>
2. 全选_反选_不选
2.1 全选_反选_不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选,反选,不选</title>
<style>
*
{margin:0px;padding:0px;}
ul
{list-style: none;}
#ul1 li
{float:left;}
#ul1 li button
{width:80px;height:30px;}
#ul1 li button:hover
{background-color: tan;}
#ul2
{clear:both;}
</style>
</head>
<body>
<ul id="ul1">
<li><button>全选</button></li>
<li><button>不选</button></li>
<li><button>反选</button></li>
</ul>
<ul id="ul2">
<li><input type="checkbox" /> 看电影 </li>
<li><input type="checkbox" /> 吃面 </li>
<li><input type="checkbox" /> 烫头 </li>
<li><input type="checkbox" /> 跑步 </li>
<li><input type="checkbox" /> 篮球 </li>
</ul>
<script>
// 获取btn节点对象
var btn1 = document.querySelector("#ul1 li:nth-child(1) button");
var btn2 = document.querySelector("#ul1 li:nth-child(2) button");
var btn3 = document.querySelector("#ul1 li:nth-child(3) button");
// 全选
btn1.onclick = function(){
// 获取#ul2 li 里的input
/*
var data_lst = document.getElementById("ul2").getElementsByTagName("input");
console.log(data_lst)
*/
var data_lst = document.querySelectorAll("#ul2 li input");
console.log(data_lst)
// 获取数组当中每一个input节点元素对象
for(var input of data_lst){
//console.log(input.checked)
// 设置节点input的checked属性为true;
input.checked = true;
}
}
// 不选
btn2.onclick = function(){
var data_lst = document.querySelectorAll("#ul2 li input");
console.log(data_lst)
// 获取数组当中每一个input节点元素对象
for(var input of data_lst){
//console.log(input.checked)
// 设置节点input的checked属性为true;
input.checked = false;
}
}
// 反选
btn3.onclick = function(){
var data_lst = document.querySelectorAll("#ul2 li input");
console.log(data_lst)
// 获取数组当中每一个input节点元素对象
for(var input of data_lst){
if(input.checked === true){
input.checked = false;
}else{
input.checked = true;
}
}
}
</script>
</body>
</html>
2.2 js控制css的相关属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js控制css的相关属性</title>
<style>
.box
{border:solid 1px red;}
.box_new
{position: absolute; left:200px;}
</style>
</head>
<body>
<button id="box1">点击我换颜色</button>
<button id="box2">点击我隐藏</button>
<button id="box3">点击我显示</button>
<button id="box4">点击边框换圆角</button>
<button id="box5">点击加样式</button>
<div class="box" style="width:300px;height:200px;background-color: yellow;font-size:40px;">你好评</div>
<script>
var box = document.querySelector(".box");
console.log(box);
// js的dom对象获取相关的css属性
// 获取方法一
console.log(box.style.width);
console.log(box.style.backgroundColor);
// 获取方法二
console.log(box.style["width"]);
console.log(box.style["background-color"]);
console.log(box.style["font-size"]);
// 获取方法三 getComputedStyle 获取该节点对象的所有样式
console.log( window.getComputedStyle(box)["font-size"] , "<===getComputedStyle===>");
console.log( window.getComputedStyle(box).fontSize , "<===getComputedStyle===>");
// 事件绑定
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
var box4 = document.getElementById("box4");
var box5 = document.getElementById("box5");
box1.onclick = function(){
box.style.backgroundColor = "red";
}
box2.onclick = function(){
box.style.display = "none";
}
box3.onclick = function(){
box.style.display = "block";
}
box4.onclick = function(){
//box.style.borderRadius = "100%";
var point = 0;
var t = setInterval( function(){
box.style.borderRadius = `${point}%`;
if(point < 100){
point++;
}else{
clearInterval(t)
console.log("结束了... ")
}
} , 50)
}
/* 重点 添加样式*/
box5.onclick = function(){
// box.className = "box box_new";
box.className += " box_new";
}
</script>
</body>
</html>
2.3 js事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js事件</title>
<style>
*{margin:0px;padding:0px;}
.box
{width:100px;height:100px;background: green;position: absolute;left:0px;}
</style>
</head>
<body>
<!-- 1.事件的静态绑定 -->
<button onclick="func1()">按钮1</button>
<div class="box"></div>
<script>
var box = document.getElementsByClassName("box")[0];
var t;
console.log(box);
function func1(){
var left = parseInt(window.getComputedStyle(box).left)
console.log(left ,typeof(left));
// console.log(box.style.left);
t = setInterval(function(){
left += 10;
box.style.left = `${left}px`;
} , 50)
}
// 2.事件的动态绑定
// onmouseover 鼠标指针悬停在指定元素上时触发
box.onmouseover = function(){
clearInterval(t);
}
// onmouseout 鼠标指针离开指定元素时触发
box.onmouseout = function(){
func1()
}
</script>
</body>
</html>
3. 模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模态框</title>
<style>
.box {
position:fixed;
width:100%;
height:100%;
top:0px;
background-color: greenyellow;
display: none;
}
.content
{
border:solid 1px red;
width:500px;
height:500px;
background-color:tan;
margin:auto;
margin-top:14%;
}
</style>
</head>
<body>
<button id="login">登录</button>
<div class="box">
<div class="content" >
<span class="close">X</span>
<br />
<span>账号: <input type="text" /></span>
<br / >
<span>密码: <input type="password" /></span>
</div>
</div>
<script>
var btn = document.getElementById("login");
var box = document.querySelector(".box");
var close = document.querySelector(".close");
btn.onclick = function(){
console.log(11)
box.style.display = "block";
}
close.onclick = function(){
box.style.display = "none";
}
</script>
</body>
</html>
相关推荐
-
Python全栈之学习JS(2)
目录 1. js对象 1.1 object对象 1.2 json对象 2. js字符串函数 3. js数组相关方法 4. js数学对象相关方法 5. BOM对象 5.1 定时器 5.2 获取年月日时分秒 5.3 Navigator 5.4 历史对象 6. BOM对象location 7. 小提示 ceshi.html: 总结 1. js对象 1.1 object对象 <!DOCTYPE html> <html lang="en"> <head> &l
-
Python全栈之作用域和闭包
目录 1. return返回值 2. 全局变量_局部变量 3. 函数名的使用 4. 函数的嵌套 4.1 函数的嵌套 4.2 nonlocal的使用 5. 闭包函数的定义 6. 闭包的特点_意义 小提示: 7. 小练习 总结 1. return返回值 # ### return 自定义函数的返回值 """ 概念:return 把函数内部的数据返回到函数的外面,返回到函数的调用处 1.return + 六大标准数据类型 , 除此之外还可以返回函数 或者 是类对象 2.return
-
Python全栈之协程详解
目录 1. 线程队列 2. 进程池_线程池 3. 回调函数 4. 协程 总结: 1. 线程队列 # ### 线程队列 from queue import Queue """ put 存放 超出队列长度阻塞 get 获取 超出队列长度阻塞 put_nowait 存放,超出队列长度报错 get_nowait 获取,超出队列长度报错 """ # (1) Queue """先进先出,后进先出"""
-
Python全栈之线程详解
目录 1. 线程的概念 1.1 Manager_进程通信 1.2 线程的概念 2. 线程的基本使用 3. 自定义线程_守护线程 3.1 自定义线程 3.2 守护线程 4. 线程安全问题 4.1 线程安全问题 4.2 Semaphore_信号量 5. 死锁_互斥锁_递归锁 6. 线程事件 总结 1. 线程的概念 1.1 Manager_进程通信 # ### Manager ( list 列表 , dict 字典 ) 进程之间共享数据 from multiprocessing import Proc
-
Python全栈之队列详解
目录 1. lock互斥锁 2. 事件_红绿灯效果 2.1 信号量_semaphore 2.2 事件_红绿灯效果 3. queue进程队列 4. 生产者消费者模型 5. joinablequeue队列使用 6. 总结 1. lock互斥锁 知识点: lock.acquire()# 上锁 lock.release()# 解锁 #同一时间允许一个进程上一把锁 就是Lock 加锁可以保证多个进程修改同一块数据时,同一时间只能有一个任务可以进行修改,即串行的修改,没错,速度是慢了,但牺牲速度却保证了数据
-
Python全栈之学习JS(1)
目录 1. js的数据类型 1.1 js引入方式 1.2 注释变量 1.3 数据类型 2. js类型转换_运算符 2.1 强制转换_Number 2.2 强制转换_String 2.3 强制转换_Boolean 2.4 自动类型转换_Number_Boolean_String三者之间转换 2.5 js运算符 3. js流程控制 3.1 分支结构 3.2 分支结构_switch_case 3.3 循环结构 4. js函数 4.1 函数 4.2 函数的调用 总结 1. js的数据类型 1.1 js引
-
Python全栈之学习JS(3)
目录 1. dom节点 1.1 dom节点获取 1.2 节点元素层级关系 1.3 修改_清空内容 1.4 隐藏显示密码效果 2. 全选_反选_不选 2.1 全选_反选_不选 2.2 js控制css的相关属性 2.3 js事件 3. 模态框 1. dom节点 1.1 dom节点获取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met
-
Python全栈之学习HTML
目录 1. vscode相关配置 2. html认识 2.1 html认识 2.2 html结构 2.3 html语法特征 3. 标签种类_列表 3.1 常见标签 3.2 标签种类 3.3 列表 3.4 超链接标签 3.5 a链接跳锚点 3.6 img图片标签 3.7 table表格标签 3.8 iframe子窗口 4. 音视频_表单 4.1 音视频标签 4.2 form标签 5. 小练习 总结 1. vscode相关配置 w3c school 手册: https://www.w3school.
-
Python全栈之学习JQuery
目录 1. lable标签补充 2. jquery引入和简单使用 3. 选择器 3.1 基础选择器 3.2 组合选择 3.3 层级选择器 3.4 属性选择器 3.5 表单对象属性选择器 3.6 表单选择器 3.7 筛选器方法 4. 文本操作 4.1 选择器优先级和类值操作 4.2 值操作 4.3 创建标签 4.4 文档操作 4.5 删除和清空标签 4.6 字符串占位符 总结 1. lable标签补充 <!DOCTYPE html> <html lang="en">
-
Python全栈之学习CSS(1)
目录 1. 表单框类型 文件上传: 2. 表单属性 3. css引入 my.css 4. 选择器 4.1 常用选择器 4.2 选择器的优先级 4.3 关系选择器 4.4 属性选择器 4.5 伪类选择器_颜色设置 4.6 伪对象选择器 5. 字体属性设置 cursor属性: 6. 文本属性 7. 盒子模型 order-style: 8. 学习工具 总结 1. 表单框类型 <!DOCTYPE html> <html lang="en"> <head> &
-
Python全栈之学习MySQL(3)
目录 1. pymysql的基本操作 2. sql注入攻击 3. sql增删改查 4. mysql的数据恢复 5. sql语句优化 总结 1. pymysql的基本操作 # ### python 操作mysql import pymysql # ### 1.基本语法 """ # (1) 创建连接对象 host user password database 这四个参数必写 conn = pymysql.connect( host="127.0.0.1" ,
-
Python全栈之学习MySQL(2)
目录 1. mysql_where子句_聚合函数 2. mysql_其他子句语法 3. mysql_子查询 4. exists关键字 5. 练习所需表数据 6. 小练习 (1)表结构: (2)黏贴如下sql,直接建表 (3)练习题目 总结 1. mysql_where子句_聚合函数 # ### part 单表查询 """ select ... from ... where ... group by ... having ... order by ... limit ... &
-
Python全栈之学习MySQL(1)
目录 1. mysql约束 2. 外键_联合主键_唯一索引 3. 存储引擎_表关系 总结 1. mysql约束 # ### char varchar (补充) char 字符长度 255个 varchar 字符长度 21845个 # ### part1 时间类型 date YYYY-MM-DD 年月日 (节假日,纪念日) time HH:MM:SS 时分秒 (体育竞赛,记录时间) year YYYY 年份 (历史,酒的年份) datetime YYYY-MM-DD HH:MM:SS 年月日 时分
-
Python全栈之学习CSS(2)
目录 1. css背景图 1.1 背景属性 1.2 背景图片引入 2. 相对_绝对_固定 2.1 相对定位 2.2 绝对定位 2.3 固定定位 3. float浮动 3.1 display转换元素 3.2 float浮动 4. html里面的bug 4.1 float内容塌陷问题 4.2 margin-top失效问题 4.3 overflow 总结 1. css背景图 1.1 背景属性 <!DOCTYPE html> <html lang="en"> <h