jquery_基础简介2

最新推荐文章于 2023-07-11 22:34:36 发布
最新推荐文章于 2023-07-11 22:34:36 发布
阅读量106 收藏
点赞数
分类专栏： 前端 jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_zhiyi/article/details/108624002
版权
  • jQuery 效果- 隐藏和显示

1. javascript控制隐藏和显示
通过控制css样式的display属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		window.onload=function(){
			document.getElementById("but1").onclick=function(){
				var buttext=document.getElementById("but1").value;
				if(buttext=="隐藏"){
					//控制图片的隐藏
					document.getElementById("img1").style.display="none";
					document.getElementById("but1").value="显示";
				}
				if(buttext=="显示"){
					document.getElementById("img1").style.display="block";
					document.getElementById("but1").value="隐藏";
				}
			}
		};
	</script>
	<body>
		<input type="button" id="but1" value="隐藏" /><br>
		<img id="img1" src="avatar5.png"  style="display: block;">
	</body>
</html>

在这里插入图片描述2. jquery控制隐藏和显示
   jQuery hide() 和 show()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="jquery-3.5.1.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#but2").click(function(){
				var buttext=$("#but2").val();
				if(buttext=="隐藏"){
					$("#img2").hide(5000,function(){
						$("#but2").val("显示");
					});
				}
				if(buttext=="显示"){
					$("#img2").show(2000,function(){
						$("#but2").val("隐藏");
					});
				}
			});
		});
	</script>
	<body>
		<input type="button" id="but2" value="隐藏" /><br>
		<img  id="img2" src="avatar5.png" >
	</body>
</html>

在这里插入图片描述jQuery 效果 - 淡入淡出
   jQuery fadeIn() 用于淡入已隐藏的元素。
   jQuery fadeOut() 方法用于淡出可见元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but3").click(function(){
					var buttext=$("#but3").val();
					if(buttext=="淡出"){
						$("#img3").fadeOut(3000,function(){
							$("#but3").val("淡入");
						});					   
					}
					if(buttext=="淡入"){
						$("#img3").fadeIn(3000,function(){
							$("#but3").val("淡出");
						});
					}
				});
			});
		</script>
	</head>
	<body>
		<input  id="but3" type="button" value="淡出"/><br>
		<img  id="img3" src="avatar5.png" >
	</body>
</html>

在这里插入图片描述jQuery 效果 - 滑动
   jQuery slideDown() 方法用于向下滑动元素。
   jQuery slideUp() 方法用于向上滑动元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but4").click(function(){
					var buttext=$("#but4").val();
					if(buttext=="滑出"){
						$("#img4").slideUp(3000);
						$("#but4").val("滑入");
					}
					if(buttext=="滑入"){
						$("#img4").slideDown(3000);
						$("#but4").val("滑出");
					}
				});
			});
		</script>
	</head>
	<body>
		<input  id="but4" type="button" value="滑出"/><br>
		<img  id="img4" src="avatar5.png" >
	</body>
</html>

在这里插入图片描述jQuery 效果- 动画
  jQuery animate() 方法允许您创建自定义的动画。
语法：
  $(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性.
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					$("#div1").animate({left:"300px",top:"300px",width:"200px",height:"200px"},5000,function(){
						alert("动画执行结束");
					});
				});
			});
		</script>
	</head>
	<body>
		<h1>jQuery animate() 方法允许您创建自定义的动画。</h1>
		<h2>语法：$(selector).animate({params},speed,callback);</h2>
		<h2>必需的 params 参数定义形成动画的 CSS 属性.</h2>
		<h2>可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。</h2>
		<h2>可选的 callback 参数是动画完成后所执行的函数名称。</h2>
		<input id="but1" type="button"  value="开始动画"/>
		<div id="div1" style="background:#98bf21;height:100px;width:100px;position:absolute;">
		</div>
	</body>
</html>

在这里插入图片描述jQuery 停止动画
  jQuery stop() 方法用于停止动画或效果，在它们完成之前。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"> 
#panel,#flip,#updiv{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
#updiv{
	display:none;
}
</style>
<script src="jquery-3.5.1.js"></script>
<script> 
$(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000,function(){
		 $("#updiv").show();
	});
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
  
  $("#updiv").click(function(){
    $("#panel").slideUp(5000,function(){
		 $("#updiv").hide();
	});
  });
});
</script>
 
