Web前端开发工程师知识体系_33_JavaScript jQuery（三）

2021/10/2 17:10:12

编程Tag： javascript 事件 web function 元素 鼠标 绑定 新元素 33

本文主要是介绍Web前端开发工程师知识体系_33_JavaScript jQuery（三），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、添加/删除/替换/克隆

1.添加新元素

（1）DOM三步

//a.创建新的空对象 
var 元素=document.createElement("标签名")

//b.添加必要属性
元素.属性名=属性值

//c.将新元素添加到DOM树
    //末尾追加新元素
    父元素.appendChild(新元素)
    //插入到现有元素之前
    父元素.insertBefore(新元素, 现有元素)
    //替换现有元素:
    父元素.replaceChild(新元素, 现有元素)

（2）jQuery两步

//a.用HTML片段批量创建多个元素，同时设置元素的属性和内容
var $新元素=$(`HTML片段`)

//b.将新元素添加到DOM树，有10个函数
    //在父元素末尾追加新元素
    $父元素.append($新元素)  //return $父元素
    $新元素.appendTo($父元素)  //return $新元素

    //在父元素下开头插入一个新元素
    $父元素.prepend($新元素) //return $父元素
    $新元素.prependTo($父元素)  //return $新元素

    //插入到一个现有元素之前
    $现有元素.before($新元素) //return $现有元素
    $新元素.insertBefore($现有元素) //return $新元素

    //插入到一个现有元素之后
    $现有元素.after($新元素) //return $现有元素
    $新元素.insertAfter($现有元素) //return $新元素

    //替换现有元素
    $现有元素.replaceWith($新元素) //return $现有元素
    $新元素.replaceAll($现有元素) //return $新元素

2.删除元素

$元素.remove()

3.克隆元素

$元素.clone()

举例：点按钮添加方块，点×删除方块；

<head>
	<style>
		.container {
			border: 1px solid #aaa;
			overflow: hidden;
		}
		.block {
			float: left;
			margin: 10px;
			border: 1px solid #aaa;
			background: #faa;
			width: 150px;
			height: 150px;
		}
		.block:hover {
			box-shadow: 0 5px 6px #000;
		}
		.close {
			float: right;
			padding: 5px;
			font-weight: bold;
			opacity: .2;
			cursor: pointer;
		}
		.close:hover {
			opacity: .5;
		}
	</style>
</head>
<body>
	<h1>添加/删除节点</h1>
	<button id="add-block">添加区块</button>
	<div class="container"></div>
	<script src="js/jquery-1.11.3.js"></script>
	<script>
		//一、点击按钮，添加新方块
		//DOM 4步
		//1. 查找触发事件的元素
		//点击按钮触发事件，因为多个方块中的×都可点击，所以用事件委托优化，事件应该只绑定在父元素上一份即可
		$("button")
			//2. 绑定事件处理函数
			.click(function () {
				//3. 查找要修改的元素
				//4. 修改元素
				//4.1创建一个新的方块
				$(`<div class="block"><span class="close">×</span></div>`)
					//4.2设置随机背景色
					.css(
						"background-color",
						`rgb(${
          parseInt(Math.random()*256)
        },${
          parseInt(Math.random()*256)
        },${
          parseInt(Math.random()*256)
        })`
					)
					//4.3将新方块追加到container div下的开头位置
					.prependTo(".container")
			})
		//二、删除之前添加的方块
		//DOM 4步
		//1. 查找触发事件的元素
        //点击按钮触发事件，因为多个方块中的×都可点击，所以用事件委托优化，事件应该只绑定在父元素上一份即可
        //事件委托第1步:
		$(".container")
			//2. 绑定事件处理函数
			.click(function (e) {
				//判断如果当前点击的元素有class close，才能继续执行操作
                //事件委托第2步: e.target代替this
				var $tar = $(e.target);
				//3. 查找要修改的元素
                //事件委托第3步: 判断当前元素
				if ($tar.html() == "×") {
					$tar.parent()
						//4. 修改元素
						.remove();
				}
			})
	</script>
</body>

 如图所示，点击”添加区块“按钮会在下方添加一个随机颜色的方块，点击”ד即可删除当前方块。

二、事件

1.事件绑定

（1）DOM中有三种方法

        a.在HTML中手工绑定，但该方法很繁琐且不便于维护；

        b.在js中用赋值方式绑定，但一个事件上只能绑定一个处理函数；

        c.在js中添加事件监听对象；

元素.addEventListener("事件名",事件处理函数(){ ... })
元素.removeEventListener("事件名",原事件处理函数(){ ... })

（2）jQuery中有一种方法

$元素.on("事件名",事件处理函数(){ ... })
$元素.off("事件名",原事件处理函数)  //移除一个事件监听

//简写
$元素.事件名(事件处理函数)

         可以使用简写的常用事件列表：

事件含义事件含义
blur失去焦点mousemove 鼠标移动
click单击mouseout鼠标移出(dom)

dblclick

双击

mouseover

鼠标进入(dom)
focus获得焦点mouseup鼠标按键抬起
keydown键盘按键按下resize 窗口大小改变

keyup

键盘按键抬起scroll 网页滚动
mousedown鼠标按键按下

mouseleave

鼠标移出(jq)

mouseenter

鼠标进入(jq)

        应注意在jQuery中绑定和移除事件需要用有名称的函数，可以同时绑定多个事件监听对象，但移除时，所有同名的事件处理函数会被一次性全部移除。

