JS学习日记--jQuery(2)

最新推荐文章于 2022-09-18 19:39:09 发布
最新推荐文章于 2022-09-18 19:39:09 发布
阅读量196 收藏
点赞数
分类专栏： JS学习日记 文章标签： jquery javascript js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42149770/article/details/104225766
版权

六、jQuery-Ajax

(1)jQuery中发送ajax请求

jQuery中发送ajax请求简直是，轻松方便，直接上代码把

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax</title>
		<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8">
			
			
			
		</script>
		<script type="text/javascript">
			//发送ajax请求文件并输出内容
			window.onload=function(){
				
				$.ajax({
					type:'get',
					url:'./person.json',
					//如果发送请求的时候想带一个参数
					data:{
						name:'黄忠'
					},//会自动将data连接到url上
					success:function(resp){
						alert(resp.hobby);
					},
					error:function(){
						
					}
				})
			}
		</script>
	</head>
	<body>
	</body>
</html>

data中的数据会跟在url后面 就像这样：
在这里插入图片描述
上图中json？name后跟的就是，咱们给他解码成汉字，也确实是黄忠

(2).jQuery的回调地狱解决

有一个done函数和fail函数，分别跟promise的then与catch差不多，用法应该也是一样的，具体可以看我上一篇写ajax的，注一个小例子：

	$.ajax({url:'./api1'}).done(function(){
					return $.ajax({url:'./api2'})
				}).done(function(){
					return $.ajax({url:'./api3'})
				}).done(function(){
					console.log("调用结束")
				})

【注】：如果方法是get可以省略不写

七、jQuery事件

jQuery事件比较简单，直接看代码就可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jsonp</title>
		<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		window.onload=function(){
			
			// $('li').on('mouseover',function(){
			// 	$(this).css('background','red');
			// }).on('mouseout',function(){
			// 	$(this).css('background','green');
			// })
			// //off(事件名称，回调函数)
			// $('li:eq(3)').off('mouseover');
			// $('<li>new</li>').appendTo('ul');
			//上面新添加的li不会被绑定事件
			
			/*********jQuery中的事件代理**********/
			$('ul').on('mouseover','li:even',function(){
				$(this).css('background','red');
			}).on('mouseout','li:even',function(){
				$(this).css('background','green');
			})
			$('<li>new</li>').appendTo('ul');
			//这样就可以使新添加的li也有事件
		}
	</script>
	
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</body>
</html>

八、节点操作

  1. 节点的创建
    【方法】：$(代表元素的片段)，如：$(’<p>新元素</p>’)
  2. 节点的删除
    【方法1】$().remove()
    【作用】：删除节点
    【方法2】：empty()
    【作用】：删除节点里的内容，不删除节点本身
  3. 把节点加到dom树上
  • 插入指定元素孩子节点末尾
    【方法1】：append（）
    【用法】：$(选中元素).append(插入内容)
    【方法2】：appendTo（）
    【用法】：$(插入内容).appendTo(选中元素)
    【作用】：在被选元素的结尾插入指定内容
  • 插入指定元素孩子节点开头
    【方法1】：prepend()
    【方法2】：prependTo()
  • 插入选定元素之后
    【方法1】：after()
    【方法2】：insertafter()
    测试代码：
节点<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jiedian</title>
	<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		window.onload=function(){
			var $el=$('<div><h1>新的</h1></div>');
			 //$('body').append($el);
			 $el.appendTo('body')
			 var $newFirst=$('<li>0</li>')
			 //$('ul').propend($newFirst);
			 $newFirst.prependTo('ul');
			 $('li:eq(3)').after('<li>3.5</li>');
			 $('<li>4.5</li>').insertAfter('li:eq(5)');
			 
			 $('button').click(function(){
				//$('li:last').remove();
				$('li:last').empty();
			 })
			 
		}
	</script>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<button type="button">删除</button>
	</body>
</html>

九、在jQuery中自定义插件

在开发时有很多时候代码是需要重复利用的，这时候把他做成jQuery插件用起来就非常方便，
四个要注意的点

  1. jQuery插件,定义在jQuery.fn的基础上的
  2. 要解决命名冲突，即在$符被其他库占用的时候，如何顺利的定义自己的插件而不受影响
  3. 使用循环来遍历的处理每一个元素，才能使每一个事件都能被绑定到，前面也说了jQuery其实是一个伪数组
  4. 为了链式调用，要在函数中，将jQuery返回(this)

