JavaScript的第15天

最新推荐文章于 2024-06-22 16:43:13 发布
最新推荐文章于 2024-06-22 16:43:13 发布
阅读量233 收藏
点赞数 1
分类专栏： JavaScript基础 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46426476/article/details/122441547
版权

添加删除修改记录练习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
	
	window.onload=function(){

		// 创建一个全局的超链接的点击事件
		function delA() {
				/* 
					我们点击哪个超链接，this就是谁
				*/
				// 获取当前a节点所在的tr节点
				var tr = this.parentNode.parentNode;
	
				/* 
					comfirm()用于弹出一个带确认和取消按钮的提示框
						需要一个字符串作为参数，该字符串将会作为提示文字显示出来
					如果用户点击确认返回true，点击取消返回false
				*/
				// 删除之前进行判断，如果confirm("确认要删除吗?")返回true，删除
				if (confirm("确认要删除"+tr.getElementsByTagName("td")[0].innerText+"吗?")) {
					// 调用其父节点的remove方法移除当前tr
					tr.parentNode.removeChild(tr);
				}
	
				/* 
					点击超链接后页面会跳转，这个是超链接的默认行为，但是我们不希望出现默认行为，
						1.可以在响应函数后末尾加上 return false;

						2.在超链接的href属性里加上 javascript:; 

						可以取消超链接的默认行为
				*/
				return false;
		}

		/* 删除 */
		// 获取所有的a链接
		var a=document.getElementsByTagName("a");
		for (let i = 0; i < a.length; i++) {
			const element = a[i];
			// 为所有的a添加点击事件
			element.onclick=delA;
		}


		/* 添加 */
		// 获取addEmpButton按钮,并添加点击事件
		document.getElementById("addEmpButton").onclick=function(){
			// 获取所有input框里面的value值
			var empName=document.getElementById("empName").value;
			var email=document.getElementById("empName").value;
			var salary=document.getElementById("empName").value;
			// 创建tr元素，把获取到的value值添加到tr里
			var tr=document.createElement("tr");
			// 创建tr内部结构
			tr.innerHTML=
			"<td>"+empName+"</td>"+
			"<td>"+email+"</td>"+
			"<td>"+salary+"</td>"+
			"<td>"+"<a>Delete</a>"+"</td>";
			// 获取刚创建的tr的内部a结构(获取到的是数组)
			var a=tr.getElementsByTagName("a")[0];
			// 添加href属性
			a.href="'javascript:;'";
			// 为a添加点击事件
			a.onclick=delA;
			// 获取table节点
			var table=document.getElementById("employeeTable");
			// 因为浏览器会对table结构自动添加tbody标签，会把所有的tr放入tbody标签中
			// 获取到tbody节点
			var tbody=table.getElementsByTagName("tbody")[0];
			// 把创建好的tr节点加入到tbody中
			tbody.appendChild(tr);

		};
		

	};
</script>
</head>
<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

</body>
</html>

使用dom操作css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color:yellowgreen;
        }
    </style>
    <script>
        window.onload=function(){
             /* 
                使用JS修改元素的样式:
                    语法: 元素id值.style.样式名 = 样式值

                我们通过js修改元素的样式是在其标签内加入内联样式

                如果css样式中含有 -
                则需要将属性名改为驼峰式命名(去掉-，后面的字母大写)
            */
            // 获取btn1
            var btn1=document.getElementById("btn1");
            // btn1添加点击事件
            btn1.onclick=function(){
                // 点击btn1修改box1对应的样式
                box1.style.width="300px";
                box1.style.height="300px";
                box1.style.backgroundColor="yellow";
            }         


            /* js读取样式
                语法:  元素.style.样式名

                通过style属性设置和读取的样式都是内联样式，
                无法读取到css样式表的样式
            */
            // 获取btn2
            var btn2=document.getElementById("btn2");
            btn2.onclick=function(){
                // 点击按钮读取box1样式
                console.log(box1.style.width); //空
            };
        }
    </script>
</head>
<body>
    <div id="box1">
        
    </div>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
</body>
</html>

读取元素的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
    <script>
        window.onload=function(){
            // 点击按钮以后读取box1的样式
            var box1=document.getElementById("box1");
            var btn=document.getElementById("btn");
            btn.onclick=function(){
                /* 
                    获取元素当前显示的样式
                        语法:元素.currentStyle.样式名
                    它可以用来读取当前元素正在显示的样式
                        如果当前元素没有设置该样式，则获取它的默认值

                    currentStyle---属性
                    只有IE浏览器支持，其他浏览器都不支持
                */

                /* 
                    其他浏览器中可以使用
                        getComputedStyle()这个方法来获取元素当前的样式
                        这个方法时window的方法，可以直接使用
                    需要两个参数
                        第一个:要获取样式的元素
                        第二个:可以传递一个伪元素，一般都传null

                    该方法会返回一个对象，对象中封装了当前元素的样式
                        可以通过对象.样式名来读取样式
                        如果获取的样式没有设置，则会获取真实的值，而不是默认值
                        比如: 没有设置width，它不会获取auto，而是一个长度

                    但是该方法不支持IE8及以下的浏览器


                    通过currentStyle和getComputerStyle()读取到的样式都是只读的，
                        不能修改，如果要修改必须通过style修改
                */
            //    正常浏览器的读取box1的css样式表的宽度方法
                // console.log(getComputedStyle(box1,null).width); //1520px

                 // IE浏览器的方法
                // console.log(box1.currentStyle.width); //auto

                console.log(getStyle(box1,"width"));
            }

            /* 
                定义一个函数，用来获取指定元素的当前的样式
                参数:
                        obj  要获取的元素
                        name 样式名
            */
           function getStyle(obj,name) {
            //    判断浏览器中是否有getComputedStyle这个属性，有返回true，没有返回false
               return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
           }
        
        };
    </script>
