jQuery

最新推荐文章于 2024-07-09 23:44:56 发布
最新推荐文章于 2024-07-09 23:44:56 发布
阅读量33 收藏 1
点赞数 2
分类专栏： javascript 文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47746614/article/details/132515075
版权

jQuery

jQuery

1、jQuery是一个JavaScript框架（库），简化JavaScript程序。

2、jQuery有两个主流版本，一个1.x，大多数基于jQuery的框架使用的是1.x版本；另外就是官网最新版本3.x

3、下载地址（1.12.4）：https://blog.jquery.com/2016/05/

4、引用js

  • 页面中引用js
<script src="./js/jquery-1.12.4.min.js"></script>
  • 利用CDN方式引入
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"> </script>

标签选择器

  • #id 选择器

  • .class 选择

  • 标签名选择

  • $(“p:first”) 选择第一个标签

  • $(“a[target=‘_blank’]”) 选择指定属性值的标签

  • $(“tr:even”) 选择偶数tr

  • $(“tr:odd”) 选择奇数tr

$('.box').text('这个jquery修改的内容') 
// debugger 

$('.box').html('<p>p标签</p>') 
$('.box').css('width', '100px') 
$('.box').css('height', '100px') 
$('.box').css('border', '1px solid red')
let obj = $('#btn1'); 
// jquery对象转原生js对象 
obj.get(0).value='按钮' 
// 原生js对象转jquery对象
$(document.getElementById('btn1')).val('重新设置按钮名字')
// 添加事件 
$('#btn1').click(()=>{ 
    alert()
})
$("span:first").css('color', 'blue')

$("a[target='_blank']").attr('href', 'http://www.baidu.com') 

$("tr:even").css('color', 'red')

$("tr:odd").css('color', 'blue')

  • $(“li:last”) 获取最后一个标签

  • $(“li:eq(index)”) 根据下标获取标签

原生js和jQuery 相互转换

1、jQuery转换为原生js：$(“选择器”).get(下标)

2、原生js转换为jQuery：$(DOM对象)

事件

对象.事件名（）

$('#btn1').click(() => { 

alert() 

})

页面加载完成（初始化）事件

$(document).ready(() => { 

		console.log("页面加载完成"); 

})

动画效果

隐藏显示

  • 对象.hide() 隐藏标签

  • 对象.show() 显示标签

  • 对象.toggle() 隐藏显示相互切换

淡入淡出

  • 对象.fadeOut() 淡出效果，参数为毫秒数
  • 对象.fadeIn() 淡入效果
  • 对象.fadeToggle() 淡入淡出相互切换

上滑（收起）下滑（展示）

  • 对象.slidUp() 上滑（收起）

  • 对象.slidDown() 下滑（展开）

  • 对象.slidToggle() 上下滑切换

自定义动画

对象.onimate({ })

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jq 动画效果</title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: relative;
			}
		</style>
	</head>
	<body>
		<input type="button" value="隐藏/显示" id="btn1">
		<input type="button" value="淡入/淡出" id="btn2">
		<input type="button" value="展开/收起" id="btn3">
		<input type="button" value="动画" id="btn4">
		<div class="box1">
			
		</div>
		
		<script src="./js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			
			let isShow = true   //true 显示； false  隐藏
			// 隐藏和显示div
			$('#btn1').click(() => {
				// if(isShow){
				// 	$('.box1').hide() //隐藏标签（display:none）
				// 	isShow = false
				// }else{
				// 	$('.box1').show() //显示标签
				// 	isShow = true
				// }
				$('.box1').toggle() //显示和隐藏之间切换
			})
			
			// 淡入，淡出
			$('#btn2').click(() => {
				// $('.box1').fadeOut()  //淡出，参数还可以设置时间（毫秒）
				// $('.box1').fadeIn()   //淡入
				$('.box1').fadeToggle()   //淡入、淡出切换
			})
			
			// 下滑，下滑
			$('#btn3').click(() => {
				// $('.box1').slideUp()  //上滑收起
				// $('.box1').slideDown()  //下滑展开
				$('.box1').slideToggle()  //两种状态切换
			})
			
			// 自定义动画
			$('#btn4').click(() => {
				$('.box1').animate({
					width:'200px',
					height:'200px',
					left:'500px',
					top:'500px',
				})
			})
			
			
		</script>
	</body>