</head>
<body>
	<button id="stop">停止滑动</button>
	<div id="flip">点我向下滑动面板</div>
	<div id="panel">Hello world!</div>
	<div id="updiv">点我向上滑动面板</div>
</body>
</html>

在这里插入图片描述jQuery - 链(Chaining)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	#div1{
		background-color: red;
		width: 200px;
		height: 200px;
		border-radius: 100px;
	}
	#div2{
		background-color: yellow;
		width: 200px;
		height: 200px;
		border-radius: 100px;
	}
</style>
<script src="jquery-3.5.1.js"></script>
</script>
<script>
$(function(){
  $("#but1").click(function(){
	  //延迟执行的函数
	   setTimeout(function(){
		   for(var i=1;i<=10;i++){
			    $("#div1").fadeOut(500).fadeIn(500);
		   }
	   },0);  
	  setTimeout(function(){
	  		   for(var i=1;i<=10;i++){
	  			    $("#div2").fadeOut(500).fadeIn(500);
	  		   }
	  },10000); 
  });
});
</script>
</head>
<body>
	<input id="but1" type="button"  value="红灯亮"/>
	<div id="div1"></div>
	<div id="div2"></div>
</body>
</html>

在这里插入图片描述
jQuery HTML
  1.jQuery获取/设置文本元素的值
     jQuery获取元素的值 text()、html() 以及 val()
     text()—返回所选元素的文本内容
     html()–返回所选元素的内容（包括 HTML 标记）
     val()----返回表单字段的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					//alert($("#div1").text());
					//alert($("#but1").text()); //错误
					//alert($("#text1").text());//错误
					alert($("#div1").html());
					alert($("#but1").val());
				});
			});			
		</script>
	</head>
	<body>
		 <h1>jQuery获取元素的值  text()、html() 以及 val()</h1>
		 <h2>text()---返回所选元素的文本内容</h2>
		 <h2>html()--返回所选元素的内容（包括 HTML 标记）</h2>
		 <h2>val()----返回表单字段的值</h2>
		 <hr>
		 <input id="but1"  type="button" value="测试" />
		  <input id="text1"  type="text" value="测试text" />
		 <div id="div1">
			  <h1>测试jQuery获取元素的值1</h1>
			  <h1>测试jQuery获取元素的值2</h1>
		 </div>	 
	</body>
</html>

在这里插入图片描述

  • 2.jQuery设置元素的值
      text(value)、html(value) 以及 val(value)
      text(value)—设置所选元素的文本内容
      html(value)–设置所选元素的内容（包括 HTML 标记）
      val(value)----设置表单字段的值
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but2").click(function(){
					$("#div2").html("<h1>hello,world</h1>");
					$("#but1").val("测试jqueryh获取元素值");
				});
			});			
		</script>
	</head>
	<body>
		 <input id="but2"  type="button" value="测试" />
		 <div id="div2"></div>	
	</body>
</html>

在这里插入图片描述

