jQuery入门学习笔记（2019.8.11）

最新推荐文章于 2022-06-04 11:11:51 发布
最新推荐文章于 2022-06-04 11:11:51 发布
阅读量141 收藏 1
点赞数
分类专栏： 学习笔记 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43877400/article/details/99233660
版权

jQuery入门学习笔记

1. jQuery的概述
2. jQuery开发的步骤
3. jQuery的动画效果
4. 选择器与过滤器

1. jQuery的概述

1. 什么是jQuery

  • jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。

    极大地简化了 JavaScript 编程

2. jQuery的作用

  • 写更少的代码，完成更多的事情
  • 将JS代码和HTML页面代码进行分离

3. jQuery与JavaScript的区别

  • Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。

  • jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发

    jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

2. jQuery开发的步骤

1. 导入JQ相关的文件
2. 文档加载完成事件：$(function)：页面初始化的操作：绑定事件，启动页面定时器
3. 确定相关操作事件
4. 事件触发函数
5. 函数里面再操作相关的元素

3. jQuery的动画效果

动画出现或者隐藏效果：

1. 基本

$("#图片的id").show(3000);//3000为所需要的时间

$("#图片的id").hide(3000);

2. 滑动

$("#图片的id").slideDown(3000);

$("#图片的id").slideUp(3000);

$("#图片的id").slideToggle(3000);

3. 淡入淡出

$("#图片的id").fadeIn(3000);

$("#图片的id").fadeOut(3000);

$("#图片的id").fadeTo(3000);

$("#图片的id").fadeToggle(3000);

4. 自定义

animate()

stop()

finish()

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(function() {
				//隐藏图片
				$("#bt2").click(function() {
					//$("#img1").hide(3000);
					//$("#img1").slideUp(3000); 
					//$("#img1").slideToggle(3000);
					$("#img1").fadeOut(3000);
					//$("#img1").animate( { width:"1000px", opacity:"0.2" },5000);
				});
				//显示图片
				$("#bt1").click(function() {
					//$("#img1").show(3000);
					//$("#img1").slideDown(3000);
					//$("#img1").slideToggle(3000);
					$("#img1").fadeIn(3000);
					//$("#img1").animate( { width:"500px", opacity:"1" },5000);
				});
			});
		</script>
	</head>

	<body>
		<input type="button" value="显示" id="bt1" />
		<input type="button" value="隐藏" id="bt2" /><br />
		<img src="../img/img3.jpg" id="img1" width="500px" />
	</body>

</html>

4. 选择器与过滤器

一、基本选择器
  1. ID选择器：#ID的名称
  2. 类选择器：以.开头的类名
  3. 元素选择器：标签的名称
  4. 通配符选择器：*（页面的所有元素）
  5. 选择器分组：选择器1，选择器2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本选择器</title>
		<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<script>
			//1、类选择器
			$(document).ready(function() {$("#bt1").click(function() {$(".test").hide();});});
			
			//2、元素选择器
			$(document).ready(function(){$("#bt2").click(function(){$("p").hide();});});
		
			//3、ID选择器
			$(document).ready(function(){$("#bt3").click(function(){$("#one").hide();});});
			
			//4、通配符选择器
			$(document).ready(function(){$("#bt4").click(function(){$("*").hide();});});
			
			//5、选择器选择
			$(document).ready(function(){$("#bt5").click(function(){$(".test,.span").hide();});});
		</script>
	</head>
	<body>
		<h2 class="test">这是一个标题(有类)</h2>
		<p class="test" id="one">这是一个段落。(有类和id)</p>
		<p class="span">这是另外一个段落。</p>
		<input type="button" value="点击修改类" id="bt1"/><br />
		<input type="button" value="点击修改元素" id="bt2"/><br />
		<input type="button" value="点击修改id" id="bt3"/><br />
		<input type="button" value="点击修改通配符" id="bt4"/><br />
		<input type="button" value="点击修改选择" id="bt5"/><br />
	</body>
</html>
二、层级选择器
  1. 子元素选择器：选择器1>选择器2
  2. 后代选择器：选择器1 儿孙
  3. 相邻兄弟选择器：选择器1+选择器2：找出紧挨着的一个弟弟
  4. 所有兄弟选择器：选择器1~选择器2：找出所有的弟弟
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<script>
			//子元素选择器
			$(document).ready(function(){$("#bt1").click(function(){$("body > div").hide();});});
			
			//后代选择器
			$(document).ready(function(){$("#bt2").click(function(){$("body div").hide();});});
			
			//相邻兄弟选择器
			$(document).ready(function(){$("#bt3").click(function(){$("#one+div").hide();});});
			
			//所有兄弟选择器
			$(document).ready(function(){$("#bt4").click(function(){$("#two~div").hide();});});
		</script>
	</head>
	<body>
		<input type="button"  value="子元素选择器" id="bt1"/>
		<input type="button"  value="后代选择器" id="bt2"/><br />
		<input type="button"  value="相邻兄弟选择器" id="bt3"/>
		<input type="button"  value="所有兄弟选择器" id="bt4"/><br />
		<div id="one">
			<div>1-1</div>
		</div>
		<div id="two">
			<span>2-1</span><br />
			<div>2-2</div>
		</div>
		<div id="three">
			<div>3-1</div>
			<div>3-2</div>
			<div>3-3</div>
		</div>
		<span id="four">
			<span>4-1</span><br />
			<div>4-2</div>
			<span>4-3</span><br />
			<span>4-4</span><br />
		</span>
	</body>