</head>
<body>
    <div id="box1">

    </div>
    <button id="btn">按钮1</button>
</body>
</html>

其他样式操作的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 300px;
            height: 300px;
            overflow: auto;
            background-color: yellowgreen;
        }
        p{
            width: 400px;
        }
        #box2{
            width: 200px;
            height: 200px;
            overflow: auto;
            margin: 50px;
            background-color: red;
        }
    </style>
    <script>
        window.onload=function() {
            var btn=document.getElementById("btn");
            /* 
                clientWith   
                clientHeight
                    ---这两个元素可以获取元素的可见宽度和高度
                    --这些属性都是不带px的，返回都是一个数字，可以直接计算
                    ---会获取元素宽度和高度，包括内容区和内边距
             */
             console.log(box1.clientWidth); //183(滚动条占了一定距离)
             console.log(box1.clientHeight); //183(滚动条占了一定距离)

             /* 
                offsetWidth
                offsetHeight
                    ---获取元素的整个的宽度和高度，包括内容区，内边距和边框

             */
            console.log(box1.offsetWidth); //200
            console.log(box1.offsetHeight); //200

            /* 
                offsetParent
                    ---可以用来获取当前元素的定位父元素
                    ---会获取到离当前元素最近的开启了定位的祖先元素
            */
            console.log(box2.offsetParent); //box1

            /* 
                offsetLeft
                    ---当前元素相对于其相对的定位父元素的水平偏移量
                offsetTop
                    ---当前元素相对于其相对的定位父元素的垂直偏移量
            */
           console.log(box2.offsetLeft); //50
           console.log(box2.offsetTop); //50

           /* 
                scrollHeight
                scrollWidth
                    ---可以获取元素整个滚动区域的宽度和高度
           
           */
          console.log(box2.scrollWidth); //400
          console.log(box2.scrollHeight); //381

          /* 
                scrollLeft
                    ---获取水平滚动条滚动的距离
                scrollTop
                    ---获取垂直滚动条滚动的距离
          */
         
          btn.onclick=function(){
            alert(box2.scrollLeft);
            alert(box2.scrollTop);
          }


          /* 
            当满足scrollHeight-scrollTop=clentHeight时
                说明垂直滚动条到底了
            
            当满足scrollWidth-scrollLeft=clentWidth时
                说明水平滚动条到底了
            */
          btn.onclick=function(){
            console.log(box2.clientWidth);
            console.log(box2.scrollWidth-box2.scrollLeft);
          }

        }
          
    </script>
</head>
<body>
    <button id="btn">按钮1</button>
    <div id="box1" style="position: absolute;">
        <div id="box2">
            <p>嗲五年的我嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我
    
            </p>
            <p>嗲五年的我嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我嗲五年的我
                嗲五年的我
                嗲五年的我
                嗲五年的我
    
            </p>
        </div>
    </div>
</body>
</html>

练习操作其他样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box1{
            width: 300px;
            height: 300px;
            overflow: auto;
            border: 1px solid red;
            background-color: yellowgreen;
        }
    </style>
    <script>
        window.onload=function(){
            // 获取box1
            var box1=document.getElementById("box1");
            // 获取btn
            var btn=document.getElementById("btn");
            // 获取input框
            var inputs=document.getElementsByTagName("input");
            // 添加滚动事件并判断滚动条是否到底
            box1.onscroll=function(){
                if(box1.clientHeight==box1.scrollHeight-box1.scrollTop){
                    /* 
                        disabled属性可以设置一个元素是否被禁用
                            如果设置为true，则元素禁用
                            如果设置为false，则元素可用
                    */
                    inputs[0].disabled=false;
                    inputs[1].disabled=false;
                }
            }; 
        };
    </script>
</head>
<body>
    <div id="box1">
        <p>请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
            请仔细阅读以下条款请仔细阅读以下条款
        </p>
    </div>
    <input type="checkbox" disabled="disabled">我已仔细阅读
    <input type="button" disabled="disabled" value="提交">
    <button id="btn">按钮1</button>
