JavaScript高级Ⅱ(全面版)

接上文 JavaScript高级Ⅰ JavaScript高级Ⅰ(自认为很全面版)-CSDN博客

目录

第2章 DOM编程

2.1 DOM编程概述

2.1.4 案例演示(商品全选)

2.1.5 dom操作内容

代码演示:

运行效果:

2.1.6 dom操作属性

代码演示:

运行效果:

2.1.7 dom操作样式

代码演示:

运行效果:

2.1.8 dom操作元素

代码演示:

运行效果:

2.1.9 案例演示(省市级联)


第2章 DOM编程

2.1 DOM编程概述

2.1.4 案例演示(商品全选)

实现 商品全选/反选功能

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>16-案例-商品全选</title>
</head>
<body>

<button id="btn1">1. 全选</button>
<button id="btn2">2. 反选</button>
<br/>
<input type="checkbox">电脑<input type="checkbox">手机<input type="checkbox">汽车<input type="checkbox">别墅<input type="checkbox" checked="checked">笔记本
<script >
    let allBox =document.querySelectorAll('input[type="checkbox"]');//获取所有复选框
    let btn1 = document.querySelector('#btn1');//全选按钮
    let btn2 = document.querySelector('#btn2');//反选按钮
    // 1. 全选
    btn1.onclick = function () {
        for(let b of allBox){
            b.checked = true;//全部选中
        }
    }
    // 2. 反选
    btn2.onclick = function () {
        for(let b of allBox){
            b.checked = !b.checked;//全部反选
        }
    }
</script>
</body>
</html>

运行效果:

2.1.5 dom操作内容

dom操作内容

1. 向body中追加html内容 document.write(html内容)

2. 获取或修改元素的纯文本内容 element.innerText 获取元素的纯文本内容

3. 获取或修改元素的html内容 element.innerHTML 获取元素的html内容

4. 获取或修改包含元素自身的html内容 element..outerHTML 获取包含元素自身的html内容

小总结:

element.innerText = 普通文本

element.innerHTML = html内容

区别

innerHTML 会被当做html解析渲染

代码演示:
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>09-dom操作内容</title>
</head>
<body>


<div id="d1">
    <div id="d2">
        d2的纯文本内容
        <p id="p1">p1的纯文本内容</p>
    </div>
    <p id="p2">p2的纯文本内容</p>
</div>

<script >
    // 1. 向body中追加html内容
    document.write("<p style='color:red;'>向body中追加html内容</p>");
    // 2. 获取或修改元素的纯文本内容
    let p2 = document.querySelector("#p2");
    console.log(p2.innerText);;//获取元素的纯文本内容
    let d2 = document.querySelector("#d2");
    console.log(d2.innerText);;//获取元素的纯文本内容
    p2.innerText = "修改之后的p2的纯文本内容";
    // 3. 获取或修改元素的html内容
    console.log(d2.innerHTML);//获取元素的html内容
    d2.innerHTML = "<p style='color:blue;'>修改后的d2的html内容</p>"
    // 4. 获取或修改包含元素自身的html内容
    console.log(d2.outerHTML);//获取包含元素自身的html内容
</script>

</body>
</html>
运行效果:

2.1.6 dom操作属性

dom操作属性

1. 获取文本框,单选框或复选框的选中状态 语法: element.attribute 获取或修改元素的原生属性值

2. 给元素设置自定义属性 语法: element.setAttribute(属性名,属性值) 设置属性值(原生和自定义)

3. 获取元素的自定义属性值 语法: element.getAttribute(属性名) 获取属性值(原生和自定义)

4. 移除元素的自定义属性 语法: element.removeAttribute(属性名) 移除元素的属性(原生和自定义)

5. 获取元素的属性集合(了解) 语法: element.attributes 获取元素的所有属性集合

小扩展:

w3c组织规定了每一标签所拥有的属性,这些w3c定义好的属性被称作标签的原生属性.

在html中允许开发者给标签添加额外的属性,这些自定义属性用来给标签添加额外的特性.

w3c约定开发者添加的自定义属性 以 data- 为前缀.

小结(重要):

获取或修改表单中 单选框,复选框 的选中状态时

使用 element.checked 得到 true或false

(不建议)使用 element.getAttribute(属性名) 得到的是 checked 或者 null

代码演示:
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>10-dom操作属性</title>
</head>
<body>

