JQuery_01

最新推荐文章于 2022-04-11 23:00:51 发布
原创 最新推荐文章于 2022-04-11 23:00:51 发布 · 98 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

JQ的开发步骤：（将我们页面的JS代码和HTML页面代码进行分离）

1.导入JQ相关的文件

2.文档加载完成事件：$(function)：页面初始化的操作：绑定事件，启动页面定时器

3.确定相关操作的事件

4.事件触发函数

5.函数里面再去操作相关的元素

JQ中的动画效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				//显示图片
				$("#btn1").click(function(){
					//获得img
					//$("#img1").show();
					//$("#img1").slideDown();
					$("#img1").animate({width:"1000px",opacity:"1"},5000);
				});
				
				
				//隐藏页面图片
				$("#btn2").click(function(){
					//获得img
					//$("#img1").hide(500);
					//$("#img1").slideUp(500);
					$("#img1").animate({width:"1366px",opacity:"0.2"},5000); 
				});
			});
		</script>
		
	</head>
	<body>
		<input type="button" value="显示" id="btn1"/><br />
		<input type="button" value="隐藏" id="btn2"/><br />
		<img src="../../img/1.jpg" / id="img1" width="500px">
	</body>
</html>

JQ定时弹出广告：

1.导入JQ的文件

2.编写JQ的文档加载事件

3.启动定时器setTimeout("",3000);

4.编写显示广告的函数

5.在显示广告里面再启动一个定时器

6.编写隐藏广告的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			//显示广告
			function showAd(){
				$("#img1").show();
				setTimeout("hideAd()",3000);
			}
			
			//隐藏广告
			function hideAd(){
				$("#img1").hide();	
			}
			
			$(function(){
				setTimeout("showAd()",3000);
				
			});
		</script>
	</head>
	<body>
		<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" id="img1" width="100%" style="display: none;"/>
	</body>
</html>

JQuery中的选择器

基本选择器

ID选择器：#ID的名称

类选择器：以.开头 .类名

元素选择器：标签的名称

通配符选择器：*

选择器，选择器：选择器1，选择器2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../css/style.css" />
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<!--
			 
		-->
		<script>
			//文档加载事件,页面初始化的操作
			$(function(){
				//初始化操作：给按钮绑定事件
				$("#btn1").click(function(){
					$("#two").css("background-color","palegreen");
				});
				//找出mini类的所有元素
				$("#btn2").click(function(){
					$(".mini").css("background-color","palegreen");
				});
				$("#btn3").click(function(){
					$("div").css("background-color","palegreen");
				});
				$("#btn4").click(function(){
					$("*").css("background-color","palegreen");
				});
				//选择器分组
				$("#btn5").click(function(){
					$(".mini,span").css("background-color","palegreen");
				});
				
			});
		</script>
		
	</head>
	<body>
		<input type="button" value="找出ID为two的元素" id="btn1"/><br />
		<input type="button" value="找出mini类的所有元素" id="btn2"/><br />
		<input type="button" value="找出所有div元素" id="btn3"/><br />
		<input type="button" value="通配符选择器" id="btn4"/><br />
		<input type="button" value="找出mini类和 span元素" id="btn5"/><br />
		
		<div id="one">
			<div class="mini">1-1	</div>
		</div>
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>	
		</div>
		<div id="two">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>	
			<div class="mini">3-3</div>	
		</div>
		<span id="four">span</span>
	</body>
</html>

 层级选择器：

子元素选择器：选择器1>选择器2

后代选择器：选择器1 儿孙

相邻兄弟选择器：选择器1 + 选择器2：找出紧挨着的一个弟弟

找出所有弟弟：选择器1~选择器2：找出所有的弟弟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../css/style.css" />
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<!--
			 
		-->
		<script>
			//文档加载事件,页面初始化的操作
			$(function(){
				//初始化操作：给按钮绑定事件
				//找出body下面的子div
				$("#btn1").click(function(){
					$("body > div").css("background-color","palegreen");
				});
				//找出body下面的所有div
				$("#btn2").click(function(){
					$("body div").css("background-color","palegreen");
				});
				
				$("#btn3").click(function(){
					$("#one+div").css("background-color","palegreen");
				});
				$("#btn4").click(function(){
					$("#two~div").css("background-color","palegreen");
				});
				
				
			});
		</script>
		
	</head>
	<body>
		<input type="button" value="找出body下面的子div" id="btn1"/><br />
		<input type="button" value="找出body下面的所有div" id="btn2"/><br />
		<input type="button" value="找出id为one的相邻兄弟div" id="btn3"/><br />
		<input type="button" value="找出id为two的所有弟弟div" id="btn4"/><br />
		
		
		<div id="one">
			<div class="mini">1-1	</div>
		</div>
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>	
		</div>
		<div id="two">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>	
			<div class="mini">3-3</div>	
		</div>
		<span id="four">span</span>
	</body>
