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

已于 2023-11-29 20:16:08 修改
阅读量207 收藏
点赞数
分类专栏： Web前端 文章标签： jquery js java html css
于 2020-11-23 23:43:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45118229/article/details/110008788
版权

系列文章目录

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的基础可以进一步对节点的操作和动画进行学习。类比JavaScript，进行jQuery的学习。

一、jQuery节点的操作

1.1 节点的操作

所用的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库

  1. $(html)创建节点
  2. colon()
<script type="text/javascript">

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

2.添加节点

  • append()
  • prepend()
    可以用于论坛的发帖，一般放在前面
  • appendTo()
  • prependTo()
//父子之间

//用父加子
//	添加到后面(给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.删除节点

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

1.1 节点的案例

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/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="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>

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

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

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

1.2 事件绑定

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

    $(“html”).bind(“mouseover”,function(){
    函数内容
    })

  2. 一次绑定多个事件

    $(html).bind({
    “mouseover”:function(){
    函数内容
    }, “mouseout”:function(){
    函数内容
    }
    })

  3. 不用bind可以用以下方法

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

代码如下（示例）：

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

<script type="text/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
代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/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="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
	
<script type="text/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 显示和隐藏

  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 动画案例

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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/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="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/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）
<!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="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
	
<script type="text/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 节点的关系

类似于js的方法去寻找

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

<script type="text/javascript">
//	用类似于js的方法 
//也可以用css的方法去找节点
//	找孩子
	console.log($("").children().length)
	console.log($("").children("").length)
//	找父亲
	$("").parent().css()
//	下一个兄弟
	$("").next().css()
//	前一个兄弟
	$("").prev().css()
//	除了自己
	$("").siblings().css()
