系列文章目录

Web前端学习知识点总结（一）HTML基本标签.
Web前端学习知识点总结（二）之Form和Css选择器.
Web前端学习知识点总结（三）Css字体、文本样式以及盒子模型.
Web前端学习知识点总结（四）之display 和 float.
Web前端学习知识点总结（五）qq导航条案例，使用min-width解决留白.
Web前端学习知识点总结（六）定位position.
Web前端学习知识点总结（七）Css3动画animation.
Web前端学习知识点总结（八）JavaScript的常用基础.
Web前端学习知识点总结（九）JavaScript的BOM和DOM基础.
Web前端学习知识点总结（十）jQuery基础获取文本和选择器.
Web前端学习知识点总结（十一）jQuery进阶动画和节点操作.
Web前端学习知识点总结（十二）jQuery进阶表单验证和简单正则表达式.
Web前端学习知识点总结（十三）学生管理系统案例.

文章目录

系列文章目录
前言
一、jQuery节点的操作
- 1.1 节点的操作
- 1.1 节点的案例
- 1.2 事件绑定
- 1.3 hover事件
二、动画
- 2.1 显示和隐藏
- 2.2 动画案例
三、补充
- 3.1 节点的遍历
- 3.2 节点的关系

前言

有了jQuery的基础可以进一步对节点的操作和动画进行学习。类比JavaScript，进行jQuery的学习。

提示：以下是本篇文章正文内容，下面案例可供参考

一、jQuery节点的操作

1.1 节点的操作

所用的html

html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div">
			<p id="p1">111</p>
			<span class="cc">22222</span>
		</div>
	</body>
</html>

1.创建节点
jQuery的操作都在script中进行，且要引入jQuery库

$(html)创建节点
colon()

html" title=java>javascript"><script type="text/html" title=java>javascript">

//html" title=js>js的方法
	var h2 = document.createElement("h2")
	h2.innerHTML=
//html" title=jquery>jquery的方法
	var $h = $("<h2 class='h'>创建节点</h2>")
//克隆一个$(".cc")
	$(".cc").clone()
</script>

2.添加节点

append()
prepend()
可以用于论坛的发帖，一般放在前面
appendTo()
prependTo()

html" title=java>javascript">//父子之间

//用父加子
//	添加到后面(给id为div后加$h)
	$("#div").append($h)
//	添加到前面(给id为div前加$h) 
	$("#div").prepend($h)


//用子加父
//	添加到后面(把$h添加到id为div后面)
	$h.appendTo("#div")
//	添加到前面(把$h添加到id为div前面)
 	$h.prependTo("#div")


//兄弟之间
//添加到前面(给id为p1的前面添加$h)
	$("#p1").before($h)
//添加到后面(给id为p1的后面添加$h)
 	$("#p1").after($h)
//把$h插入到p1后面
	$h.insertAfter("#p1")
//把$h插入到p1前面
	$h.insertBefore("#p1")

3.删除节点

html" title=java>javascript">//连自己和子元素全部移除掉
	 $("#p1").remove()
//重置 移除子元素，不移除自身元素
	 $("#div").empty()

1.1 节点的案例

要求：
当选择其中一张图片，添加到下面的选择区域中。
在这里插入图片描述