举例：点按钮发射子弹，可发射多种子弹，也可移除子弹；

<body>
	<h1>事件绑定</h1>
	<button id="btn1">发射子弹</button>
	<button id="btn2">获得奖励</button>
	<button id="btn3">失去奖励</button>
	<script src="js/jquery-1.11.3.js"></script>
	<script>
		//点btn1时，发射普通子弹
		$("#btn1").click(function () {
			console.log(`发射普通子弹！`);
		})
		var shoot2 = function () {
			console.log(`获得奖励+1`);
		}
		//点btn2时，给btn1多加一种跟踪导弹
		$("#btn2").click(function () {
			$("#btn1").click(shoot2);
		})
		//点btn3时，从btn1移除跟踪导弹
		$("#btn3").click(function () {
			$("#btn1").off("click", shoot2)
		})
	</script>
</body>

2.jQuery中的事件委托

        当多个平级子元素都要绑定相同的事件时，就需要用到事件委托。

（1）DOM事件委托三步（重点）

        a.事件只绑定在父元素上一份;

        b.e.target代替this ；

        c.判断当前目标元素是不是想要的。

（2）jQuery事件委托三步（了解）

        a.事件绑定在父元素上一份，必须用on()方式绑定;

        b.不用e.target代替this，jQuery中this指向最初实际点击的目标元素；

        c.$父元素.on("click","选择器条件",事件处理函数)。

3.页面加载后自动执行

        由于网页是顺序执行的，所以放在外部js文件中的js代码，在结尾引入时是有效的，三在网页开头引入就无效。

        如果想要js初始化操作，必须在网页内容加载完成后才能执行，不要提前执行。就要用window.οnlοad=function(){ }；凡是放在window.οnlοad=function(){ }中的代码，无论写在哪儿都会在整个网页内容加载完成(触发load事件)后，才自动执行。

如下举例：

<body>
  <button id="btn1">click me 1</button>
  <button id="btn2">click me 2</button>
</body>
<script>
  window.onload = function () {
    console.log(`当页面加载完成后自动执行。`);
    $("#btn1").click(function () {
      console.log(`别点了！`);
    })
    $("#btn2").click(function () {
      console.log(`再次警告！！！`);;
    })
  })
</script>

        但是，如果两个js文件中都有window.οnlοad=function(){ }，则只有最后引入的一个js文件中的window.οnlοad=function(){ }会保存下来，造成覆盖。所以用到新写法，该将所有window.οnlοad=function(){ }都换为window.addEventListener("load",function(){ })；

        还应注意，load事件必须等待所有网页内容（HTML+JS+CSS+图片）都加载完才能触发，在网页加载过程中，有两次加载完成事件：

        （1）首先仅DOM内容(HTML+JS)加载完成：DOMContentLoaded

        （2）然后才是所有网页内容加载完成（load）

        今后只要不依赖与css和图片的初始化操作，都应该绑定到DOMContentLoaded事件上。如下：

window.addEventListener(
   "DOMContentLoaded",
   function(){ ... }
)

简写：

$(document).ready(function(){ ... })

$().ready(function(){ ... })

$(function(){ ... })  //常用

$(()=>{ ... })

举例：仅DOM内容加载完成时，就提前给按钮绑定单击事件；

<body>
  <button id="btn1">click me 1</button>
  <button id="btn2">click me 2</button>
</body>
<script>
  //window.onload = function () {
  //window.addEventListener("load", function () {
  $(function () {
    console.log(`当页面加载完成后自动执行。`);
    $("#btn1").click(function () {
      console.log(`别点了！`);
    })
    $("#btn2").click(function () {
      console.log(`再次警告！！！`);;
    })
  })
  // }
  //})
</script>

4.鼠标事件

（1）DOM

mouseover鼠标进入
mouseout鼠标离开

        以上两种即使反复进出子元素，也会反复触发父元素上的鼠标进出事件，存在一定的问题，新的事件为：

mouseenter

鼠标进入
mouseleave鼠标离开

        简化写法：如果同时绑定鼠标进入和鼠标离开两个事件，只需要绑定一个hover()即可，但只在jQuery中适用。格式如下：

$元素.hover( //等同于鼠标进入mouseenter和鼠标移出mouseleave
   function(){ ... }, //给mouseenter
   function(){ ... }, //给mouseleave
 )

举例：使用mouseenter和mouseover绑定鼠标进出事件，并使用hover简化鼠标进出事件；

<body>
	<div id="target">
		<p>Lorem ipsum dolor sit amet</p>
	</div>
	<script src="js/jquery-1.11.3.js"></script>
	<script>
		//当鼠标进入#target时，添加class hover；当鼠标离开#target时，移除class hover
		// $("#target").mouseenter(function () {
		// 	$(this).addClass("hover")
		// })
		// $("#target").mouseleave(function () {
		// 	$(this).removeClass("hover")
		// })

		//简写
		$("#target").hover(function () {
			$(this).toggleClass("hover")  
            //替换函数toggleClass，表示mouseenter与mouseleave切换
		})
	</script>
</body>

5.模拟触发

        即使没有点在按钮上，也能触发按钮上的单击事件处理函数。

$元素.trigger("事件名")

        如果要触发的事件属于常见事件列表，还可以省略trigger()，简写为：

$元素.事件名()



这篇关于Web前端开发工程师知识体系_33_JavaScript jQuery（三）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程