jQuery元素创建 添加 删除 jQuery事件监听 jQuery动画

---

创建标签

 $("<标签名>") 创建标签,返回的是一个jq对象
 appendTo() 将标签添加到指定的标签下
$("<div>").appendTo($('body'))

append() 在指定标签中添加新的元素标签
		$("body").append($("<hr>"))

将标签添加到指定标签的前面
        $("<hr>").insertBefore($(".list"))
将标签添加到指定标签的后面
		$("<hr>").insertAfter($(".list"))
   删除标签 remove 将jq对象中的元素冲DOM移除
	$("#box").remove()
	
// 链式调用
		$("<ul>")
		添加class值
		.addClass("list")
		在指定标签中添加新的元素标签
		.append(
		创建li标签
			$("<li>")
			.addClass("listItem")
			文本内容为
			.text("小红")
		)

---

---

jQuery事件监听

document.getElementById("btn").onclick = function(e){
			// 原生js绑定事件中,event对象是MouseEvent类型对象
			console.log(e)
		}
$("#btn").click(function(e){
			// 使用jq绑定事件监听,函数中的e是一个jquery封装好的事件对象,不是原生的事件对象
			// originalEvent 原生事件对象
			console.log(e.originalEvent)
		})
		鼠标移入事件
	$("#box").mouseenter(function(e){
			console.log("鼠标移入")
		})
			// jq对象.one()函数 用于给jq对象添加一次性事件监听,只有在事件首次触发才执行
		$("#one").one("click", function(e){
			console.log("这个事件函数只会执行一次！")
		})
		

---

jQuery动画

$("#show").on("click", function(e){
jq对象.show() 函数用于显示jq对象中的标签元素 没有动画效果
  $("#box").show()
}
// jq对象.hide() 函数用于隐藏jq对象中的标签元素,通过display:none隐藏标签   没有动画效果
		$("#box").hide()


渐隐渐消的效果
$("#box").fadeIn(1000, function(){
			// 	console.log("标签显示完毕！")
			// })
// jq对象.fadeOut() 使用渐隐渐消动画(透明度)
			// 参数 1.动画持续时间 2.动画结束时回调的函数
			// $("#box").fadeOut(1000, function(){
			// 	console.log("动画结束了！")
			// })


	// slideDown() 实现元素显示, 通过修改标签高度隐藏标签
			$("#box").slideDown()
	// slideUp() 实现元素隐藏, 通过修改标签高度隐藏标签,参数和fadeOut一样  高度为200减到0
			$("#box").slideUp(500, function(){
				console.log("藏起来了")
			})


	// 使用jq对象.animate()函数,自定义动画
			// 1.要产生的动画效果(css样式)
			// 2.执行的时间 slow  fast  毫秒数
			// 3.动画结束时的回调函数
			$("#box").animate({
				width: "400px",
				height: "400px"
			}, 2000, function(){
				console.log("动画结束了！")
			}).animate({
				opacity:"0.2"
			})

---