</body>
</html>
竹叶依旧
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript权威指南（第五版）
07-22
资源名称：Javaｓｃｒｉｐｔ权威指南(第五版)内容简介：《Javaｓｃｒｉｐｔ权威指南第4版》中文版出版至今已有三年多的时间。这本《JaVaｓｃｒｉｐｔ权威指南》连续印刷5次，销售数十万册，成为很多Javaｓｃｒｉｐｔ...
第十五章JavaScript-HTMLDOM对象2022优秀文档.ppt
11-14
总的来说，JavaScript的DOM对象为开发者提供了丰富的功能，使得能够动态地操控网页内容、跟踪用户行为、以及提供更加交互式的用户体验。理解和熟练运用这些对象是Web开发中不可或缺的技能。通过结合History、...
javascript第一课
10-31
在"JavaScript第一课"中，我们将初步了解JavaScript的基础知识，主要涵盖三个方面：如何在网页中插入JavaScript、JavaScript的数据类型以及JavaScript的三个基本对话框。首先，让我们详细探讨如何在HTML页面中添加...
JavaScript的100天：编码100天
02-08
第一天：密码生成器。 第2天：加载动画栏。 第三天：主题切换器 第4天：倒数计时器。... 第15天：蛇游戏（使用画布元素）。 任务： : 演示： : 第16天：Pickle Rick Maze游戏（使用画布元素）
JavaScript详解(第2版)
04-25
　第15章　W3C　DOM与JavaScript　 　15.1　W3C　DOM　 　15.2　理解DOM节点　 　15.3　节点　 　15.3.1　父节点和子节点　 　15.3.2　兄弟节点　 　15.3.3　nodeName和nodeType属性　 　15.3.4　空白bug　 　15.4　...
Day43
m0_67496588的博客
06-20 976
JSON，Ajax
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 454
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
使用nvm管理nodejs版本，设置淘宝NPM镜像源
d312697510的博客
06-19 218
使用nvm管理nodejs版本，设置淘宝NPM镜像源，修改新的镜像源地址
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
qq_61798306的博客
06-18 309
【element 】修改下拉菜单
Vue3+ECharts
清晨-阳光的博客
06-17 333
在Vue3中，初始化echarts实例时，会将echarts实例对象转换成响应式对象，从而在resize时无法获取需要的数据。
什么是try-catch?
qq_60504665的博客
06-18 425
try-catch是编程中用于处理异常（errors 或 exceptions）的一种结构，特别是在许多编程语言中，如 JavaScript、Java、C#、Python（尽管 Python 的语法略有不同）等。它的主要目的是在代码执行过程中捕获并处理运行时错误，从而防止程序因未处理的异常而意外终止。以下是try-catch。
Vue3中的常见组件通信（超详细版）
m0_63165331的博客
06-19 997
本文详细讲述了vue3中常用的组件通信使用方法。主要包括props、自定义事件、mitt、v-model、$attrs、$refs和$parent、probide和inject、pinia、插槽。
Vue生命周期
weixin_63680330的博客
06-19 220
定义：指一个对象从创建到销毁的整个过程。
Java快速开发：力推开源项目若依RuoYi
haohaizi_liu的专栏
06-18 819
RuoYi-Vue 是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Spring Security、MyBatis、Jwt、Vue），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置；支持集群，支持多数据源，支持分布式事务。
在 Vue 中使用 structuredClone 进行深拷贝来初始化对象内的数组
李长渊的博客
06-21 575
在 Vue 中使用 structuredClone 进行深拷贝来初始化对象内的数组
挖矿宝藏之开发者模式
m0_73514785的博客
06-18 775
开发者模式是浏览器提供的一种内置的开发调试工具，旨在帮助开发人员更好地理解和调试网页。
echarts自定义legend方法
HDdgut的博客
06-19 265
思路：在配置legend里面设置一个selected，名字和series里面的name对应，通过true和false控制显示或不显示。配置本身的legend设置不显示。通过自己写的checkbox，可自定义样式，来控制legend。
【前端】[vue3] [uni-app] 组件样式击穿：deep
Timeguys的专栏
06-21 301
vue3 进行组件的样式击穿。
在线教育系统源码入门：教育培训小程序开发全流程
最新发布
meihusdk的博客
06-22 264
开发一个在线教育系统小程序是一个复杂而系统化的工程，涉及需求分析、系统设计、前后端开发、数据库搭建、测试部署等多个环节。通过本文的介绍，相信大家对在线教育系统源码有了一个初步的了解。
JavaScript学习手册十五：事件处理
09-20
引用中提到，通过调用addEventListener()函数可以注册事件处理程序，第一个参数是事件的类型，第二个参数是事件处理程序。在引用中展示了一个例子，通过调用event.stopPropagation()可以停止事件的冒泡。 在给定的代码中，当点击子元素p时，事件会依次冒泡到div2和div1。在click2()函数中，添加了event.stopPropagation()来停止事件继续冒泡到div1。因此，在控制台的输出中只会打印出"parent"，而不会打印"root"。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值