<form action="#" method="get">
    姓名 <input type="text" name="userName" value="张三"/> <br/>
    密码 <input type="password" name="userPass" > <br/>
    生日 <input type="date" name="userBirth"><br/>
    性别 <input type="radio" name="gender" value="男" checked="checked">男&emsp;<input type="radio" name="gender" value="女"/>女<br/>
    爱好 <input type="checkbox" name="hobby" value="1">抽烟<input type="checkbox" name="hobby" value="2">喝酒<input type="checkbox" name="hobby" value="3">烫头<br/>
    头像 <input type="file" name="userPic"><br/>
    学历
    <select name="userEdu" >
        <option value="0">请选择</option>
        <option value="1">入门</option>
        <option value="2">精通</option>
        <option value="3">放弃</option>

    </select><br/>
    简介
    <textarea name="userIntro"  cols="30" rows="10">默认值</textarea><br/>
    <input type="reset" value="清空按钮"/>
    <input type="submit" value="提交按钮"/><br/>
    <input type="button" value="普通按钮">
    <button>专业按钮</button><button>&times;</button>


</form>
<script >
    // 1. 获取文本框,单选框或复选框的选中状态
    let userName = document.querySelector('input[type="text"]');//获取元素
    console.log(userName.value);//获取value属性的值
    userName.value = "李四";//设置value属性的值
    let gender = document.querySelector('input[name="gender"]');//获取元素
    console.log(gender.checked);//获取单选框的选中状态
    document.querySelector('input[value="女"]').checked=true;//设置女被选中
    console.log(document.querySelector('input[value="女"]').getAttribute("checked"));//不建议使用
    // 2. 给元素设置自定义属性
    userName.setAttribute("data-msg","姓名自定义数据");//设置自定义属性
    // 3. 获取元素的自定义属性值
    console.log(userName.getAttribute("data-msg"));//获取属性值
    // 4. 移除元素的自定义属性
    userName.removeAttribute("data-msg");//移除元素的属性
    // 5. 获取元素的属性数组(集合)
    let allAttri = userName.attributes;//获取元素的属性集合
    console.log(allAttri);
    for(let a of allAttri){
        console.log(a)
    }

</script>
</body>
</html>
运行效果:

2.1.7 dom操作样式

dom操作样式

1. 设置一个css样式

        语法: element.style.样式属性名 获取或设置一个css样式

        属性名含有短杠-时要转为驼峰命名 例如 element.style.backgroundColor

2. 批量设置css样式

        语法: element.style.cssText 获取或设置style属性的文本值

3. 通过class设置样式

        语法: element.className 获取或设置class属性的文本值

4. 切换class样式

        语法: element.classList es6特别提供的操作元素class的接口         element.classList常用方法有四个:

                add() 添加样式

                remove() 移除样式

                contains() 判断是否包含某个样式

                toggle() 切换样式,有就移除,没有就添加

代码演示:
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>11-dom操作样式</title>
</head>
<body>

<style>
    #p1{ background-color: red;}
    .myp{color:gold}
    .myppp{background-color: lightgray;}
</style>
<p id="p1">1. 设置一个css样式</p>
<p id="p2" >2. 批量设置css样式</p>
<p id="p3" class="myppp">3. 通过class设置样式</p>
<p id="p4">4. 切换class样式</p>

<script >
    // 1. 设置一个css样式
    let p1 = document.querySelector("#p1");//获取元素
    p1.style.backgroundColor = "blue";//设置背景颜色
    p1.style.color = "white";//设置字体颜色
    // 2. 批量设置css样式
    let p2 = document.querySelector("#p2");//获取元素
    p2.style.cssText = "font-family: '楷体';border: 1px solid green;border-radius: 5px;";//批量设置样式
    // 3. 通过class设置样式
    let p3 = document.querySelector("#p3");//获取元素
    p3.className = "myp myppp";//设置class值
    // 4. 切换class样式
    let p4 = document.querySelector("#p4");//获取元素
    let classList = p4.classList;//获取class值集合
    classList.add("myp");//添加样式
    classList.add("myppp");//添加样式
    console.log(classList.contains("myppp"));//判断含有样式
    classList.remove("myppp");//移除样式
    classList.toggle("myp");//切换样式


</script>
</body>
</html>
运行效果:

2.1.8 dom操作元素

dom操作元素
    1. 前面添加抽烟
        document.createElement(标签名称) 创建标签
        parentNode.insertBefore(newNode,refNode) 把元素newNode 插入到 元素parentNode 中的 refNode之前
    2. 后面添加烫头
        parentNode.appendChild(newNode) 把元素newNode追加到元素parentNode中的最后
    3. 最后添加撩妹
        element.cloneNode() 克隆元素,一般克隆完修改不同就可以,比创建元素效率高