</html>

DOM

  • text() 读取或设置文本（innerText）
  • html() 读取或设置HTML（innerHTML）
  • val() 读取或设置表单标签的value
  • attr() 读取或设置标签的属性
  • css() 读取或设置样式（style.xxx）
  • addClass() 给标签添加class (className )
  • removeClass() 删除标签的class
  • toggleClass() 对class的添加，删除之间切换
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jq操作DOM内容和样式</title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
			.active{
				background-color: red;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<input type="text" id="txt1">
		<input type="button" value="新增文本" id="btn1">
		<input type="button" value="新增html" id="btn2">
		<input type="button" value="修改div样式" id="btn4">
		<input type="button" value="修改class" id="btn5">
		<div class="box1 active">
			
		</div>
		<input type="button" value="修改图片的src" id="btn3">
		<br>
		<img src="./img/boy.jpg" id="img1">
		
		<script src="./js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			// 修改text
			$('#btn1').click(() => {
				let txt = $('#txt1').val()  //读input的值
				$('.box1').text(txt)  //写div的innerText
			})
			
			// 修改html
			$('#btn2').click(() => {
				$('.box1').html('<a href="http://www.baidu.com">baidu</a>')
			})
			
			// 修改属性
			$('#btn3').click(() => {
				// 第一个参数属性名， 第二个参数属性值
				$('#img1').attr('src', './img/girl.jpg')
			})
			
			// 修改样式
			$('#btn4').click(() => {
				// 修改样式，第一个参数样式名，跟css样式名相同，不需要驼峰命名；
				// 第二个参数样式的值
				$('.box1').css('border-color', 'blue')
			})
			
			// 新增或删除class
			$('#btn5').click(() => {
				// $('.box1').addClass('active') //新增一个class
				// $('.box1').removeClass('active')  //删除一个class
				$('.box1').toggleClass('active')  //增加和删除两种状态之间切换
			})
			
		</script>
	</body>
</html>

  • append() 在当前标签的子标签末尾添加标签

  • prepend() 在当前标签的子标签前面插入标签

  • after() 在当前标签后面添加标签

  • before() 在当前标签前面插入标签

  • remove() 删除当前标签（包括子标签）

  • empty() 删除当前标签的所有子标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery 增加删除标签</title>
		<style type="text/css">
			.box1{
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<input type="button" value="append/prepend" id="btn1">
		<input type="button" value="after/before" id="btn2">
		<input type="button" value="remove" id="btn3">
		<input type="button" value="empty" id="btn4">
		<div class="box1">
			<p>第一个</p>
			
			<p>第二个</p>
			
			<p>第三个</p>
		</div>
		
		
		<script src="./js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$('#btn1').click(() => {
				$('.box1').append('<p>append</p>')  //在子标签的末尾插入
				$('.box1').prepend('<p>prepend</p>') //在子标签的前面插入
			})
			
			$('#btn2').click(() => {
				// 选择.box1下面下标为1（第二个）的p标签
				$('.box1 p:eq(1)').after('<span>after</span>')   //在当前标签后面插入标签
				$('.box1 p:eq(1)').before('<span>before</span>')  //在当前标签前面插入标签
			})
			
			$('#btn3').click(() => {
				$('.box1 p:last').remove()    //删除当前标签
			})
			
			$('#btn4').click(() => {
				$('.box1').empty()  //删除所有子标签
			})
		</script>
	</body>
</html>

练习：