【实例】：选取到页面上的某些元素，并且将这些元素的背景色设置为随机色，具体的应用都注释到代码里了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插件</title>
		<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		window.onload=function(){
			
		(function($){
			
			//2.使用一个立即执行函数来解决命名冲突，即使$被占用，但是在这个函数里$仍然指向jquery
			$.fn.extend({//1.在fn定义
			
				randomColor:function(){
					
					function random(){//随机颜色
						var r=Math.floor(Math.random()*256);
						var g=Math.floor(Math.random()*256);
						var b=Math.floor(Math.random()*256);
						
						return 'rgb('+r+','+g+','+b+')';
					}
					this.each(function(index){
						
						//this 此时的this指向的是jQuery中的每一个元素
						$(this).css({
						backgroundColor:random()
						
						})
					
					
					})
					  
					return this;//this指向的就是我们通过选择器选择到的所有元素组成的伪数组，即jQuery对象
					
				}
				
			})
			
		})(jQuery);
	$('div').randomColor();	
		
		
		}
		
	</script>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			background-color: #000000;
		}
	</style>
	</head>
	<body>
		<div >
			
		</div>
		<div >
			
		</div>
	</body>
</html>

写出来发现获取不到div元素整个人都蒙了，思考了半天发现是没有写window.onload…哇

十、实例，放大镜插件

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

		</style>
		<link rel="stylesheet" type="text/css" href="jQuery.magnifier.css"/>
		<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="./jQuery.magnifier.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){

				
				$('.magnifier').magnifier();
			}
		</script>
		
		
	</head>
	<body>
	<div id=""class="magnifier">
		<div class="left">
			<img src="../img/img%20(1).jpg" >
			<div class="float"></div>
			<div class="mask"></div>
		</div>
		<div class="right">
			
		</div>
	</div>	
	</body>
</html>

css：

			.magnifier .left{
				width: 250px;
				height: 190px;
				float: left;
			}
			
			.magnifier .left img{
				width: 250px;
				height: 190px;
			}
			
			.magnifier .left .mask{
				width: 250px;
				height: 190px;
				position: absolute;
				left: 0;
				top: 0;
				background-color: #000000;
				opacity: 0;
				
			}
			
			.magnifier .float{
				width: 50px;
				height: 50px;
				background: hotpink;
				opacity: 0.5;
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}
			.magnifier .right{
				width: 200px;
				height: 200px;
				background-image: url('../img/img%20(1).jpg');
				float:left;
		
				margin-left:50px ;
				display: none;
			}

jquery插件：

				(function($){
					$.fn.extend({
						magnifier:function(){
								this.each(function(){
									var that=this;
									$('.left',this).mousemove(function(evt){
										var x=evt.offsetX;
										var y=evt.offsetY;
										var float=$('.float',this);
										x=x-float.width()/2;
										y=y-float.height()/2;
										if(x<0){
											x=0;
										}
										if(y<0){
											y=0;
										}
										if(x>$(this).width()-float.width()){
											x=$(this).width()-float.width()
										}
										if(y>$(this).height()-float.height()){
											y=$(this).height()-float.height()
										}
										float.css({
											left:x,
											top:y
										});
										$('.right',that).css({
											
											backgroundPosition:x*-4+'px '+y*-4+'px'
										}
										)
									}).mouseover(function(){
										$('.left .float, .right',that).show();
									}).mouseout(function(){
										$('.left .float, .right',that).hide();
									})
								})
						}
					})
				})(jQuery)