代码演示:
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>12-dom操作元素</title>
</head>
<body>


<div id="md">
    <input id="hip" type="checkbox" name="hobby" value="喝酒"><span id="hspan">喝酒</span>
</div>

<script >

    let md = document.querySelector("#md");
    let hip = document.querySelector("#hip");
    // 1. ^^^前面添加抽烟
    //创建input标签,把新标签追加到喝酒之前
    let ip1 = document.createElement("input");//创建标签
    ip1.setAttribute("id","cip");
    ip1.setAttribute("type","checkbox");
    ip1.setAttribute("name","hobby");
    ip1.setAttribute("value","抽烟");
    console.log(ip1);
    let cspan = document.createElement("span");//创建标签
    cspan.innerText = "抽烟";//设置文本内容
    md.insertBefore(cspan,hip);//把cspan插入到md中的hip之前
    md.insertBefore(ip1,cspan);//把ip1插入到md中的cspan之前
    // 2. ^^^后面添加烫头
    //创建input标签,把新标签追加到喝酒之后
    let ip2 = document.createElement("input");//创建标签
    ip2.setAttribute("id","tip");
    ip2.setAttribute("type","checkbox");
    ip2.setAttribute("name","hobby");
    ip2.setAttribute("value","烫头");
    console.log(ip2);
    let tspan = document.createElement("span");//创建标签
    tspan.innerText = "烫头";//设置文本内容
    md.appendChild(ip2);//在md中最后添加ip2
    md.appendChild(tspan);//在md中最后添加tspan
    // 3. ^^^点击按钮添加王者
    let ip3 = ip2.cloneNode();//克隆元素
    console.log(ip3);
    ip3.setAttribute("id","lip");
    ip3.setAttribute("value","撩妹");
    let lspan = tspan.cloneNode();//克隆元素
    lspan.innerText = "撩妹";//设置文本内容
    md.appendChild(ip3);//在md中最后添加ip2
    md.appendChild(lspan);//在md中最后添加tspan

</script>
</body>
</html>
运行效果:

2.1.9 案例演示(省市级联)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>省市级联</title>
		<style type="text/css">
					.regist_bg {
						width: 100%;
						height: 600px;
						padding-top: 40px;
						background-image: url(../img/bg.jpg);
					}
					.regist {
						border: 7px inset #ccc;
						width: 600px;
						padding: 40px 0;
						padding-left: 80px;
						background-color: #fff;
						margin-left: 25%;
						border-radius: 10px;
					}
					input[type="submit"] {
						background-color: aliceblue;
						width: 100px;
						height: 35px;
						color: red;
						cursor: pointer;
						border-radius: 5px;
					}
		</style>

	</head>
	<body>
		<div class="regist_bg">
			<div class="regist">
				<form action="#">
					<table width="600" height="350px">
						<tr>
							<td colspan="3">
								<font color="#3164af">会员注册</font> USER REGISTER
							</td>
						</tr>
						<tr>
							<td align="right">用户名</td>
							<td colspan="2"><input id="loginnameId" type="text" name="loginname" size="60" /> </td>
						</tr>
						<tr>
							<td align="right">密码</td>
							<td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60" /> </td>
						</tr>
						<tr>
							<td align="right">确认密码</td>
							<td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60" /> </td>
						</tr>
						<tr>
							<td align="right">Email</td>
							<td colspan="2"><input id="emailId" type="text" name="email" size="60" /> </td>
						</tr>
						<tr>
							<td align="right">姓名</td>
							<td colspan="2"><input name="text" name="username" size="60" /> </td>
						</tr>
						<tr>
							<td align="right">性别</td>
							<td colspan="2">
								<input type="radio" name="gender" value="男" checked="checked" />男
								<input type="radio" name="gender" value="女" />女
							</td>
						</tr>
						<tr>
							<td align="right">电话号码</td>
							<td colspan="2"><input type="text" name="phone" size="60" /> </td>
						</tr>
						<tr>
							<td align="right">所在地</td>
							<td colspan="3">								
								<select id="provinceId" style="width:150px">
									<option value="">----请-选-择-省----</option>
								</select>
								<select id="cityId" style="width:150px">
									<option value="">----请-选-择-市----</option>
								</select>
							</td>
						</tr>
						<tr>
							<td width="80" align="right">验证码</td>
							<td width="100"><input type="text" name="verifyCode" /> </td>
							<td><img src="../img/checkMa.png" /> </td>
						</tr>
						<tr>
							<td></td>
							<td colspan="2">
								<input type="submit" value="注册" />
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
<!--
省市级联
	1. 页面加载完成后自动装载省数据
	2. 当选中省时,装载该省的市数据