</script>
Le`soleil
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web前端知识点总结(持续更新中...)
m0_60472527的博客
10-18 3128
web知识点
JQuery学习笔记二(节点操作,事件监听,动画相关方法)
01-08
节点操作  2. $()可以将一个普通字符串转成一个JQuery对象 3. 创建节点 4. appendTo() 5. prepend() 6. prependTo() 7. after() 8. before() 9. insertBefore() 10. wrap() 11. wrapAll() 12. replaceWith() 13. ...
Web前端 学习知识点总结（七）Css3动画animation
weixin_45118229的博客
10-23 593
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、早期的动画二、CSS3的动画效果1.transform2.读入数据总结 前言 通过transform，transition和animation可以在页面中做出一些基本的动画效果。 提示：以下是本篇文章正文内容，下面案例可供参考 一、早期的动画 Gif GIF是一种
学习web（前端）的知识点汇总，初学者稳稳拿捏!!!
m0_59273150的博客
10-01 7579
目录 1、HTML知识点汇总 2、CSS知识点汇总 3、JS知识点汇总 一、HTML5（网页的骨架） 常用开发软件：Hbuilderx 使用过程：创建项目—创建目录—编写代码—运行（crtl+R） >>> <1>标签： 6类： 标题标签：h1-h6 *用之标题标记，六级标题之间不可嵌套，默认换行、变粗（h7和普通标题标记相同的样式） div标签:（块级标签） *有换行默认样式 p标...
Web前端 学习知识点总结（十二）jQuery进阶 表单验证和简单正则表达式
weixin_45118229的博客
11-24 256
系列文章目录 文章目录系列文章目录前言一、表单验证1.1 表单验证的时机1.2 表单选择器1.3 常见表单验证的规则二、正则表达式2.1 常见的正则表达式2.2 常见的正则表达式 前言 表单可以作为一个独立的模块来进行学习，在进行提交的时候经常会使用到表单的内容。 一、表单验证 减轻服务器的压力，数据在发送给服务器之前，需要先在客户端进行一些基本的验证。为了保证数据的完整性，并减服务器压力，还可以提升用户的体验。 1.1 表单验证的时机 表单在提交的时候进行验证，为了证明，使用return f
Web前端 学习知识点总结（十）jQuery基础 获取文本和选择器
weixin_45118229的博客
11-11 369
系列文章目录 文章目录系列文章目录前言一、案例一 购物车二、案例二 轮播图1.引入库2.读入数据总结 前言 在学习了JS的基础以后，多练习简单的案例可以帮助我们更好的理解JS语言的使用方式，以及相应功能的实现，在此分享轮播图案例。 提示：以下是本篇文章正文内容，下面案例可供参考 一、案例一 购物车 目标： 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、案例二 轮播图 1.引入库 代码如下（示例）： import numpy as np impor
Web前端 学习知识点总结（十三）学生管理系统案例
weixin_45118229的博客
11-25 2318
系列文章目录 文章目录系列文章目录前言一、系统设计思路二、系统代码2.1 html2.2 Javascript2.3 Css 前言 前端的基本内容到此就到结束了，主要是四部分的学习html5，css3，JavaScript，和jQuery的学习。通过不断的学习，笔者现在认为，如果需要做一名程序员，就需要不断的练习，并根据需要不断学习。之后得JavaSE中继续学习Java的基础，提高编程能力。 一、系统设计思路 对于该系统 总体分为两部分： 1.删除功能 横向删除 $(":button[na
Web前端 学习知识点总结（一）HTML基本标签
weixin_45118229的博客
09-21 1209
文章目录前言一、Web前端二、HTML1.HTML介绍2.基本的标签3.结构标签4.块元素和行内元素总结 前言 本文是Web系列学习的第一章内容，本人也是第一次接触到Web的学习。希望通过自己的努力学习可以获得最近基本的Web开发能力。 一、Web前端 是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。 在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态..
Web前端 学习知识点总结（四）之display 和 float
weixin_45118229的博客
10-07 668
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、display1.页面的布局2.display的内的属性3.hover隐藏案例二、使用步骤1.引入库2.读入数据总结 前言 本文来总结一下display和float，两者为了页面的合理布局而设计的。 提示：以下是本篇文章正文内容，下面案例可供参考 一、display
JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支
01-19
本文实例讲述了JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支。分享给大家供大家参考，具体如下： 页面加载事件的比较 [removed] jquery 中的 document.ready document.ready = function ...
web前端设计师们常用的jQuery特效插件汇总
12-09
1.jQuery鼠标悬停文字渐隐渐现动画效果 这是一款基于JQuery实现的鼠标悬停文字渐隐渐现动画效果源码，是一款鼠标悬停后图片渐渐有一层透明遮罩层，同时说明文字从左侧滑入，鼠标离开后文字从右侧滑出，整体效果美观...
WEB开发之jQuery EasyUI前端UI学习与应用
06-10
前端开发的程序员，我相信他们都会熟练地运用至少一套适合自己的UI控件，无论是用jQuery EasyUI还是其他的UI控件。重写的UI控件，主要体现在兼容性好，样式统一，如果你不用UI控件，用浏览默认的控件，它们的样式将...
JavaScript & jQuery 交互式Web前端开发 (最清晰带书签版)
04-19
你是一名JavaScript新手?...本书不仅向您展示如何阅读和编写JavaScript代码，同时还会以一种简单且视觉化的方式，教您有关计算机编程的基础知识。阅读本书之前，您只需要对HTML和CSS有一些了解即可。
J031_使用TCP协议支持与多个客户端同时通信
lzn20161229的博客
08-03 514
使用TCP协议支持与多个客户端同时通信。
C++ - 函数重载
最新发布
jiaowenjie的专栏
08-06 277
/打印的是第二个函数的地址。//打印的是第一个函数的地址。-> 重载函数在本质上是相互独立的不同函数。-> 函数返回值不能作为函数重载的依据。-> 重载函数的函数类型不同。**3.函数默认参数和函数重载****函数重载的注意事项：****4.函数重载的本质**
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
m0_74283290的博客
08-03 1341
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
枚举工具类
qq_43049583的博客
08-04 504
java枚举工具类
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Le`soleil

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值