风华正茂呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery基本介绍
perfectmatch_G的博客
04-12 515
1.jQuery简单入门 jQuery是一个丰富的JavaScript库，库中封装了js中的一些常用方法 作用：wirte less，do more 开发步骤： 导入js库 js对象转换成jQuery对象 var jsDiv = document.getElementById("id01"); $(jsDiv) 可以通过jQuery对象调用一些方法 <html> <head...
jQuery第三天
m0_59708269的博客
05-14 139
一.工具方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>09_$工具方法</title> </head> <body> <!-- 1. $.each(): 遍历数组或对象中的数据 2. $.trim(): 去除字符串两边的空格 3. $.type(obj): 得到数据的类型 4. $.isArray(obj): 判断是否是
jquery基本语法使用、总结笔记
qq_43707633的博客
02-16 230
初识jQuery jQuery简介 什么是jQuery？ jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more. 常见的javascript库? Prototype:是最早成型的...
Jquery学习记录
dkz97的博客
12-12 161
基本目录 1.Jquery基本入门 1. 概念 2. 快速入门 3. JQuery对象和JS对象区别与转换 4. 选择器 5. DOM操作 概念: 是一个javaScript的框架，用于简化JS开发的 主要优化html文档操作，事务处理，动画设计和ajax交互 快速入门 Js对象和JQuery对象的区别和相互转换 1.JQuery对象由于是框架封装了不少东西，使用起来会更加的方便 2.J...
jQuery中获取下拉菜单的值
weixin_43727538的博客
04-06 2364
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></s...
jquery-1.11.3.js.zip
04-25
《jQuery 1.11.3 的深度解析与应用》 在Web开发领域，jQuery库以其易用性和强大的功能，成为无数...在学习和使用过程中，应充分利用jQuery的链式调用、选择器和事件处理等特性，以实现更加高效和优雅的代码编写。
小熊日记-bootstrap响应式网页
最新发布
06-24
在实际的"小熊日记"项目中，开发者可能还使用了JavaScript和jQuery来添加交互性，比如通过JavaScript事件监听和处理函数，实现点击按钮后显示或隐藏内容，或者实现滚动加载等动态效果。此外，为了优化用户体验，可能...
js-journal:使用jQuery进行基本的DOM操作和表单处理
05-07
通过学习和熟练运用jQuery，开发者可以构建出交互性更强、用户体验更佳的客户端日记应用。无论是在创建新的日记条目、搜索已有条目，还是在处理用户与界面的交互，jQuery都能提供强大且灵活的支持。
javascript和jquery学习笔记
11-30
javascript和jquery的学习笔记，自己做的大家可以下载浏览，很不错
jquery-学习日记2-细节注意点input文本款blur和change的顺序事件
wex的专栏
02-19 2928
不知道其他人有没有遇到过这种问题，今天学习jquery事件的时候，测试代码写了如下的代码   $(":text").focus(function(){   $(":text").css("background","yellow");   });   $(":text").blur(function(){   $(":text").css("background","white");  
HTML基础（一）
牢骚太盛防肠断，风物长宜放眼量
05-17 7309
本文是作者在学习html过程中对知识的初步整理 1.第一个程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个HTML页面</title> </head> <body> hello HTML,I am shuaigeliu </body> </html> htm.
Html+css出现问题集合
qq_35779070的博客
02-12 2230
Html+css出现问题集合 1.怎么写进度条 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ /* text-align: center...
★静态html页面报错或者不输出内容问题
雨婷丶落星
12-06 2099
<!DOCTYPE html>报错或者不输出内容问题 Error in event handler for runtime.onMessage: TypeError: Cannot read property 'join' of undefined 遇到上面截图的情况，因为做的是一个系统维护页面，只是在body里引用了背景图片，但是项目里提示<!DOCTYPE html&gt.........
web---HTML基础知识
Allure泽宇的博客
06-11 5520
HTML基础知识内容总结
Spring boot验证码前后端验证
怪只怪满眼尽是人间烟火
07-18 487
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="jquery3.3.1.js"></script> <script type="text/j...
javaweb之登录页面的验证码操作，从前端的更换验证码到后端的验证码验证是否正确（内附原代码）
逆水行舟，不进则退
01-04 4989
 这里一共有四个程序，注释都写在了代码里，逻辑很清晰 首先是一个JSP页面 &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;
springboot防止表单重复提交_防止数据重复提交的6种方法(超简单)！
weixin_39917894的博客
12-14 6923
如何在JAVA中，用最简单的方式，防止数据重复提交？WOW，that is a good question !下面是才艺展示(装X)时间。模拟用户场景我们首先模拟下用户场景，大致是这样的，如下图所示：大致后端的接口代码实现如下：importorg.springframework.web.bind.annotation.RequestMapping;importorg.springfr...
后端接口返回图形验证码数据流，前端应如何渲染展示
weixin_45092437的博客
09-18 7545
我们不能直接将图片数据流展示到页面上，所以我们需要想办法让图片验证码正常的展示在页面中。此处我列举两种办法：通过img标签的src去请求接口、通过原生ajax进行数据流转换。
【AJAX】通过fetch拿到数据
...
02-26 340
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
Java初学者校外实训日记：Day01，Java基础与实战概览
同时，课程也涵盖了Web前端技术，如HTML5、CSS、JavaScript和jQuery等，以及数据库编程，如Oracle和MySQL，以及通过JDBC进行数据交互。 Java Web编程部分，学生会学习Selenium、Servlet、JSP（Java Server Pages）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值