DOM方法封装及回调函数的使用

最新推荐文章于 2022-03-31 09:54:54 发布
最新推荐文章于 2022-03-31 09:54:54 发布
阅读量227 收藏
点赞数
分类专栏： JS相关 JS demo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bznhlhh/article/details/116661475
版权 
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="css1.css" />
		<script type="text/javascript">
			window.onload = function () {
				function btnClick(btn,callback) {
					var btn = document.getElementById(btn)
					btn.onclick = callback
				}

				btnClick("btn01",function () {
					//创建元素节点
					var li = document.createElement("li")
					//创建文本节点
					var gztxt = document.createTextNode("广州")
					//父节点里面添加子节点
					li.appendChild(gztxt)
					console.log(li)
					var city = document.getElementById("city")
					city.appendChild(li)
				})

				btnClick("btn02",function () {
					var li = document.createElement("li")
					//创建文本节点
					var gztxt = document.createTextNode("广州")
					//父节点里面添加子节点
					li.appendChild(gztxt)

					var bj = document.getElementById("bj")
					//往前面添加 是父节点来调用的 (新节点,谁前面)
					bj.parentNode.insertBefore(li,bj)

				})

				btnClick("btn03",function () {
					var li = document.createElement("li")
					//创建文本节点
					var gztxt = document.createTextNode("广州")
					//父节点里面添加子节点
					li.appendChild(gztxt)
					var bj = document.getElementById("bj")
					//替换节点(新节点,旧节点)
					bj.parentNode.replaceChild(li,bj)

				})
				btnClick("btn04",function () {
					var bj = document.getElementById("bj")
					bj.parentNode.removeChild(bj)
				})


			}
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
		</div>
	</body>
