jQuery基础06

最新推荐文章于 2024-06-14 14:36:26 发布
最新推荐文章于 2024-06-14 14:36:26 发布
阅读量116 收藏
点赞数
分类专栏： JQuery 文章标签： jquery html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwq_666/article/details/113726257
版权

stop和delay方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>stop和delay方法</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.one{
				width: 100px;
				height: 100px;
				background: red;
			}
			.two{
				width: 500px;
				height: 10px;
				background: blue;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				$("button").eq(0).click(function(){
					/* 
						在jQuery中的{}中可以同时修改多个属性，多个属性的动画也会同时执行
					 */
					/* $(".one").animate({
						width:500,
						//height:500
					},1000);
					
					$(".one").animate({
						//width:500,
						height:500
					},1000); */
					/* $(".one").animate({
						width:500,
						//height:500
					},1000).animate({
						height:500
					},1000); */
					
					/* 
						delay方法的作用就是用于高速系统延迟时长
					$(".one").animate({
						width:500,
						//height:500
					},1000).delay(2000).animate({
						height:500
					},1000);
					*/
					$(".one").animate({
						width:500
					},1000);
					$(".one").animate({
						height:500
					},1000);
					$(".one").animate({
						width:100
					},1000);
					$(".one").animate({
						height:100
					},1000);
				});
				$("button").eq(1).click(function(){
					//立即停止当前动画
					//$("div").stop();
					//$("div").stop(false);
					
					//立即停止当前和后续所有的动画
					//$("div").stop(true);
					//$("div").stop(true,false);
					
					//立即完成当前的，继续执行后续的动画
					//$("div").stop(false,true);
					
					//立即停止当前的，并且停止后续所有的
					$("div").stop(true,true);
				});
			});
		</script>
	</head>
	<body>
		<button>开始动画</button>
		<button>停止动画</button>
		<div class="one"></div>
		<div class="two"></div>
	</body>
</html>

图标特性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图标特性</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
				width: 400px;
				height: 250px;
				border: 1px solid #000;
				margin: 100px auto;
			}
			ul>li{
				width: 100px;
				height: 50px;
				margin-top: 50px;
				text-align: center;
				float: left;
				overflow: hidden;
			}
			ul>li>span{
				display: inline-block;
				width: 24px;
				height: 24px;
				width: 24px;
				background: url(../img/图标.jpg) no-repeat 0 0;
				position: relative;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				//遍历所有的<li>
				$("li").each(function(index,ele){
					//生成新的图片位置
					var $url = "url(../img/图标.jpg) no-repeat 0" + (index * -24) + "px"
					//设置新的图片位置
					$(this).children("span").css("background",$url);
				});
				//监听li的移入事件
				$("li").mouseenter(function(){
					//将图标往上移动
					$(this).children("span").animate({
						top:-50
					},1000,function(){
						//将图标往下移动
						$(this).css("top","50px");
						//将图片复位
						$(this).animate({
							top:0
						},1000);
					});
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li><span><p>1</p></span></li>
			<li><span><p>2</p></span></li>
			<li><span><p>3</p></span></li>
			<li><span><p>4</p></span></li>
			<li><span><p>5</p></span></li>
			<li><span><p>6</p></span></li>
			<li><span><p>7</p></span></li>
			<li><span><p>8</p></span></li>
		</ul>
	</body>
</html>

无限循环滚动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无限循环滚动</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 1200px;
				height: 354px;
				border: 1px solid #000;
				margin: 100px auto;
				overflow: hidden;
			}
			ul{
				list-style: none;
				width: 3600px;
				height: 354px;
				background: #000;
			}
			ul>li{
				float: left;
			}
		</style>
		<script src="../lib/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//定义变量保存偏移位
				var offset = 0;
				//让图片滚动起来
				var timer;
				function autoPlay(){
					timer = setInterval(function(){
						offset += -10;
						if(offset <= -2400){
							offset = 0;
						}
						$("ul").css("marginLeft",offset);
					},50);
				}
				autoPlay();
				//监听li的移入和移出事件
				$("li").hover(function(){
					//停止滚动
					clearInterval(timer);
					//给非当前选中添加模板
					$(this).siblings().fadeTo(100,0.5);
					//去除当前选中的模板
					$(this).fadeTo(100,1);
				},function(){
					//继续滚动
					autoPlay();
					//去除所有的模板
					$("li").fadeTo(100,1);
				});
			});
		</script>
	</head>
	<body>
		<div>
			<ul>
				<li><img src="../img/星守莎拉.jpg" ></li>
				<li><img src="../img/星守阿狸.jpg"></li>
				<li><img src="../img/星守辛德拉.jpg" ></li>
				<li><img src="../img/星守索拉卡.jpg" ></li>
				<li><img src="../img/星守莎拉.jpg" ></li>
				<li><img src="../img/星守阿狸.jpg"></li>
			</ul>
		</div>
	</body>
