jQuery04笔记

最新推荐文章于 2024-03-09 11:41:00 发布
最新推荐文章于 2024-03-09 11:41:00 发布
阅读量822 收藏
点赞数
分类专栏： jQuery 笔记 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63692854/article/details/123683073
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#aa {

				width: 200px;
				height: 200px;
				background-color: yellow;
			}

			p {
				text-align: center;
				background-color: deeppink;
			}
			.abc{
			transform: rotate(360deg);/* x */
				transition: all 2s;
			}
		</style>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* 一、事件 */
			//1.1 加载DOM的两种方式(区别)

			// window.onload = function() {
			// console.info("js方式");
			// }
			// $(function() {
			// 	console.info("jQuery方式");
			// })
			//在低版本中，js比jQuery慢
			//在高(3.x)版本中，js比jQuery快



			$(function() {
				//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
				//--元素.on/bind()
				// $("#aa").on("click",function(){
				// 	alert("嘿嘿嘿");
				// })
				// $("#aa").bind("mouseover",function(){
				// 	alert("嘿嘿嘿");
				// })
				//--元素.事件名
				// $("#aa").click(function(){
				// 	alert("干哈");
				// })
				// $("#aa").mouseover("click",function(){
				// 	alert(123);
				// })

				//1.3 合成事件/事件切换
				//--hover()悬停控制元素[div]的显示和隐藏
				// $("#aa").hide()//隐藏
				// $("a").hover(function(){//鼠标移上事件
				// 	$("#aa").show();//显示
				// },function(){//鼠标移出事件
				// 	$("#aa").hide();//隐藏
				// })
				//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题:高版本成为动画效果]

				// $("#aa").hide()//隐藏
				// $("a").toggle(function(){//鼠标移上事件
				// 	$("#aa").show();//显示
				// },function(){//鼠标移出事件
				// 	$("#aa").hide();//隐藏
				// })

				// $("#aa").toggle(1000);
				//1.4 事件的传播(事件冒泡) 小p->中div->大body
				//依次添加点击事件
				// $("p").click(function(){
				// 	console.info("p被点击了");
				// })
				// $("div").click(function(){
				// 	console.info("div被点击了");
				// 	return false;//阻止传播
				// })
				// $("body").click(function(){
				// 	console.info("body被点击了");
				// })
				//1.5 事件event的坐标[了解即可 pageX,pageY]
				// $("#aa").on("click",function(e){
				// 	console.info(e.pageX,e.pageY);
				// })
				//1.6 事件的移除
				//--按钮只能点击一次[2]
				// $("#btn").click(function() {
				// 	console.info(gergehjy);//做一系列的事情
				// 	//将点击事件移除
				// 	$("#btn").unbind("click");
				// 	//禁用按钮
				// 	$("#btn").prop("disabled",true);
				// })
				
				//--按钮点击偶数次可行 奇数次不行
				// var i=1;
				// $("#btn").click(function(){
				// 	if(i%2==0){//偶数次
				// 	console.info(4552,i);
						
				// 	}
				// 	i++;
				// })
				/* 二、动画 */
				//2.1 基本动画 [回调函数]
				// $("#aa").hide()//隐藏
				// $("#xx").click(function(){
				// 	$("#aa").show(1000);
				// 	//回调函数
				// 	alert("来了老弟");
				// })
				// $("#yy").click(function(){
				// 	$("#aa").hide(1000);
				// })
				// $("#zz").click(function(){
				// 	$("#aa").toggle(1000);
				// })
				// //2.2 滑动动画
				$("#xx").click(function(){
					$("#aa").slideDown(1000);
					
				})
				$("#yy").click(function(){
					$("#aa").slideUp(1000);
				})
				$("#zz").click(function(){
					$("#aa").slideToggle(1000);
				})
				// //2.3 淡入淡出(透明度)
				// $("#aa").hide()//隐藏
				// $("#xx").click(function(){
				// 	$("#aa").fadeIn(1000);
					
				// })
				// $("#yy").click(function(){
				// 	$("#aa").fadeOut(1000);
				// })
				// $("#zz").click(function(){
				// 	$("#aa").fadeToggle(1000);
				// })
				//2.4 自定义动画
				//--缩放
				// $("#bb").on("click", function() {
				// 	$("#aa").animate({
				// 		width: 100,
				// 		heigth: 300
				// 	}, 2000);
				// })
				//--移动[2]
			
				// $("#bb").on("click", function() {
				// 	$("#aa").animate({
				// 		left: 100,
				// 		top: 300
				// 	}, 2000);
				// })
				$("#bb").on("click", function() {
					$("#aa").animate({
						left: "+=5",
						top: "+=10"
					}, 2000);
				})
				// $("#bb").click(function(){
				// 	//给div增加点击样式
				// 	$("#aa").addClass("abc");
				// })
			})
		</script>
	</head>
	<body>
		<input type="button" name="" id="btn" value="点我试试" /><br>
		<a style="text-decoration: none;" href="">显示</a>
		<button type="button" id="xx">显示(展开)[淡出]</button>
		<button type="button" id="yy">隐藏(收缩)[淡入]</button>
		<button type="button" id="zz">显示/隐藏(展开/收缩)[淡入/淡出]</button>
		<button id="bb" type="button">变变变</button>
		<div id="aa">
			<br>
			<br>
			<p>
				这是一巴掌
			</p>
		</div>
	</body>