</html>
是欢欢啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Dom二级事件的回调函数种类不同导致this指向不同的问题
xunfengZ的博客
11-18 275
这两天在用vue脚手架写一个仿卖座网的项目练练手，在写到下滑时的吸顶效果时，无论如何调整都无法实现。效果如图： 控制组件是否吸顶的代码： <FilmListTopNav :class="fixed ? 'fixed' : ''"></FilmListTopNav> 组件的data数据： data:function(){ return { fixed:false } }, 吸顶的css代码： <style scoped la
ajax五种回调函数,Ajax的回调函数
weixin_39782752的博客
08-06 4409
一，为什么要使用回调函数？首先我们应该明白我们为什么要用回调函数？我们用它能解决什么样的问题。function d(){}(function(){(function(){var temp ="this is a test";})();})();(1) 在以上函数d中我们怎样拿到temp的值？我们应该知道在JS中或者很多语言中，我们每次用一个变量或者函数时，当执行时都会向上找。如下图。var tes...
回调函数与DOM事件
weixin_30536513的博客
05-09 168
原文:http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/ 先看如下代码: 1 document.addEventListener("DOMContentLoaded", function() { 2 console.log("Init: 1"); 3 DOES_NOT_EXIST++; // error 4...
【JavaScript】当DOM对象回调某对象的方法时该方法的 this 指向问题，如何取到该实例？
高厉害 0w0
03-21 175
上代码 解释都在注释里 通过 tab 栏切换一个列表： class List { constructor(param) { this.prop = param; } listToggle() { // ... fun // 这个方法通过被回调来切换 tab 栏 // 当该方法被回调时，我需要两...
动态创建dom节点，并用回调函数控制样式，实现代码复用
then啥
10-15 795
var appendDiv=function(count,cb){ for(let i=0;i&lt;count;i++){ let div=document.createElement('div'); //创建 div.innerHTML=`This is the ${i} div`; //设置内容 document.bod...
Web APIs——DOM-事件基础
m0_52177571的博客
03-31 1148
目录 一、 事件 1.什么是事件？ 2.什么是事件监听？ 3.事件监听三要素： 事件监听 4.事件类型 鼠标事件 焦点事件 键盘事件 文本事件 二、高阶函数 1.函数表达式 2.回调函数 三、环境对象 四、编程思想 1.排他思想 一、 事件 1.什么是事件？ 事件是在编程时系统内发生的动作或者发生的事情 ，比如用户在网页上单击一个按钮 2.什么是事件监听？ 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件
关于jquery 的 click 回调函数
success could be revenge的博客
03-29 9852
很多人在使用 jquery 提供的 click 事件时 执行 别人封装的代码后 还想执行自己的方法怎么半 这个时候 请往下看 $(document).click({function:callBackFunc},function1) 参数1放入的是一个json ，参数二 是 执行  方法的 代码。 如果与此同时  我在function1 的方法体 里定
JavaScript回调函数
且听真言
12-19 3491
处理回调函数是另一种常见的使用闭包的场景。回调函数指的是需要在将来不确定的某一时刻异步调用的函数。通常，在这种回调函数中，我们经常需要频繁地访问外部数据。 &lt;div id="box1"&gt;First Box&lt;/div&gt; &lt;script&gt; function animateIt(elementId) { //在动画函数中，animatelt内部，获取DOM元素...
利用ajaxSubmit()实现Form表单submit()提交后的回调函数
热门推荐
周末未至
07-14 4万+
1、引入JQuery Form表单的js &lt;script type="text/javascript" src="${ctxStatic}/common/jquery.form.js"&gt;&lt;/script&gt; 下载链接：jquery.form.js  密码：fqr9  2.设置相应的参数 $(function(){     // 1.基本参数设置     var...
jquery数组封装使用方法分享(jquery数组遍历)
12-10
回调函数拥有两个参数：第一个为对象的成员或数组的索引， 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false， 其它返回值将被忽略. each遍历，相信都不陌生，在平常的事件处理中，是for循环...
ajax的工作原理以及异步请求的封装介绍
12-12
Ajax原理： 客户端通过浏览器的内置对象XMLHttpRequest来发送异步请求，当服务器返回响应时，会调用先前注册的回调函数，在回调函数中可以使用javascript操作DOM来更新页面，异步请求不会阻塞客户端的操作，达到页面...
Jquery Ajax请求方法小结(值得收藏)
12-07
废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data]...
jQuery Ajax使用 全解析
01-19
废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，...callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默
关于原生js的几个工具函数和方法
07-27
1、包含了给dom元素条件样式、判断是否已经有某个样式、移除某个样式、切换样式... function: 回调函数(增加动画无限可能) ） obj.timer来存储元素自己的定时器标识 3、实现获取某个dom元素某个样式属性（处理兼容）
搞懂JavaScript全局变量与局部变量，看这篇文章就够了
欢欢的博客
07-09 2539
目录 1.什么是全局变量和局部变量 2.全局变量和局部变量的声明 2.1全局变量的声明 2.2 局部变量的声明 3.全局变量和局部变量一些常见问题 3.1全局变量跟局部变量重名 3.2零散变量的问题 3.3. 变量释放问题 总结： 1.什么是全局变量和局部变量 全局变量：常常定义在函数外部，拥有全局作用域，即在 JavaScript 代码的任何地方都可以访问。 局部变量：定义在函数内部，只能在函数中使用的变量，作用范围是从函数开始到结尾，即在｛｝里。 在函数内声明的变量只...
外部的jQuery链接
欢欢的博客
06-22 1517
外部的jQuery链接，引入即可使用 百度： <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> google： <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> cdn加速： <script src="https://cdn.bo
js实现身份证号查询相关信息
欢欢的博客
07-19 658
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"> <t.
出现弹窗后，禁止页面滑动
欢欢的博客
05-18 478
/**禁用滚动条**/ function unableScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable',function (e) { $(document).scrollTop(top); }) } /**启用滚动条**/ function enableScroll() { $(document).unbind("scroll.unable"); } 需要禁止或启用时，调用对应的函数即可.
移动端使用定位后位置空出来的问题及解决方法
欢欢的博客
05-17 472
HTML部分 <div class="gameDownload"> <div class="publicTitle flex"> <p>游戏下载</p> <p><a href="#">更多</a></p> </div> <div class="gameDownloadType"> <p class="gameDownloadTypeColor
使用react封装一个自定义内容的弹窗方法
最新发布
05-19
可以通过在 React 中使用 Portal 来实现弹窗。Portal 可以将组件渲染到 DOM 树中的另一个位置，这就允许我们在页面的任意位置渲染弹窗。 下面是一个简单的代码示例，演示如何使用 Portal 封装一个自定义内容的弹窗方法： ```jsx import React, { useState } from 'react'; import ReactDOM from 'react-dom'; const Modal = ({ onClose, children }) => { return ReactDOM.createPortal( <div className="modal-overlay"> <div className="modal"> <button onClick={onClose}>Close</button> {children} </div> </div>, document.body ); }; const App = () => { const [showModal, setShowModal] = useState(false); return ( <div> <button onClick={() => setShowModal(true)}>Open Modal</button> {showModal && ( <Modal onClose={() => setShowModal(false)}> <h1>Custom Content</h1> <p>This is some custom content for the modal.</p> </Modal> )} </div> ); }; ReactDOM.render(<App />, document.getElementById('root')); ``` 这个示例中，我们定义了一个 Modal 组件，它接收两个 props：onClose 和 children。onClose 是一个回调函数，用于关闭弹窗；children 是一个传递给 Modal 组件的自定义内容。 在 Modal 组件内部，我们使用 createPortal 将 Modal 组件的内容渲染到 document.body 上，以实现弹窗效果。 在 App 组件中，我们使用 useState 来管理 showModal 状态，它控制着 Modal 组件是否显示。当用户点击 Open Modal 按钮时，我们将 showModal 设置为 true，从而显示 Modal 组件。当用户点击 Modal 中的 Close 按钮时，我们将 showModal 设置为 false，从而关闭 Modal 组件。 这个示例只是一个基本的弹窗实现方法，你可以根据自己的需求对 Modal 组件进行更多的定制，例如添加动画效果、调整样式等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值