</html>

节点

添加节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加节点</title>
		<script src="../lib/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				/*
					内部插入
					append(ocntent|fn)
					appendTo(content)
					会将元素添加到指定元素内部的最后
					
					prepend(content|fn)
					prependTO(content)
					会将元素添加到指定元素内部的最前面
						
					外部插入
					after(content|fn)
					insertAfter(content)
					会将元素添加到指定元素外部的最后
					
					before(content|fn)
					insertBefore(content)
					会将元素添加到指定元素外部的最前面
				 */
				$("button").click(function(){
					//创建一个节点
					var $li = $("<li>新增的li</li>");
					//添加节点---内部插入
					//$("ul").append($li);
					//$("ul").prepend($li);
					
					//$li.appendTo("ul");
					//$li.prependTo("ul");
					
					//添加节点---外部插入
					//$("ul").after($li);
					//$("ul").before($li);
					
					//$li.insertAfter("ul");
					$li.insertBefore("ul");
				});
			});
		</script>
	</head>
	<body>
		<button>添加节点</button>
		<ul>
			<li>我是第1个li</li>
			<li>我是第2个li</li>
			<li>我是第3个li</li>
		</ul>
		<div>我是div</div>
	</body>
</html>

删除节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除节点</title>
		<script src="../lib/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("button").click(function(){
					/* 
						删除节点
						remove([expr])
						删除指定元素
						
						empty()
						删除指定元素的内容和子元素，指定元素自身不会被删除
						
						detach([expr])
					 */
					//$("div").remove();//全部li节点删除
					//$("div").remove(".item");//删除带item元素的li节点

					//$("li").detach();//全部li节点删除
					$("li").detach(".item");//删除带item元素的li节点
					
					//$("div").empty();
				});
			});
		</script>
	</head>
	<body>
		<button>删除节点</button>
		<ul>
			<li class="item">我是第1个li</li>
			<li>我是第2个li</li>
			<li class="item">我是第3个li</li>
			<li>我是第4个li</li>
			<li class="item">我是第5个li</li>
		</ul>
		<div>我是div
			<p>我是一个段落</p>
		</div>
	</body>
</html>

替换节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>替换节点</title>
		<script src="../lib/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				/* 
					替换
					replaceWith(content|fn)
					替换所有匹配的元素为指定的元素
					
					replaceAll(selector)
				 */
				$("button").click(function(){
					//新建元素
					var $h6 = $("<h6>我是标题6</h6>");
					//替换元素
					//$("h1").replaceWith($h6);
					
					$h6.replaceAll("h1");
				});
			});
		</script>
	</head>
	<body>
		<button>替换节点</button>
		<h1>我是标题1</h1>
		<h1>我是标题1</h1>
		<p>我是段落</p>
	</body>
</html>