读取表单内容，打印在控制台

给表单赋值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>读取表单内容，打印到控制台</title>
		<style type="text/css">
					form{
						width: 500px;
						height: 500px;
						margin: auto;
					}
				</style>
	</head>
	<body>
		<form action="" method="post">
					姓名:<input type="text" name="username">
					<br>
					籍贯:<select name="userNativePlace">
						<option value="">请选择</option>
						<option value="云南">云南</option>
						<option value="重庆">重庆</option>
						<option value="四川">四川</option>
					</select>
					<br>
					性别:<input type="radio" name="userSex" value="男">男
					     <input type="radio" name="userSex" value="女">女
					<br>
					爱好:<input type="checkbox" name="hobby" value="唱歌">唱歌
					     <input type="checkbox" name="hobby" value="跳舞">跳舞
						 <input type="checkbox" name="hobby" value="打球" checked>打球
					<br>
					<input type="button" value="提交" id="btn">
					<!-- 
						姓名：张三
						籍贯：四川
						性别：男
						爱好：唱歌，打球
					 -->
					<input type="button" value="赋值" id="btn2">
				</form>
		<script src="./js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			// 读取表单的值
			$('#btn').click(() => {
				console.log($('input[name="username"]').val()); 
				console.log($('select[name="userNativePlace"]').val());
				console.log($('input[name="userSex"]:checked').val())
				// 复选框
				let cbs = $('input[name="hobby"]:checked')
				// each方法的第一个参数是序号，第二参数当前循环的对象（是原生的js对象）
				cbs.each((index, current) => {
					console.log($(current).val());
				})
				 
				let hobby = $('input[name="hobby"]:checked').map((index, current) => {
					 return $(current).val()
				 }).get().join(",")
				 console.log(hobby);
				 // let arr = result.get()
				 // let str = arr.join(",")
				 
			})
			
			// 表单赋值
			$('#btn2').click(() => {
				$('input[name="username"]').val('张三')
				$('select[name="userNativePlace"]').val('四川')
				$('input[value="男"]').prop('checked','checked')
				// $('input[name="userSex"]').each((index, current) => {
				// 	if('男' == $(current).val()){
				// 		$(current).prop('checked','checked')
				// 	}
				// })
				$('input[name="hobby"]').each((index, current) => {
					$(current).removeProp('checked')
					if($(current).val() == '唱歌' || $(current).val() == '打球'){
						$(current).prop('checked', 'checked')
					}
				})
			})
			
		</script>
	</body>
</html>

遍历

  • parent() 父标签

  • children() 所有子标签，参数还可以设置选择器

  • next() 下一个兄弟

  • prev() 前一个兄弟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标签遍历</title>
		<style type="text/css">
					#outbox {
						width: 400px;
						height: 400px;
						border:1px solid red;
						margin:auto;
					}
					#midbox{
						width: 300px;
						height: 300px;
						border:1px solid blue;
						margin:auto;
						margin-top:50px;
					} 
					#bottombox{
						width: 200px;
						height: 200px;
						border:1px solid green;
						margin:auto;
						margin-top:50px;
						text-align:center
					}
				</style>
	</head>
	<body>
		<div id="outbox">
			<div id="midbox">
				<div id="bottombox">
					<p>第一个p标签</p>
					<p id="midp">第二个p标签</p>
					<p>第三个p标签</p>
				</div>
				<div id="tottombox2">
					
				</div>
			</div>
		</div>
		
		<script src="./js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			console.log($('#midbox').parent());  //返回父标签
			console.log($('#midbox').children()); //返回所有子标签
			console.log($('#midbox').children('#bottombox'));  //children()参数可以用选择器
			console.log($('#midbox').children().eq(0));  //用eq加序号进一步选择
			console.log($('#midbox').children().first());  //第一个子标签
			console.log($('#midbox').children().last());  //最后一个子标签
			console.log($('#midp').next()); //下一个兄弟
			console.log($('#midp').prev()); //前一个兄弟
		</script>
	</body>
