jQuery

最新推荐文章于 2024-09-26 01:42:12 发布
最新推荐文章于 2024-09-26 01:42:12 发布
阅读量74 收藏
点赞数
分类专栏： jQuery 文章标签： jquery javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48019875/article/details/120350595
版权

目录

1、 jQuery概述

jQuery于2006年创建的一个轻量级的javascript库
对JavaScript做了轻量级的封装，简化了语法
jQuery理念：写得少，做得多
Dom与jQuery方法不同，不能相互调用

● https://jquery.com 官网
● http://hemin.cn/jq 中文api文档

2、 jQuery对象与DOM对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>	
		<script type="text/javascript">
			function test(){
				var div1=document.getElementById("text");
				//alert(div1);
				
				alert($('div1')); //Dom对象转为jquery对象
				
				var div2=$("#text");
				//alert(div2);
				
				alert(div2[0]);//jquery对象转为Dom对象
				alert(div2.get(0));
				
				/* var div1=document.getElementById("text");
				alert(div1.value);
				var div2=$("#text");
				alert(div2.val());
				区别：Dom实际表示网页中的标签
					jquery对象是一个数组对象
					将原生Dom包含里面，数组对象中封装了许多方法*/	
			}
		</script>
	</head>
	<body>
		<input type="text" id="text" value="sss" />
		<input type="button" onclick="test()" value="测试"/>
	</body>
</html>

3、 jQuery选择器

（1）基本选择器

#id
.class
element
复合选择器
‘*’ 通配选择器

（2）表单选择器

input
text
password
radio
button
submit
reset
image
checkbox
file
hidden

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			function test(){
				/* var s=$("#text");
				var s=$("input");
				var s=$(".teclass");
				var s=$(".teclass,input"); */
				var s=$("li:first");
				console.log(s.length);
			}
			
		</script>
	</head>
	<body>
		<input type="text" id="text" class="teclass"  />
		<input type="button" value="按钮" onclick="test()" />
		<ul>
			<li>111</li>
			<li>222</li>
		</ul>
	</body>
</html>

在这里插入图片描述

4、jQuery操作

（1）html属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			function test(){
				//val() 获得第一个匹配标签的value属性值
				//val(v)设置所有匹配的标签的value属性值
			//$("#textid1").val($("#textid2").val());
			//$("input").val("www");
			
			//console.log($("input").attr("name"));
			
			//$(":checkbox").attr("checked",true);
			//$(":checked").attr("checked",true);
			//$(":checked").attr("checked",false);
			$(":checked").removeAttr("checked",false);
			}
		</script>
	</head>
	<body>
		<input type="text" id="textid1" name="www"/>
		<input type="text" id="textid2" />
		<input type="button" onclick="test()" value="按钮" />
		<input type="checkbox" checked="checked"  />
		<input type="checkbox"  />
		<input type="checkbox"  />
	</body>
</html>