复制节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复制节点</title>
		<script src="../lib/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				/* 
					clone([Even[,deepEven]])
					如果传入false就是浅复制，如果传入true就是深复制
					浅复制只会复制元素，不会复制元素的事件
					深复制会复制元素，而且还会复制元素的事件
				 */
				$("button").eq(0).click(function(){
					//浅复制一个元素
					var $li = $("li:first").clone(false);
					//将复制的元素添加到li中
					$("ul").append($li);
				});
				$("button").eq(1).click(function(){
					//深复制一个元素
					var $li = $("li:first").clone(true);
					//将复制的元素添加到li中
					$("ul").append($li);
				});
				
				$("li").click(function(){
					alert($(this).html());
				});
			});
		</script>
	</head>
	<body>
		<button>浅复制节点</button>
		<button>深复制节点</button>
		<ul>
			<li>我是第1个li</li>
			<li>我是第2个li</li>
			<li>我是第3个li</li>
			<li>我是第4个li</li>
			<li>我是第5个li</li>
		</ul>
	</body>
</html>
最爱琴女E
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery综合案例小练习——巩固jquery基础知识
春和的博客
03-07 1204
学习玩jquery的基础知识 做一些小的案例练习巩固一下基础知识的运用 在学了jquery后对比发现jquery的功能十分的强大！ 一、隔行换色 1.1、原生js实现隔行换色 原生js实现隔行换色 首先要获取到表格 在获取到表格中的每一行 通过%2判断是奇数行还是偶数行 再通过控制样式实现背景色的变换 准备一个表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g.
JavaWeb——JQuery之基本概述与快速入门实践总结（JQuery各版本区别、JQuery对象和JS对象的区别与转换）
数字世界 万物互联
08-08 396
目录 1JQuery基本概念 2JQuery快速入门 3 JQuery对象和JS对象的区别与转换 1JQuery基本概念 JQuery实际是JavaScript的一个框架，可以用来简化JS的开发。截取下百度百科给出的概念： jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaSc...
Java Web 06_JQuery基础
weixin_64646820的博客
12-22 1204
文章目录 如何学习jQuery 如何在项目中使用jQuery jQuery构造函数 jQuery语法及如何获取页面元素 jQuery选择器分类 jQuery基本选择器 jQuery层次选择器 jQuery属性选择器 DOM操作的分类 jQuery查找元素节点 jQuery设置内容和属性 创建元素节点 删除元素/内容 追加DOM CSS样式 为什么要学习jQuery动画和特效？ 幻灯片效果 Ajax的原理介绍 Ajax的优势 Json数据
jQuery基础
jartins的博客
01-22 224
jQuery 的入口函数 $(document).ready(function() { }); $(function() { }); javascript 的入口函数 window.onload = function () { } jQuery 与 javascript 入口函数的区别 jQuery是在html所有标签dom都加载之后就会去执行，可以执行多次 第N次都不会被上一次覆盖 javascript是等到所有内容包含图片、外链等信息加载完才回去执行，只能执行第一次.
06 Jquery 基础
weixin_30780221的博客
04-06 54
06 Jquery 基础 前端学习之jquery： jQuery：一个库 Jquery的基础语法: $(selector).action() 基本选择器： <script> //基本选择器 //$("*") $("#id") $("div") $("p") $("elemen...
jQuery基础笔记
weixin_45641191的博客
09-04 289
jQuery教程从零玩转jQuery-初识jQueryjQuery是什么? 从零玩转jQuery-初识jQuery jQuery是什么? ● jQuery是一款优秀的JavaScript库, 从命名可以看出jQuery最主要的用途是用来做查询(jQuery=js+Query) ，正如jQuery官方Logo副标题所说 (write less, do more)使用jQuery能 上我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单 ● 原生JS设置背景(先不要求看懂代码，先看看谁更爽)
JQuery基础练习
qq_39095899的博客
04-03 251
Jquery练习 基本选择器练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery基本选择器</title> <script src="js/jquery-3.4.1.js" type="text/javascript" c...
JQuery基础笔记及案例
H.千面的博客
06-28 221
JQuery高级内容链接： 文章目录JQuery 基础内容一、JQuery 基础：1.概念2. 快速入门3. JQuery对象和JS对象区别与转换4.选择器：筛选具有相似特征的元素(标签)5. DOM操作6.案例1. 隔行换色2.全选和全不选3. QQ表情选择4. 多选下拉列表左右移动 JQuery 基础内容 JQuery 基础： 概念 快速入门 JQuery对象和JS对象区别与转换 选择器 DOM操作 案例 一、JQuery 基础： 1.概念 概念： 一个JavaScript框架。简化JS开发
jquery基础_02.2
m0_58451019的博客
04-15 204
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"&g.
JavaWeb_jQuery基础篇
m0_46613077的博客
08-25 165
jQuery基础篇 本文主要是jQuery入门的理解。所总结的内容主要包括： 1.jQuery 的属性操作 2.DOM的增删改操作 3.jQuery 事件操作 … 【注】jQuery在线手册 文章目录jQuery基础篇一、jQuery 的属性操作jQuery练习——全选/全不选/反选二、DOM 的增删改操作jQuery练习——动态表格三、jQuery 事件操作3.1 jQuery中其他事件的处理方法3.2 事件的冒泡3.3 获取事件的对象jQuery练习_图片的跟随 一、jQuery 的属性操作
WEB06_jQuery基础.zip
11-13
jquery学习，从最基础的开始，适用于对js不太了解的人使用，包含代码和资料，包含20个案例，由于视频太大，无法上传，需要的可以给我留言，单独发送
jquery基础教程06
08-23
jquery基础教程，总共分为10章，内容全面，讲解详细，是入门精通的好教程。
Web编程基础-CSS、JAVASCRIPT、JQUERY
12-11
Web编程基础——CSS、JavaScript、jQuery 作者:何婕，李健苹　主编出版社:重庆大学出版社出版时间:2015年06月 本书紧密围绕网页设计师在进行Web前台开发中实际需要掌握的技术，全面介绍了使用DIV+CSS、JavaScript、...
jQuery开发.NET富客户端应用
12-21
06.jQuery选择器(基础)至选择器(表单) 07.选择器(表单)至属性(CSS类) 08.属性(CSS类)至属性(值) 09.属性(值)至过滤(filter) 10.过滤(filter)至查找(offsetParent) 11.查找(offsetParent)至文档处理(外部插入) 12....
jQuery EasyUI 1.5.2 离线简体中文API文档（含开发工具包、皮肤、扩展、演示）
06-27
另外由于官方会不定期的更新官方的文档，更新也不会通知我，所以我制作API的时候也只能根据我所在时间点的官方文档作为翻译基础，而文档发布之后更新的内容自然不会出现在中文API当中，所以这就需要大家的帮忙和反馈...
HTML跨年烟花
热门推荐
兔子王
06-04 1万+
学会了这个html烟花秀，跨年就不缺文案喽~
【html】如何利用HTML+CSS制作自己的印章
weixin_56334307的博客
06-10 536
大家有没有尝试过用HTML和CSS制作自己的印章.首先印章圆形的边框。
js之简单轮播图
weixin_58462329的博客
06-11 741
今天给大家封装一个简单的轮播图,可以点击下一张上一张以及自动轮播。如上图所示的效果,需要修改下样式更好看。
Html_Css问答集(3)
最新发布
白话魔法师
06-14 497
html与css学习中的一些疑问，问答中轻松获取知识。
jquery基础教程
09-28
下面是学习jQuery的基础教程步骤： 1. 引入jQuery库：在HTML文件中引入jQuery库，可以使用CDN链接或者本地引入文件的方式。 2. 选择器：学习使用jQuery选择器来选取HTML元素。jQuery提供了多种选择器，包括基本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值