</html>

基本过滤器：

选择器：

first：找出的是第一个

:last

:even 找出索引为偶数

:odd 找出奇数索引

:gt(index):大于索引

:lt(index) 小于

:eq(index) 等于

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../css/style.css" />
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<!--
        	作者：offline
        	时间：2018-11-03
        	描述：选择器：first
        -->
		<script>
			//文档加载事件，页面初始化的操作
			$(function(){
				//过滤出所有div中第一个元素
				$("#btn1").click(function(){
					$("div:first").css("background-color","palegreen");
				});
			
			
				//过滤出所有div中偶数位的div
				$("#btn2").click(function(){
					$("div:even").css("background-color","palegreen");
				});
				//过滤出所有div中奇数位的div
				$("#btn3").click(function(){
					$("div:odd").css("background-color","palegreen");
				});
				$("#btn4").click(function(){
					$("div:gt(2)").css("background-color","palegreen");
				});
			}); 
		</script>
	</head>
	<body>
		<input type="button" value="过滤出所有div中第一个元素" id="btn1"/>
		<input type="button" value="过滤出所有div中偶数位的div" id="btn2"/>
		<input type="button" value="过滤出所有div中奇数位的div" id="btn3"/>
		<input type="button" value="过滤出所有div中找出索引大于2" id="btn4"/>
		<br />
		<div id="one"><!--0-->
			<div class="mini">1-1</div><!--1-->
		</div>
		<div id="two"><!--2-->
			<div class="mini">2-1</div><!--3-->
			<div class="mini">2-2</div><!--4-->
		</div>
		<div id="three">
			<div class="mini">3-1</div> 
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
	</body>
</html>

属性选择器：

选择器[href]：单个属性

选择器[href][title]：多个属性

选择器[href][title='test']：多个属性，包含值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			
			$(function(){
				//通过属性选择器去找到a href
				//$("a[href]").css("color","red");
				//找出包含href,title
				$("a[href][title]").css("color","red");
				//找出包含href title 并且 title='testTitle'
				//$("a[href][title='testTitle']").css("color","deeppink");
			});
			
		</script>
	</head>
	<body>
		<a href="#">href 111</a>
		<br />
		<a href="#" title="testTitle">href 222</a>
	</body>
</html>

JQuery中表单属性的过滤：

:input     找出所有输入项：  input textarea   select

:text

:password

 

表单对象属性：

找出select中被选中的那一项：

option:selected

JQ的开发步骤：

1.导入JQ相关的包

2.文档加载完成的事件：页面初始化：绑定事件，启动定时器

3.确定事件

4.实现事件所要触发的函数

5.函数里面再去操作我们要操作的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			$(function(){
				//$(":input").css("background-color","red");
				//$(":password").css("background-color","red");
				$("#btn1").click(function(){
					$("option:selected").css("background-color","chartreuse");
					alert($("option:selected").size());
				});
			});
		</script>
	</head>
	<body>
		<form>
			<input type="button" value="Input Button"/>
			<input type="checkbox" />
			
			<input type="file" />
			<input type="hidden" />
			<input type="image" />
			
			<input type="password" />
			<input type="radio" />
			<input type="reser" />
			
			<input type="submit" />
			<input type="text" />
			<select multiple="multiple">
				<option>Option1</option>
				<option>Option2</option>
				<option>Option3</option>
			</select>
			<input type="button" value="点我" id="btn1"/>
 			<textarea></textarea>	
			<button>Button</button>
		</form>
	</body>
</html>

 