html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">css">
			img{
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div>
			<!--<img src="img/f01.jpg"  οnclick="doclick(this)"/>-->
			<img src="img/f01.jpg"  />
			<img src="img/f02.jpg"  />
			<img src="img/f03.jpg" />
			<img src="img/f04.jpg" />
		</div>
		您选择的图片有：
		<div id="choiced"></div>
	</body>
</html>
<script src="html" title=js>js/html" title=jquery>jquery-1.12.4.html" title=js>js" type="text/html" title=java>javascript" charset="utf-8">html" title=java>javascript"></script>

<script type="text/html" title=java>javascript">html" title=java>javascript">
//	方法一
//	function doclick(obj){
//		$(obj).appendTo($("#choiced"))
//	}

//方法二
$("img").click(function(){
//	不加colon会整体过去
	$(this).clone().appendTo($("#choiced"))
})
</script>

案例结果，当选择第一个图片的时候会进行添加。
在这里插入图片描述

1.2 事件绑定

一次绑定一个单一事件
" mouseover "内的函数可以进行替换内容为基本鼠标事件不加on

$(“html”).bind(“mouseover”,function(){
函数内容
})
一次绑定多个事件

$(html).bind({
“mouseover”:function(){
函数内容
}, “mouseout”:function(){
函数内容
}
})
不用bind可以用以下方法

$(html).mouseover(function(){
函数内容
}).mouseout(function(){
函数内容
})

代码如下（示例）：

html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p id="pp">悬浮为红，离开为蓝</p>
		
	</body>
</html>
<script src="html" title=js>js/html" title=jquery>jquery-1.12.4.html" title=js>js" type="text/html" title=java>javascript" charset="utf-8">html" title=java>javascript"></script>

<script type="text/html" title=java>javascript">html" title=java>javascript">
//	方法一
//	$("#pp").bind("mouseover",function(){
//		$("#pp").css("color","red")
//		
//	})
//	$("#pp").bind("mouseout",function(){
//		$("#pp").css("color","blue")
//		
//	})
//	方法二
//on off bind unbind
	$("#pp").bind({
		"mouseover":function(){
		$("#pp").css("color","red")
		
	},	"mouseout":function(){
		$("#pp").css("color","blue")
		}
	})
//	取消事件 可以取消其中的事件
//	function cancel(){
//		$("#pp").unbind()
//	}
</script>

1.3 hover事件

hover是比较特殊的事件，有进入和离开两种方式，是enter 和 leave 两个叠加的符合函数。
$(this).find(“a”) 用来寻找在this下面的子标签a
代码如下（示例）：

html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">css">
			a{
				display: none;
			}
		</style>
	</head>
	<body>
		<p>
			111
			<a>111</a>
		</p>
		<p>
			112
		<a>111</a>
		</p>
		<p>113</p>
	</body>
</html>
<script src="html" title=js>js/html" title=jquery>jquery-1.12.4.html" title=js>js" type="text/html" title=java>javascript" charset="utf-8">html" title=java>javascript"></script>
	
<script type="text/html" title=java>javascript">html" title=java>javascript">
//	$("p a").css("color","red")
//	enter 和 leave 两个叠加的符合函数

//hover 往往表示两个事件 前面为进入时的事件,类似于enter 后面为离开的事件,类似于leave
	$("p").hover(function(){
			var obj = this;
//			用this.find()找到下级的选择器
//			$(obj).find("a").css("color","red");
//			$(obj).children("a").css("color","red");
//			$(this).css("color","red");
		
		
			$(this).find("a").css("display","block")
	},
	function(){
	//写当离开时候的事件
	})
</script>

二、动画

2.1 显示和隐藏

默认

show(speed，easing，fn)

speed速度(slow,normal,fast或者毫秒值)
easing指定切换效果（swing（默认）linear（匀速））
fn动画完成后执行函数

用在显示的时候

show()
slideDown()
fadeIn()

用在隐藏的时候

slideUp()
hide()
fadeOut()

显示或隐藏
相当于show()和hide()的结合，当为show()的时候进行hide()操作，当为hide()的时候进行show()的操作。

toggle()

2.2 动画案例

点击显示进行显示，点击隐藏进行隐藏，点击显示或隐藏进行显示或隐藏。
在这里插入图片描述

html">
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">css">
			img{
				width: 150px;
				
			}
		</style>
	</head>
	<body>
		<img src="img/f01.jpg"/>
		<input type="button"  value="显示" onclick="showImg()"/>
		<input type="button"  value="隐藏" onclick="hideImg()"/>
		<input type="button"  value="显示或隐藏" onclick="toggleImg()"/>
	</body>
</html>
<script src="html" title=js>js/html" title=jquery>jquery-1.12.4.html" title=js>js" type="text/html" title=java>javascript" charset="utf-8">html" title=java>javascript"></script>
<script type="text/html" title=java>javascript">html" title=java>javascript">
	function showImg(){
//		show(speed速度(slow,normal,fast或者毫秒值),easing指定切换效果（swing（默认），linear（匀速）,fn动画完成后执行函数)
//		$("img").show(1000)
//slideDown从上往下 用在show
//		$("img").slideDown("slow")
// .fadeIn()用在show
$("img").fadeIn("slow")
	}
	function hideImg(){
//		从下往上 用在hide
//		$("img").slideUp("slow") 
//		$("img").hide("slow")
//		 .fadeOut()用在show
$("img").fadeOut("slow")
	}
	function toggleImg(){
		$("img").toggle("slow")
	}
</script>

三、补充

3.1 节点的遍历

一共有三种方法：

方法一：for循环

for(var i = 0;i<input.length;i++){
console.log(input[i].value)
}
方法二：$("").each(fn)

fn（i，element）可以同时获取下标和索引

方法三：$.each(对象, fn）

html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" value="1" />
		<input type="text" value="2" />
		<input type="text" value="3" />
		<input type="text" value="4" />
		<input type="text" value="5" />
		<input type="button" value="获取" onclick="doclick()" />
	</body>
</html>
<script src="html" title=js>js/html" title=jquery>jquery-1.12.4.html" title=js>js" type="text/html" title=java>javascript" charset="utf-8">html" title=java>javascript"></script>
	
<script type="text/html" title=java>javascript">html" title=java>javascript">
	function doclick(){
//		$("input[type=text]").css("background-color","gray")
//		只能获取一个
//		console.log($("input[type=text]").val())
		
//		遍历
var input = $("input[type=text]")
//方式一
//for(var i = 0;i<input.length;i++){
//	console.log(input[i].value)
//}

//方式二 $("").each(fn) 不支持break 和continue return flase(等于break) return ture(等于continue)
//$("input[type=text]").each(function (i,element){
//	function 中有i可以获取索引值
//	if(i==3){
//		return false;
//	}
//	console.log(i+" "+element.value+" "+this.value+" "+$(this).val())
//})
//方式三
var inputs = document.getElementsByTagName("input")
//	$.each(inputs, function() {
//		console.log(this.value)
//	});
	for(var it in inputs){
		console.log(inputs[it].value);
	}

}
</script>

3.2 节点的关系

类似于html" title=js>js的方法去寻找

html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

<script type="text/html" title=java>javascript">html" title=java>javascript">
//	用类似于html" title=js>js的方法 
//也可以用css的方法去找节点
//	找孩子
	console.log($("").children().length)
	console.log($("").children("").length)
//	找父亲
	$("").parent().css()
//	下一个兄弟
	$("").next().css()
//	前一个兄弟
	$("").prev().css()
//	除了自己
	$("").siblings().css()
</script>

Web前端学习知识点总结（十一）jQuery进阶动画和节点操作

系列文章目录

文章目录

前言

一、jQuery节点的操作

1.1 节点的操作

1.1 节点的案例

1.2 事件绑定

1.3 hover事件

二、动画

2.1 显示和隐藏

2.2 动画案例

三、补充

3.1 节点的遍历

3.2 节点的关系

相关文章

SpringBoot整合SSM项目

sys.argv

SpringBoot2继承了WebMvcConfigurationSupport后，WebMvcAutoConfiguration自动配置失效

Web前端学习知识点总结（十二）jQuery进阶表单验证和简单正则表达式

Binwalk的安装和使用

模块--json

Web前端学习知识点总结（十三）学生管理系统案例

CodeForces 794 G.Replace All

Web前端 学习知识点总结（十一）jQuery进阶 动画和节点操作

系列文章目录

文章目录

前言

一、jQuery节点的操作

1.1 节点的操作

1.1 节点的案例

1.2 事件绑定

1.3 hover事件

二、 动画

2.1 显示和隐藏

2.2 动画案例

三、补充

3.1 节点的遍历

3.2 节点的关系

相关文章

Web前端学习知识点总结（十一）jQuery进阶动画和节点操作

二、动画