H之一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery2_基础下
gingerMr的博客
06-13 127
文章目录动画1. 三种方式显示和隐藏元素1.1 默认显示和隐藏方式1.1.1 show([speed,[easing],[fn]])1.1.2 hide([speed,[easing],[fn]])1.1.3 toggle([speed],[easing],[fn])1.2 滑动显示和隐藏方式1.2.1 slideDown([speed],[easing],[fn])1.2.2 slideUp([speed,[easing],[fn]])1.2.3 slideToggle([speed],[easing],
jQuery基础简介
01-06
jQuery基础简介，个人整理的关于jQuery的一些基础知识，主要来源菜鸟教程，还有网上搜集的一些其它资源，需要的话可以参考一下
jQuery-2
最新发布
weixin_62788356的博客
07-11 84
= 页面元素.clone()(是否克隆元素事件，是否克隆子元素事件)==要插入的元素.insertBefore(页面元素)==要插入的元素.insertAfter(页面元素)== 把要插入的元素放到页面元素的上一个兄弟元素位置。==把要插入的元素放到页面元素的下一个兄弟元素位置。==把要插入的元素放到页面元素的下一个兄弟元素位置。==把要插入的元素放到页面元素的上一个兄弟元素位置。==要插入的元素.prependTo(页面元素)==要插入的元素.appendTo(页面元素)
jQuery2
weixin_44247157的博客
03-25 653
1.设置元素内容 （1）获取设置元素内容 html() $("div").html("123"); （2） 获取设置元素文本内容 text() $("div").text("123"); （3）获取设置表单值 val() $("input").val("123"); 2.遍历元素 jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。 语法1： $("div").each(function ...
初学jQuery（2）：jQuery-DOM操作 + 动画效果 + 常用静态方法介绍 + jQuery插件介绍
lalala_dxf的博客
05-04 570
文章目录1、jQuery-DOM操作1.1 内容操作1.2 属性操作方法1.2.1 通用属性操作1.2.2 对class属性操作1.3 增删元素操作2、JQuery动画显示和隐藏元素动画3、jQurey静态方法数组及对象操作遍历测试方法字符串操作4、jQuery插件机制 1、jQuery-DOM操作 1.1 内容操作 有如下三个方法： html()方法：获取/设置元素的标签体内容（包括其子标签及其内容） text()方法：获取/设置元素的标签体纯文本内容(包括其子标签及其内容） val()方法：获取/.
JS中的jQuery2
weixin_66107774的博客
01-03 133
属性操作 1.删除属性$(selector).removeAttr(name) ; 2.获取和设置属性 获取属性：$(selector).attr([name]) ; 设置属性： （1）设置单个属性$(selector).attr(name：value) ; （2）设置多个属性的值$(selector).attr({[name1:value1]…[nameN:valueN]}) ; 用法：$(select).prop(\"属性\") 一般用在表单元素的默认值确认； 如果属性存在，返回
jQuery基础.pptx
05-20
2、jQuery优势 目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。 很多大公司都在使用 jQuery， 例如: Google Microsoft IBM Netflix 3、jQuery安装 “jquery-1.10.2....
jQuery实用基础超详细介绍
10-27
### 一、jQuery 简介 jQuery 提供了一套简单易用的 API，使得开发者可以更加高效地操作网页中的元素。它的主要特点包括： 1. **强大的选择器**：jQuery 支持 CSS1 至 CSS3 的选择器，可以方便地定位到网页中的特定...
jQuery 简介
12-13
jQuery 简介 jQuery 库可以通过一行简单的标记被添加到网页中。 您需要具备的基础知识 在您开始学习 jQuery 之前，您应该对以下知识有基本的了解： HTML CSS JavaScript 如果您需要首先学习这些科目，请在我们的 ...
jquery-2.2.4
02-18
jquery-2.2.4库，这里下载省得去官网找得那么辛苦
jquery-2.1.3.js
04-29
jquery-2.1.3.js
jquery-2.1.1.js
12-27
web前端技术，用于网页的开发技术，jquery技术在网页方面比较实用，一般的jsp，HTML网页中都能看的jquery的身影
jquery-2.2.2.min.js
03-30
jquery-2.2.2.min.js，not support Internet Explorer 6, 7, or 8
jQuery基础入门
03-21
内容简介 1.jQuery的由来及简介 2.jQuery对象和DOM对象 3.jQuery选择器 4.jQuery中的DOM操作 5.使用jQuery创建动画效果
jQuery停止动画排队
前端开发-陈善强
12-09 285
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。 停止动画排队的方法为：stop() ; stop() 方法用于停止动画或效果。 stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。 总结: 每次使用动画之前，先调用 stop() ,在调用动画。 $(function() { // 鼠标经过 // $(...
jQuery 2
weixin_66108666的博客
01-12 88
笔记
jquery 2.2最新版
11-09
jquery 2.2最新版，新增了很多功能，开发者的福音。快来下载。
五、JavaScript-jQuery
08-04
在JavaScript-JQuery基础中，需要了解其语法和特点。其语法较为简单，其解释器被称为JavaScript引擎，可作为浏览器的一部分来使用。相对于其他编程语言，JavaScript-JQuery在语法上更加灵活，可以灵活存储不同类型的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值