jQuery_01入门&选择器
m0_64043477的博客
03-15 1092
jQuery_01入门&选择器
jquery_validate验证
liu_jiang666的博客
02-08 899
jquery_validate的介绍 使用jquery_validate脚本可以进行客户端的信息的验证，使用起来方便快捷，只需要在需要验证的地方引用jquery的js脚本就好了。 jquery_validate 脚本下载 点击下载,如果您是tp框架的使用者，将下载好的压缩包解压在项目目录的public/static下。（小编用来演示的就是tp框架） 引用 引用这三个js脚本 <script src="/static/jQuery_validate/lib/jquery.js"></scri
jQuery_01入门
m0_67768699的博客
03-09 1871
jQuery_01入门 一、了解什么是jQuery 1.解释： j:javascript Query: 查询 2.jQuery是JavaScript的类库：封装了很多JS代码 3.官方地址：jQuery 4.查看官方jQueryLOGO：write less，do more（写得少，做得多） 二、jQuery的作用 为了简化JavaScript开发 提供了大量的选择器，更加方便地获取元素 CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件 三、使用jQ...
Jquery_01
Jaosn.Yang的博客
07-12 3722
jQuery的基础回顾的setInterval（）方法有什么作用？如何改变浏览器地址栏中的网址？getElementByXXX（）系列方法有哪些？本章目标会在网页中导入的jQuery框架掌握jQuery的的基本语法掌握jQuery的对象与DOM对象的相互转换会使用jQuery的实现简单特效jQuery的简介网官地址http://jquery.com/jQuery由美国人John Resig于200...
jQuery_01 入门&选择器
qq_61313896的博客
03-09 731
一：jQuery是什么? jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 之类的事情变得更加简单，它具有易于使用的 API，可在多种浏览器中工作 jQuery 结合了多功能性和可扩展性，改变了数百万人编写 JavaScript 的方式。 jQuery的理念：write less,do......
jQuery_01(入门&选择器）
m0_65208075的博客
03-10 634
jQuery是什么？ 但是jQjQuery是js的类库，里面封装了很多的函数，是一个轻量级的“写得少，做得多”的javaScript库，市场上众多的js插件中，jQuery只是其中一个，但是jQuery是目前最流行的框架，而且提供了大量的扩展。 jQuery一般在哪些情况下使用 中大型网站开发 一些前端框架的基础 取得页面中的元素 修改页面的外观 改变页面的内容 响应用户的页面操作 为页面添加动态效果 简化常见的JavaScript任务 jQuery库包含以下功能 H.
jQuery_01(入门&选择器)
T278gd的博客
03-15 148
1.什么是jQuery？ jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大低简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发AJax的操作。jQuery封装很多预定义的对象和函数。 2.jQuery库的特点 HTML元素操作 HTML元素选取 CSS操作思路 HTML事件函数 3.jquery思路 4.上课代码 <!DOCTYPE html> <html> <head&gt.
jquery基础_01
m0_58451019的博客
04-11 406
1.jq的选择器 例子如下： 第一： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--1,一定要引入 jquery的文件内容--> <script type="text/javascript" src="js/jquery-3.6.0.min.js" ></script&..
jQuery_02
qq_65716482的博客
03-19 562
<html> <head> <meta charset="utf-8" /> <title>jQuery02: $工具方法&属性</title> <style type="text/css"> .xx{ border: solid red 2px; } .aaa{ background-color: #01BE00; } .bbb{ background-co.
报错__jQuery__01
DHCsimida的专栏
12-25 781
（1）错误信息：grid can not be used in this ('quirks') mode          解决方案：修改或增加页面头为：
超越Jquery_01_isPlainObject分析与重构
12-09
isPlainObject是Jquery1.4后提供的新方法,用于判断对象是否是纯粹的对象（通过 “{}” 或者 “new Object” 创建的）。 使用isPlainObject 首先我们来了解一下什么叫’纯粹的对象’，简单的理解’纯粹的对象’指的...
JQuery_zTree_v2.6.02.zip_V2 _javascrip_ztree
09-19
1. zTreeAPI v2.6.01.chm：这是一个帮助文档，详细介绍了zTree的API接口，包括各个函数的用法、参数说明和返回值，对于开发者来说，它是快速上手和解决问题的重要参考。 2. Readme-说明.html：这是官方提供的使用...
jquery_demo
03-19
- **Chapter 01**: 这一章通常会介绍jQuery的基本用法，包括如何引入jQuery库，如何使用$函数选择元素，以及基本的链式操作。还会讲解如何利用jQuery进行DOM操作，如元素的增删改查。 - **Chapter 02**: 可能涵盖了...
JQuery_html总结.pdf
01-27
.class01, #id01 { color: blue; } <div id="id01">div标签class01 ``` **8. 表单** - **`<form>`标签**: 创建表单。 - **`type`属性**: 定义输入字段的类型。 - `text`: 文本输入字段。 - `password`: ...
河北大学软件工程编程Python课程和程序设计作业 含各自结课作业 Homework of Hebei University
08-08
资源下载链接为： https://pan.quark.cn/s/c6dc15a4b89c 河北大学软件工程编程Python课程和程序设计作业 含各自结课作业 Homework of Hebei University（最新、最全版本！打开链接下载即可用！）
电动汽车充电设施：15kW充电桩电源模块与三相电源电路设计详解
08-08
15kW充电桩电源模块的设计细节及其三相电源电路图。首先探讨了主电路采用的三电平结构以及IGBT选型和驱动设计的关键考量因素，如门极电阻的选择和驱动芯片FD6288的应用。接着讨论了主功率回路中电容阵列的作用和布局技巧，强调了PCB热设计的重要性，包括覆铜区域和散热过孔阵列的设计。此外，文章还涉及了滤波电感L1的参数计算方法和安全设计要点，如Y电容和MOV的正确选择。最后分享了一些实际调试的经验教训，提醒工程师们注意调试时的安全措施。 适合人群：从事电力电子、充电桩设计及相关领域的工程师和技术人员。 使用场景及目标：帮助读者深入了解15kW充电桩电源模块的具体设计思路和实现方法，掌握相关硬件设计的关键技术和注意事项，提高实际项目中的设计水平。 其他说明：文中提供了大量实用的设计经验和调试技巧，有助于避免常见错误并优化设计方案。
基于SpringBoot+Vue的学生交流互助平台【附万字论文+PPT+包部署+录制讲解视频】.zip
08-08
标题基于SpringBoot+Vue的学生交流互助平台研究AI更换标题第1章引言介绍学生交流互助平台的研究背景、意义、现状、方法与创新点。1.1研究背景与意义分析学生交流互助平台在当前教育环境下的需求及其重要性。1.2国内外研究现状综述国内外在学生交流互助平台方面的研究进展与实践应用。1.3研究方法与创新点概述本研究采用的方法论、技术路线及预期的创新成果。第2章相关理论阐述SpringBoot与Vue框架的理论基础及在学生交流互助平台中的应用。2.1SpringBoot框架概述介绍SpringBoot框架的核心思想、特点及优势。2.2Vue框架概述阐述Vue框架的基本原理、组件化开发思想及与前端的交互机制。2.3SpringBoot与Vue的整合应用探讨SpringBoot与Vue在学生交流互助平台中的整合方式及优势。第3章平台需求分析深入分析学生交流互助平台的功能需求、非功能需求及用户体验要求。3.1功能需求分析详细阐述平台的各项功能需求，如用户管理、信息交流、互助学习等。3.2非功能需求分析对平台的性能、安全性、可扩展性等非功能需求进行分析。3.3用户体验要求从用户角度出发，提出平台在易用性、美观性等方面的要求。第4章平台设计与实现具体描述学生交流互助平台的架构设计、功能实现及前后端交互细节。4.1平台架构设计给出平台的整体架构设计，包括前后端分离、微服务架构等思想的应用。4.2功能模块实现详细阐述各个功能模块的实现过程，如用户登录注册、信息发布与查看、在线交流等。4.3前后端交互细节介绍前后端数据交互的方式、接口设计及数据传输过程中的安全问题。第5章平台测试与优化对平台进行全面的测试，发现并解决潜在问题，同时进行优化以提高性能。5.1测试环境与方案介绍测试环境的搭建及所采用的测试方案，包括单元测试、集成测试等。5.2测试结果分析对测试结果进行详细分析，找出问题的根源并
【深度学习与时间序列预测】Python实现基于GWO-CNN-BiLSTM-Attention灰狼优化算法（GWO）优化卷积双向长短期记忆神经网络（CNN-BiLSTM）融合注意力机制进行多变量多步
08-08
内容概要：本文详细介绍了一个基于灰狼优化算法（GWO）优化的卷积双向长短期记忆神经网络（CNN-BiLSTM）融合注意力机制的多变量多步时间序列预测项目。该项目旨在解决传统时序预测方法难以捕捉非线性、复杂时序依赖关系的问题，通过融合CNN的空间特征提取、BiLSTM的时序建模能力及注意力机制的动态权重调节能力，实现对多变量多步时间序列的精准预测。项目不仅涵盖了数据预处理、模型构建与训练、性能评估，还包括了GUI界面的设计与实现。此外，文章还讨论了模型的部署、应用领域及其未来改进方向。 适合人群：具备一定编程基础，特别是对深度学习、时间序列预测及优化算法有一定了解的研发人员和数据科学家。 使用场景及目标：①用于智能电网负荷预测、金融市场多资产价格预测、环境气象多参数预报、智能制造设备状态监测与预测维护、交通流量预测与智慧交通管理、医疗健康多指标预测等领域；②提升多变量多步时间序列预测精度，优化资源调度和风险管控；③实现自动化超参数优化，降低人工调参成本，提高模型训练效率；④增强模型对复杂时序数据特征的学习能力，促进智能决策支持应用。 阅读建议：此资源不仅提供了详细的代码实现和模型架构解析，还深入探讨了模型优化和实际应用中的挑战与解决方案。因此，在学习过程中，建议结合理论与实践，逐步理解各个模块的功能和实现细节，并尝试在自己的项目中应用这些技术和方法。同时，注意数据预处理的重要性，合理设置模型参数与网络结构，控制多步预测误差传播，防范过拟合，规划计算资源与训练时间，关注模型的可解释性和透明度，以及持续更新与迭代模型，以适应数据分布的变化。
05PCweChat资源
最新发布
08-09
05PCweChat资源11111111111111
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值