-->
		<script type="text/javascript">
			//准备省市数据
			let provinceData = ["北京","河北","辽宁"];
			let cityData = {
				"北京":["顺义区","昌平区","朝阳区"],
				"河北":["保定","石家庄","廊坊"],
				"辽宁":["沈阳","铁岭","抚顺"]
			};
			// 1. 页面加载完成后自动装载省数据
			let province = document.querySelector("#provinceId");//获取省
			window.onload = function(){
				for(let prov of provinceData){
					let option = document.createElement("option");//创建option标签
					option.value = prov;
					option.innerText = prov;
					province.appendChild(option);//给省追加选项
				}
			}
			// 2. 当选中省时,装载该省的市数据
			let city = document.querySelector("#cityId");//获取市
			province.onchange = function(){
				let provinceStr = this.value;
				console.log(provinceStr);//当前选中的省
				let currentCityData = cityData[provinceStr];//当前的市
				city.innerHTML = '<option value="">----请-选-择-市----</option>';//初始化市
				for(let cit of currentCityData){
					let option = document.createElement("option");//创建option标签
					option.value = cit;
					option.innerText = cit;
					city.appendChild(option);//给省追加选项
				}

			}

		</script>

	</body>
</html>

运行效果:

更多内容敬候 JavaScript高级Ⅲ

欢迎大家指点评论~ 点赞+关注⭐⭐⭐

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/446640.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

H264/265编码参数2: Profile Level Tier

profile和level profile和level是视频编码中两个很重要的概率&#xff0c;中文一般叫做档次和级别。 在MPEG2标准里边&#xff0c;按不同的压缩比分成五个档次&#xff0c;按视频清晰度分为四个级别&#xff0c;如下图所示&#xff1a; 档次和级别共有 20 种组合&#xff0c;…

2024年【化工自动化控制仪表】考试总结及化工自动化控制仪表作业考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年【化工自动化控制仪表】考试总结及化工自动化控制仪表作业考试题库&#xff0c;包含化工自动化控制仪表考试总结答案和解析及化工自动化控制仪表作业考试题库练习。安全生产模拟考试一点通结合国家化工自动化控…

day-18 长度最小的子数组

运用队列的思维&#xff0c;求出每种满足题意的子数组长度&#xff0c;最小的即为答案&#xff0c;否则返回0 code class Solution {public int minSubArrayLen(int target, int[] nums) {int l0,r0;int ansInteger.MAX_VALUE;int total0;while(r<nums.length){totalnums[r…

C++:类和对象(三)——拷贝构造函数和运算符重载

目录 一、拷贝构造函数 1.概念 2.特性 二、赋值运算符重载 1.运算符重载 2.赋值运算符重载 &#xff08;1&#xff09;注意的点&#xff1a; &#xff08;2&#xff09;赋值运算符不允许被重载为全局函数&#xff0c;只能重载为类的成员函数 &#xff08;3&#xff09;…

STM32单片机示例:ETH_LAN8742_DHCP_NonOS_Poll_H743

文章目录 目的基础说明关键配置关键代码示例链接总结 目的 以太网是比较常用到的功能&#xff0c;STM32系列单片机使用CubeMX配置使用以太网功能比非常方便。不过对于H7系列来说需要使能 DCache 才能启用LwIP&#xff0c;启用Cache后又会带来一些需要特别注意的事情。这篇文章…

HarBor私有镜像仓库安装部署

环境准备 #>>> redis $ yum -y install redis $ systemctl enable --now redis $ vim /etc/redis.conf modify: bind <ipaddress> $ systemctl restart redis#>>> nfs $ yum -y install nfs-utils $ mkdir -p /data/harbor $ vi /etc/exports /data/h…

简介:CMMI软件能力成熟度集成模型

前言 CMMI是英文Capability Maturity Model Integration的缩写。 CMMI认证简称软件能力成熟度集成模型&#xff0c;是鉴定企业在开发流程化和质量管理上的国际通行标准&#xff0c;全球软件生产标准大都以此为基点&#xff0c;并都努力争取成为CMMI认证队伍中的一分子。 对一个…