</html>

Ajax介绍

Ajax概述

1、Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点：

  • 与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
  • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

Ajax作用

我们详细的解释一下Ajax技术的2个作用

  • 与服务器进行数据交互

    如下图所示前端资源被浏览器解析，但是前端页面上缺少数据，前端可以通过Ajax技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过我们学习的vue技术，可以将数据展示到页面上，这样用户就能看到完整的页面了。此处可以对比JavaSE中的网络编程技术来理解。

在这里插入图片描述

  • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

    如下图所示，当我们再百度搜索java时，下面的联想数据是通过Ajax请求从后台服务器得到的，在整个过程中，我们的Ajax请求不会导致整个百度页面的重新加载，并且只针对搜索栏这局部模块的数据进行了数据的更新，不会对整个页面的其他地方进行数据的更新，这样就大大提升了页面的加载速度，用户体验高。

在这里插入图片描述

同步异步

针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的，与之对应的有同步请求。接下来我们介绍一下异步请求和同步请求的区别。

  • 同步请求发送过程如下图所示：

在这里插入图片描述

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。

  • 异步请求发送过程如下图所示：

在这里插入图片描述

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

jQuery的AJAX请求

get()

第一个参数是请求的url;

第二个参数是请求成功的回调函数，后台返回的数据在形参result里

$.get('test.json', (result) => { 

})

post()

第一个参数是请求的url

第二个参数是提交的数据

第三个参数是回调函数

$.post('test.json',
       { name:'张三' },
       (ret) => {
   		 debugger
})

ajax()

ajax()是一个综合方法，它可以实现上面的get或post请求

$.ajax({
    url:'test.json', type:'get', 
    //get或post， 不区分大小 
    dataType:'JSON' ,
    //后台返回的数据格式，不区分大小写 
    data:{ 
        //提交的数据，如果没有数据提交，data参数可以省略 
        name:'张三' 
    },
    success: (ret) => {
        //后台执行成功的回调函数， complete回调无论成功或失败都会执行 
        debugger 
    } 
})
qq_47746614
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JQuery的引用
zwjl1017的博客
04-01 4004
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery基础
luckyboy!的博客
11-16 3371
jQuery由美国人John Resig于2006年创建。jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more。
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
WHAT - NextJS 的路由系统和 react-router-dom
weixin_58540586的博客
07-04 938
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
Javafx利用fxml变换场景的小细节
最新发布
2301_80311013的博客
07-09 527
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
Haproxy搭建Web群集
wkysdhr的博客
07-08 714
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。
Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕
weixin_41346436的博客
07-04 159
在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。
JS混淆基本类型和原理
朴拙科技的博客
07-06 564
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
​​ 翻页 上一页/下一页
szzlh123456789的博客
07-09 102
【代码】​​ 翻页 上一页/下一页。
音乐播放器
m0_73755059的博客
07-05 581
【代码】音乐播放器。
图片压缩代码和实际操作页面
英雄汉孑的博客
07-05 973
轻盈视界，高清依旧 —— 智能图片压缩，大容量，小体积，精彩不打折
触感网络：WebKit 振动（Vibration API）的交互新维度
2401_85812053的博客
07-07 928
WebKit 对振动 API 的支持为 Web 应用提供了一种新的交互方式，允许开发者通过触觉反馈增强用户体验。通过本文的详细解析和代码示例，你现在应该对如何在 WebKit 驱动的浏览器中使用振动 API 有了深入的理解。掌握振动 API 的使用，将使你能够构建更加丰富和互动的 Web 应用。无论是提供操作确认、模拟真实世界的触感还是增强用户交互，振动 API 都能够提升应用的质量和可用性。随着 Web 技术的不断发展，振动 API 及其在 WebKit 中的支持也在不断进化，未来将提供更多创新和优化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值