</html>
三、基本过滤器
  1. first：找出第一个
  2. last：找出最后一个
  3. even：找出偶数索引
  4. odd：找出奇数索引
  5. gt(index)：大于索引
  6. lt(index):小于索引
  7. eq(index)：等于索引
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		
		<script>
			//过滤div中第一个元素
			$(document).ready(function(){$("#bt1").click(function(){$("div:first").hide();});});
			
			//过滤div中偶位数元素
			$(document).ready(function(){$("#bt2").click(function(){$("div:even").hide();});});
			
			//过滤div中奇位数元素
			$(document).ready(function(){$("#bt3").click(function(){$("div:odd").hide();});});
			
			//过滤div中索引大于2的元素
			$(document).ready(function(){$("#bt4").click(function(){$("div:gt(2)").hide()});});
			
		</script>
	</head>
	<body>
		<input type="button" value="过滤器/第一个" id="bt1" />
		<input type="button" value="过滤器/偶位" id="bt2" /><br />
		<input type="button" value="过滤器/奇位" id="bt3" />
		<input type="button" value="过滤器/大于2" id="bt4" /><br />
		<div>
			<div>1-1</div>
		</div>
		<div>
			<div>2-1</div>
			<div>2-2</div>
		</div>
		<div>
			<div>3-1</div>
			<div>3-2</div>
			<div>3-3</div>
		</div>
		<div>
			<div>4-1</div>
			<div>4-2</div>
			<div>4-3</div>
			<div>4-4</div>
		</div>
	</body>
</html>
四、属性选择器
1. 选择器[href]:单个属性
2. 选择器[href][title]:多个属性
3. 选择器[href][title='test']:多个属性，包含值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<script>
			
			$(function(){$("a[href][title='test']").css("color","coral");});
		</script>
	</head>
	<body>
		<a href="#">href111</a><br />
		<a href="#" title="test">href222</a>
	</body>
</html>
五、表单过滤器
  1. ：input 找出所有输入项
  2. ：text 找出所有包含text项
  3. ：password
六、表单对象属性

option ：selected