动静态库

inode inode用于管理文件属性和内容 一个文件只能有一个inode&#xff0c;一个inode可以对应多个文件名 Linux进程中&#xff0c;打开的每一个文件都有对应的文件inode属性和文件页缓冲区&#xff08;内存和磁盘的缓冲区&#xff09; 软硬链接 硬链接 多个文件指向同一个i…

Gradle模块化最佳实践

一&#xff0c;模块化的原因及意义 模块化是一种将大型的软件系统拆分成相互独立的模块的方法。具有以下优势&#xff1a; 代码复用&#xff1a;不同的模块可以共享相同的代码。这样可以避免重复编写相同的代码&#xff0c;提高开发效率。模块独立性&#xff1a;每个模块都可…

【安装教程】windows下安装Faiss-GPU

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 【安装教程】windows下安装Faiss-GPU 查看安装指令 查看安装指令 登录网站&#xff1a;https://anaconda.org/ &#xff0c; 然后搜索faiss-gpu会进入如下界面&#xff0c;或…

Vue 3中的reactive:响应式状态的全面管理

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

讲解Python3内置模块之json编码解码方法

简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式&#xff0c;它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式&#xff0c;这些特性使JSON成为理想的数据交换格式&#xff0c;易于人阅读和编写&#xff0c;同时也易于机器解析和生成&#…

web前端框架

目前比较火热的几门框架: React React是由Facebook(脸书)开发和创建的开源框架。React 用于开发丰富的用户界面&#xff0c;特别是当您需要构建单页应用程序时。它是最强大的前端框架。 弊端: 您不具备 JavaScript 的实践知识&#xff0c;则建议不要使用 React。同样&#x…

MIT6.828LAB4 (3)

LAB3_Part B: Copy-on-Write Fork 文章目录 LAB3_Part B: Copy-on-Write Fork前言练习8练习9练习10练习11练习12总结 前言 记录一下自己的学习过程 实验内容翻译&#xff1a; https://gitee.com/cherrydance/mit6.828 该翻译仅供参考 练习8 实现sys_env_set_pgfault_upcall系统…

内存映射mmap拓展

第一个是上一篇博客中用mmap实现任意两个进程间相互通信&#xff0c;前几篇博客也用管道实现了进程间通信 这里有个问题&#xff0c;管道是基于缓冲区环形队列的&#xff0c;实验也表明读过的数据不能在读利用命名管道实现任意进程间的通信 那么mmap多个读写操作时会是什么情况…

关于GPU显卡的介绍

一.关于英伟达历代产品架构 显卡是一种计算机硬件设备,也被称为显示适配器或图形处理器。目前的硬件部分主要由主板、芯片、存储器、散热器&#xff08;散热片、风扇&#xff09;等部分。显卡的主要芯片是显卡的主要处理单元。显卡上也有和计算机存储器相似的存储器&#xff0…

Mysql数据库-基本表操作

1.表操作 创建表&#xff1a;CREATE TABLE table_name ( field1 datatype, field2 datatype, field3 datatype ) character set 字符集 collate 校验规则 engine 存储引擎; field 表示列名 datatype 表示列的类型 character set 字符集&#xff0c;如果没有指定字符集&#xff…

python学习笔记------集合(set)

集合定义格式 基本语法&#xff1a; #定义集合字面量 {元素&#xff0c;元素&#xff0c;元素......&#xff0c;元素} #定义集合变量 变量名称{元素&#xff0c;元素&#xff0c;元素......&#xff0c;元素} #定义空集合 变量名称set() #定义集合字面量 {元素&#…

【AI辅助研发】-趋势:大势已来,行业变革

【AI辅助研发】-趋势&#xff1a;大势已来&#xff0c;行业变革 引言 在科技日新月异的今天&#xff0c;人工智能&#xff08;AI&#xff09;技术已逐渐渗透到各行各业&#xff0c;其中软件研发行业更是受益匪浅。AI辅助研发已成为大势所趋&#xff0c;不仅提高了软件开发的效…

登录凭证------

为什么需要登录凭证&#xff1f; web开发中&#xff0c;我们使用的协议http是无状态协议&#xff0c;http每次请求都是一个单独的请求&#xff0c;和之前的请求没有关系&#xff0c;服务器就不知道上一步你做了什么操作&#xff0c;我们需要一个办法证明我没登录过 制作登录凭…