</html>

不想余生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery 详细笔记
Y2ANG
04-09 1351
1 jQuery 概述 1.1 JavaScript 库 库，是用于开发软件的子程序集合。库和可执行文件的区别是，库不是独立程序，他们是向其他程序提供服务的代码库链接。 JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。就是把各种常用的代码片段，组织起来放在一个 js 文件里，组成一个包，这个包就是 JavaScript 库。 简单理解：就是一个 JS文件，里面对我们原生 js 代码进行了封装，存放到里面。这样我们就可以快速高效的使用这些封装好的功能了。 比如 jQuer
JQuery学习笔记
kianagrow的博客
05-15 1095
jQuery是一个快速、简洁的JavaScript框架，封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery学习笔记
深思纵似丁香结，一展芭蕉寸凡心。
01-20 990
jQuery学习笔记 JQuery入门-笔记部分 jQuery概述 jQuery是js库 库：相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的是用js代码写的函数 jquery是为了简化js的操作 jquery的安装 <script src="js/jquery-3.4.1.js" type="text/javascript"></script> 需要（在前面）引入jquery的核心js文件，不然会报错（$未定义）! jquery核心 $ 符号在j
jQuery的学习笔记
qi_bai_jin的博客
11-06 1036
jQuery是一个快速，小型且功能丰富的JavaScript库。它使HTML文档遍历和操作，事件处理，动画和Ajax之类的事情变得更加简单，并且易于使用的API可以在多种浏览器上运行。凭借多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
jQuery笔记
qq_46214241的博客
03-09 1787
（1）显示隐藏 show()、hide()、toggle()1)没有动画效果// })// })2)有动画效果 给show 或 hide 传递参数，毫秒值 / slow | fast// 主要是控制标签的宽度 高度 透明度 最后dispay为none// 动画结束就执行functionconsole.log("显示标签的动画完成")});})})// 原状态是显示的，调用这个api就隐藏；否则反之})
jQuery05 笔记
weixin_63692854的博客
03-24 920
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #myform label.error{ color: red; font-size: 0.875rem; } </style> <!-- 引入jquery库 --&.
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1194
本文主要介绍有关jQuery的相关知识点
jquery，ajax笔记,ajax|jquery笔记
weixin_39608132的博客
08-06 355
1.index.PHP$(document).ready(function(){$('#submitbt').click(function(){//var name = $('#name').val();//var dataString = "name="+name;var dataPass = {'name': $("#name").val()};$.ajax({type: "POST",url...
jQuery学习笔记总结
早安，朝气蓬勃的你
05-13 1548
jQuery 1、jQuery下载：https://www.jq22.com/jquery-info122#google_vignette 基本使用：下载解压jar包（备用），IDEA或eclipse构建一个工程，把jQuery文件复制到工程目录下。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WnAZpDhU-1652445213644)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20220
Jquery学习笔记分享
11-24
第1章. JQuery概述 2 1. Jquery基本作用 2 2. 优点 2 3. 引入JQuery 2 4. 代码风格 2 5. 其他 JavaScript 库 3 6. 多个库之间的冲突 3 7. jQuery对象和DOM对象 3 第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择...
jquery笔记
01-24
jquery笔记，多年前端开发积累。
jquery基础笔记
01-16
jquery基础笔记 基本上把需要用到的方法都概括了 比较全
jquery 学习笔记一
10-29
jquery是javascript的类库，提供了大量的javascript的类库和API，方便javascript开发。
rockyou.txt
06-06
rockyou
ASP+ACCESS网上人才信息管理系统(源代码+论文)【ASP】.zip
06-06
ASP+ACCESS网上人才信息管理系统(源代码+论文)【ASP】
河北金融学院经济大数据课设2024年 软科学校爬虫课设
06-06
河北金融学院经济大数据课设2024年 软科学校爬虫课设
widgetsnbextension-4.0.0b0-py3-none-any.whl
最新发布
06-06
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
jQuery学习笔记——事件
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要绑定事件的元素，`event` 表示要绑定的事件类型，比如 `click`、`mouseover` 等等。事件处理程序则是在事件触发时要执行的代码块。 2. 多个事件绑定 我们可以通过 `on()` 方法来同时绑定多个事件： ``` $(selector).on({ event1: function(){ // 事件处理程序1 }, event2: function(){ // 事件处理程序2 } }) ``` 这样，当 `event1` 或 `event2` 中任意一个事件触发时，对应的处理程序都会被执行。 3. 解除事件 如果需要解除某个元素的事件处理程序，可以使用 `off()` 方法： ``` $(selector).off(event); ``` 其中，`event` 表示要解除的事件类型。如果不指定事件类型，则会解除该元素上所有的事件处理程序。 4. 事件委托 在 jQuery 中，我们可以使用事件委托来提高性能。事件委托是指将事件绑定到父元素上，而不是绑定到子元素上，然后通过事件冒泡来判断是哪个子元素触发了该事件。这样，当子元素数量较多时，只需要绑定一次事件，就可以监听到所有子元素的事件。 ``` $(selector).on(event, childSelector, function(){ // 事件处理程序 }) ``` 其中，`selector` 表示父元素，`event` 表示要绑定的事件类型，`childSelector` 表示要委托的子元素的选择器，事件处理程序则是在子元素触发事件时要执行的代码块。 以上是 jQuery 中事件的一些基本操作，希望对你有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不想余生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值