前端 jQuery补充

内容概要

• jQuery补充知识

内容详细

阻止后续事件执行

		$('#d1').click(function (e) {
					alert(123)
					// 1.阻止该标签后续事件的执行 方式1   推荐
					// return false
					// 2.阻止该标签后续事件的执行 方式2   了解
					// e.preventDefault()
				})

事件冒泡

		$('div').click(function (e) {
				alert('div')
			})
		$('p').click(function (e) {
				alert('p')
				// 阻止事件冒泡的方式1
				// return false
				// 阻止事件冒泡的方式2
				// e.stopPropagation()
			})
		$('span').click(function (e) {
				alert('span')
			})

文档加载

		// 原生js文档加载方式
		window.onload = function () {}
		// jQuery文档加载方式01
		$(document).ready(function () {})
		// jQuery文档加载方式02
		$(function(){})

事件委托

		// 将body内部所有的点击事件委托给button按钮执行
		$('body').on('click','button',function () {
		// 创建一个button标签
		var btnEle = document.createElement('button')
		// 设置内部文本
		btnEle.innerText = '点我'
		// 将button标签添加到body内部
		$('body').append(btnEle)
		})

动画效果

		  $("#d1").on("click", function () {
			var newI = document.createElement("i");
			newI.innerText = "+1";
			$(this).append(newI);
			$(this).children("i").animate({
			  opacity: 0
			}, 1000)
		  })