汐汐如梦
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Node.js学习笔记--进阶之路
JackieDYH的博客
05-10 1779
简介 Node 是一个软件, 可以脱离浏览器, 独立执行JS文件 Node实现了ECMAScript标准, 所以语言跟JavaScript基本一致 因为想成为全栈开发(前后端都可以的大拿) PHP等语言是阻塞的, 性能不如nodeJS node是事件驱动, 非阻塞的 Node中是大量的, 事件和回调函数 单线程（主线程单线程，后台I/O线程池） 跨平台 (Node软件可以安装在window系统/linux系统/mac系统/等等) 安装Node ...
Vue快速入门学习笔记(更新ing)
喜欢前端的后端 MelodyJerry
11-15 2504
原在博客园发布，先同步到CSDN：https://www.cnblogs.com/melodyjerry/p/13768594.html 本笔记综合了视频狂神说的Vue快速上手和菜鸟教程、CSDN等博客文章，以及个人的一些学习见解与体会。 由于是为了团队需要而快速入门，HTML、CSS、JS、Vue等基础均不全，故本笔记仅供参考学习使用。 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios.
jQuery入门学习笔记（2019.8.12）
夏曦
08-12 136
jQuery入门学习笔记 jQuery遍历 jQuery Ajax 一、jQuery遍历 含义：jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。 遍历祖先(向上遍历DOM树) parent() parents() parentsUntil() $(documen...
JSON入门学习笔记（2019.8.14）
夏曦
08-14 109
JSON入门学习笔记 一、概述 JSON: JavaScript Object Notation(JavaScript 对象表示法) JSON 是存储和交换文本信息的语法，类似 XML。 JSON 比 XML 更小、更快，更易解析 二、使用范围 用于编写基于 JavaScript 应用程序，包括浏览器扩展和网站。 JSON 格式可以用于通过网络连接序列化和传输结构化数据。 主要用于在服务器和...
布客·ApacheCN 编程/后端/大数据/人工智能学习资源 2022.2
龙哥盟
06-04 3722
布客·ApacheCN 编程/后端/大数据/人工智能学习资源 2022.2
狂神说vue.js笔记
JavaScript入门
01-18 2581
01Vue课堂笔记 02第一个vue程序 1、概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架，发布于2014年2月。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层，方便与第三方库（如：vue-router:跳转，vue-resource:通信，vuex:管理)或既有项目整合。 官网：https://cn.vuejs.org/v2/guide/ 2、前端知识体系 想要成为真正的“互联网Java全
jQuery_Ajax学习笔记
chenHARDEN的博客
03-25 314
文章目录学习资源jQuery1、概念2、快速入门步骤3、jQuery对象和js对象的区别和转化4、选择器基本操作学习分类5、DOM操作6、动画7、遍历8、事件绑定9、插件Ajax1、概念2、实现方式 学习资源 视频教程：Java基础+进阶_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili jQuery 1、概念 概念：JavaScript框架，简化JS开发 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架
Vue入门学习笔记
热门推荐
南风的博客
01-23 1万+
Vue学习笔记 1. MVVM模式和第一个Vue程序 参考狂神说java学习教程 什么是MVC MVC 模式代表 Model-View-Controller（模型-视图-控制器） 模式。这种模式用于应用程序的分层开发。 Model（模型） - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。 View（视图） - 视图代表模型包含的数据的可视化。 Co...
ES6入门学习笔记
hen1183392934的博客
08-30 210
ES6学习笔记 学习开课吧 石川老师视频教程 兼容性 各大浏览器的最新版本，对 ES6 的支持可以查看kangax.github.io/compat-table/es6/。随着时间的推移，支持度已经越来越高了，超过 90%的 ES6 语法特性都实现了。 ES6（ES2015）——IE10+、Chorme、FirFox、移动端、NodeJS 编译转换： 在线转换 提前编译(babel==brows...
jquery.form.min.js
08-03
jquery.from.min.js-3.53.0 发现网上一个这文件都收费无语了,有需要的人拿去吧
jquery.zTree.js.rar
09-12
jquery-1.4.4.min.js jquery.ztree.exhide.min.js jquery.ztree.exedit.min.js jquery.ztree.excheck.min.js jquery.ztree.core.min.js jquery.ztree.all.min.js jquery-1.4.4.js jquery.ztree.exhide.js jquery....
jQuery学习笔记之jQuery.fn.init()的参数分析
10-25
主要介绍了jQuery.fn.init()的参数分析,需要的朋友可以参考下
锋利的JQuery学习笔记.pdf
08-14
锋利的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下载）...
计算机专业毕业设计范例845篇jsp2118基于Web停车场管理系统的设计与实现_Servlet_MySql演示录像.rar
05-24
博主给大家详细整理了计算机毕业设计最新项目,对项目有任何疑问(部署跟文档),都可以问博主哦~ 一、JavaWeb管理系统毕设项目【计算机毕设选题】计算机毕业设计选题，500个热门选题推荐,更多作品展示 计算机毕业设计|PHP毕业设计|JSP毕业程序设计|Android毕业设计|Python设计论文|微信小程序设计
Windows 10 平台 FFmpeg 开发环境搭建 博客资源
05-24
【FFmpeg】Windows 10 平台 FFmpeg 开发环境搭建 ④ ( FFmpeg 开发库内容说明 | 创建并配置 FFmpeg 项目 | 拷贝 DLL 动态库到 SysWOW64 目录 ) https://hanshuliang.blog.csdn.net/article/details/139172564 博客资源 一、FFmpeg 开发库 1、FFmpeg 开发库编译 2、FFmpeg 开发库内容说明 二、创建并配置 FFmpeg 项目 1、拷贝 dll 动态库到 C:\Windows\SysWOW64 目录 - 必须操作 特别关注 2、创建 Qt 项目 - C 语言程序 3、配置 FFmpeg 开发库 - C 语言项目 4、创建并配置 FFmpeg 开发库 - C++ 项目
基于 Spring Cloud 、Spring Boot、 OAuth2 的 RBAC 企业快速开发平台
最新发布
05-24
基于 Spring Cloud 、Spring Boot、 OAuth2 的 RBAC 企业快速开发平台， 同时支持微服务架构和单体架构。提供对 Spring Authorization Server 生产级实践，支持多种安全授权模式。提供对常见容器化方案支持 Kubernetes、Rancher2 、Kubesphere、EDAS、SAE 支持
我赚100万的商业模式.pdf
05-24
我赚100万的商业模式
jquery-3.4.1.min.js.下载
11-30
https://code.jquery.com/jquery-3.4.1.min.js 如果您需要在网页中引用jquery-3.4.1.min.js，可以使用以下代码： ```html <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> ``` 请注意，这将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值