（2）css属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			function test(){
			//console.log($("#div1").css("background-color"));
			//$("#div1").css("background-color","blue");
			//$("#div1").css({"background-color":"pink","width":"100px","height":"100px"});
			//$("#div1").addClass("divcss");
			//$("#div1").removeClass("divcss");
			$("#div1").toggleClass("divcss");
			}
		</script>
		<style type="text/css">
			.divcss{
				background-color: lightpink;
				width: 120px;
				height: 120px;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<div id="div1"   >
			div
		</div>
		<input type="button" onclick="test()" value="按钮" />
	
	</body>
</html>

(3) 文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			function test(){
				//console.log($("#div1").html()); 获得html内容
				//console.log($("#div1").text()); 获得文本内容 ，不能解析标签
				//$("#div1").text("<b>div1</b>");
				$("#div1").html("<b>div1</b>");
				//$("#div1").append("sss"); 在标签末尾追加html内容
				//$("#div1").before("sss"); 标签前面增加内容
			//	$("#div1").after("sss");标签后面增加内容
				//$("#div1").appendTo("#div2");标签加入另一个标签中
				//$("#div1").remove(); 删除标签
				//$("#div1").empty(); //标签为空
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<b>
				div1
			</b>
		</div>
		<div id="div2">
			<b>
				div2
			</b>
		</div>
		<input type="button" onclick="test()" value="按钮" />
		
	</body>
</html>

5、筛选-祖先、后代、同胞、过滤、判断

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			function test(){
			//var obj=$("#div1").parent(); //直接父类
			//var obj=$("#div1").parents();  //所有父类
			//var obj=$("#div1").parents("html"); //祖先中指定的父级标签
			//var obj=$("#div1").children();//子级
			//var obj=$("#div1").children("p");
			//var obj=$("#div1").find("p"); //孙子
			//var obj=$("#div1"). siblings(); //同胞标签，上下所有兄弟标签
			//var obj=$("#div1"). siblings("p"); 
			//var obj=$("#div1").next();
			//var obj=$("#div1").nextAll();
			//var obj=$("#div1").prev()();
			//var obj=$("#div1").prevAll();
			//var obj=$("#div1").first();
			//var obj=$("#div1").last();
			//var obj=$("p").eq(2);
			//var obj=$("p"). filter(".ii");
			var obj=$("p"). not($(".ii")[0]);
			console.log(obj.text());
			console.log($("#div1").parent().is("p"));//false
			}
		</script>
	</head>
	<body>
		<p>同胞标签</p>
		<p class="ii">同胞相邻标签上</p>
		<div id="div1">
			<p> 
			<b>div1</b>
			</p>
			
			<b> div2</b>
		</div>
		<p>同胞相邻标签下</p>
		<p>同胞标签</p>
		<input type="button" onclick="test()" value="按钮" />
	
	</body>
</html>

6、jQuery事件-ready事件、绑定事件、合成事件、其他常用事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
		/* 为标签动态添加事件，以及事件处理函数，事件切换 */
			$(function(){
				/* $("#btn1").click(function(){
					alert("事件响应"); //绑定事件
				}) */
				
				//hover(over,out) over移入触发的函数，out是移出触发的函数 合成事件
				//鼠标移入一个匹配的标签上面时，会触发指定的第一个函数，鼠标移出这个标签时，会触发指定的第二个函数
				$("#div1").hover(
				function(){
					 $(this).css("background-color","blue");
				},
				function(){
					 $(this).css("background-color","red");
				}
				);
			//事件切换 toggle(fn1,fn2...)
		 	$("#btn1").toggle(
			function(){
				 $(this).css("background-color","blue");
			},
			function(){
				 $(this).css("background-color","red");
			},
			function(){
				 $(this).css("background-color","green");
			}
			); 	
			
			//一次性事件
			/* $("#btn1").one("click",function(){
				alert($(this).val());
			});	 */
				
			$("input[type='button']").click(function(){
				alert();
			});
			//当浏览器大小改变时触发
			$(window).resize(function(){
				console.log(window.innerHeight+"::"+window.innerWidth);
			});
			//on() 方法绑定事件处理程序到当前选定的jQuery对象中的元素
			$("#btn1").on("click", function(){
			alert( $(this).text() );
			})
			})
		</script>
	</head>
	<body>
		<input type="button" value="按钮" id="btn1" />
		<input type="button" value="按钮"  />
		<input type="button" value="按钮"  />
		<div id="div1">div</div>
	</body>
</html>
高朵
关注
专栏目录
jQuery选择器
m0_57774967的博客
06-16 4708
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器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的引用
zwjl1017的博客
04-01 4077
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery基础
luckyboy!的博客
11-16 3470
jQuery由美国人John Resig于2006年创建。jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more。
jQuery 遍历对象
m0_67458498的博客
03-28 4266
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery移除标签
qq_35086941的博客
04-28 3740
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function
jquery在线引用
jiufu_的博客
07-15 5098
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery的下载及安装
weixin_64812436的博客
10-17 5358
1、下载地址：https://jquery.com/，点击Download jQuery下载 2、继续点击如下图所示 3、点击后会出现如图所示清况，先Ctrl+A全选，再Ctrl+C复制 4、在 vs code 新建js文件，名字自己取，我取的是jquery.js 5、使用时，用script标签导入jquery.js文件，即可正常调用jquery里面的方法
jQuery-3.4.1下载
cheng1a的博客
02-11 5498
jQuery-3.4.1下载 链接：https://pan.baidu.com/s/1Z1mjG00jzSzXEmXNtvFT8g 提取码：0430
jQuery引入方式
m0_67388537的博客
07-07 3273
jQuery的两种引入方式
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码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 或更高版本上运行。 ...
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-...
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
如何搭建Vue脚手架
最新发布
w6437286的博客
09-26 442
本文主要讲解如何搭建vue脚手架。
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 902
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
vue上传预览CAD文件
只会写bug
09-24 592
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 238
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值