jQuery基础

news2025/7/17 10:59:51

目录

jQyery简介

获取jQuery

 jQuery基本语法

1.使用jQuery弹出提示框

2.$(document).ready()与window.onload的区别

jQuery选择器

 jQuery层次选择器

jQyery简介

  • jQuery由美国人John Resig于2006年创建。
  • jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。
  • 它的设计思想是write less,do more。

获取jQuery

1.进入jQuery官网：http://jquery.com

 2.下载压缩后的jQuery3.6.1(英文选择：Download the compressed,production jQuery 3.6.1)

 3.复制全部内容，全选(Ctrl+a)，复制(Ctrl+c)

 4.创建一个js文件，将复制的jQuery全部内容黏贴在js文件内

 

 jQuery基本语法

        使用jQuery要引用jQuery

        <script src="js/jQuery.js"></script>

1.使用jQuery弹出提示框

语法：

<script>
            $(document).ready(function(){
                 alert("这里是jQuery弹出的提示框！");
             });
 </script>

简写方式

<script>
            $(function(){
                alert("这里是jQuery弹出的提示框！");
            });
</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>使用jQuery弹出提示框</title>
		<!-- 引用jQuery -->
		<script src="js/jQuery.js"></script>
		<script>
			// $(document).ready(function(){
			// 	alert("这里是jQuery弹出的提示框！");
			// });
			// 简写方式
			$(function(){
				alert("这里是jQuery弹出的提示框！");
			});
		</script>
	</head>
	<body>
	</body>
</html>

2.$(document).ready()与window.onload的区别

$(document).ready():

  1. 网页中所有DOM文档结构绘制完毕后即立刻执行，可能与DOM元素关联的内容并没有加载完毕
  2. 同一个页面能同时编写多个
  3. 简化方法：$(document(){//执行代码});

window.onload:

  1. 必须等待网页中所有的内容加载完毕后才能执行
  2. 同意网页中不能同时编写多个window.onload
  3. 无简化方法

jQuery选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器

1.标签选择器

描述：根据给定的标签名匹配元素标签

示例：

$("p")选取所有p元素标签

$("p").css("color","#f00");选取所有p元素标签设置文本颜色为红色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery选择器</title>
		<script src="js/jQuery.js"></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				text-align: center;
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<div>
			<h4>相思</h4>
			<h5>王维</h5>
			<p>红豆生南国，</p>
			<p>春来发几枝。</p>
			<p>愿君多采撷，</p>
			<p>此物最相思。</p>
		</div>
	</body>
	<script>
		//使用标签选择器设置p标签字体为红色
		$(function(){
			$("p").css("color","#f00");
		})
	</script>
</html>

2.类选择器

描述：根据给定的class匹配元素标签

示例：

$(".green")选取所有class为green的元素标签

$(".green").css("background-color","#0f0") 选取所有class为green的元素标签，设置背景色为红色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery选择器</title>
		<script src="js/jQuery.js"></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				text-align: center;
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<div>
			<h4>相思</h4>
			<h5 class="green">王维</h5>
			<p>红豆生南国，</p>
			<p class="green">春来发几枝。</p>
			<p>愿君多采撷，</p>
			<p>此物最相思。</p>
		</div>
	</body>
	<script>
		//使用class选择器设置背景色绿色
		$(function(){
			$(".green").css("background-color","#0f0");
		})
	</script>
</html>

3.ID选择器

描述：根据给定的id匹配元素标签

示例：

$("#red")选取id为red的元素，id具有唯一性，相同的id只能选取第一个

$("#red").css("color","#00f")选取id为red的元素，设置文本颜色为蓝色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery选择器</title>
		<script src="js/jQuery.js"></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				text-align: center;
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<div>
			<h4 id="red">相思</h4>
			<h5 id="red">王维</h5>
			<p>红豆生南国，</p>
			<p>春来发几枝。</p>
			<p>愿君多采撷，</p>
			<p>此物最相思。</p>
		</div>
	</body>
	<script>
		//使用id选择器设置文本颜色蓝色
		$(function(){
			$("#red").css("color","#00f");
		})
	</script>
</html>

4.并集选择器

描述：将每一个选择器匹配的元素合并后一起返回

示例：

$("p,h5")选取所有p、h5元素标签

$("p,h5").css("background-color","#ccc")选取所有p、h5元素标签，设置背景颜色灰色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery选择器</title>
		<script src="js/jQuery.js"></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				text-align: center;
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<div>
			<h4>相思</h4>
			<h5>王维</h5>
			<p>红豆生南国，</p>
			<p>春来发几枝。</p>
			<p>愿君多采撷，</p>
			<p>此物最相思。</p>
		</div>
	</body>
	<script>
		//使用并集选择器设置p元素标签和h5标签背景颜色灰色
		$(function(){
			$("p,h5").css("background-color","#ccc");
		})
	</script>
</html>

5.全局选择器

描述：匹配所有元素标签

示例：

$("*")选取所有元素

$("*").css("color","orange")选取所有元素，设置文本字体颜色为橙色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery选择器</title>
		<script src="js/jQuery.js"></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				text-align: center;
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<div>
			<h4>相思</h4>
			<h5>王维</h5>
			<p>红豆生南国，</p>
			<p>春来发几枝。</p>
			<p>愿君多采撷，</p>
			<p>此物最相思。</p>
		</div>
	</body>
	<script>
		//使用全局选择器设置文本颜色橙色
		$(function(){
			$("*").css("color","orange");
		})
	</script>
</html>

 jQuery层次选择器

层次选择器通过DOM元素标签之间的层次关系类元素元素标签。

层次选择器有后代选择器、子选择器、相邻元素选择器、同辈元素选择器。

1.后代选择器

描述：选取当前元素下的所有元素

示例：

$("ul li")选取ul元素标签下的所有li元素标签

$("ul li").css("background-color","#f00");选取ul元素标签下的所有li元素标签，设置背景色红色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery选择器</title>
		<script src="js/jQuery.js"></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				text-align: center;
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<div>
			<h1>相思</h1>
			<h2>王维</h2>
			<ul>
				<li>红豆生南国，</li>
				<li>春来发几枝。</li>
				<li>愿君多采撷，</li>
				<li>此物最相思。</li>
			</ul>
		</div>
	</body>
	<script>
		//使用后代选择器设置背景颜色红色
		$(function(){
			$("ul li").css("background-color","#f00");
		});
	</script>
</html>

2.子选择器

描述：选择当前元素标签下的子元素

示例：

$("ul>h2")选取ul元素标签下的所有h2元素标签

$("ul>h2").css("background-color","#0f0");选取ul元素标签下的所有h2元素标签，设置背景色绿色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery选择器</title>
		<script src="js/jQuery.js"></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				text-align: center;
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<h1>相思</h1>
				<h2>王维</h2>
				<li>红豆生南国，</li>
				<li>春来发几枝。</li>
				<li>愿君多采撷，</li>
				<li>此物最相思。</li>
			</ul>
		</div>
	</body>
	<script>
		//使用子选择器设置背景颜色绿色
		$(function(){
			$("ul>h2").css("background-color","#0f0");
		});
	</script>
</html>

3.相邻元素选择器

描述：选取与当前元素标签同级的下一个元素标签

示例：

$("h2+li")选取h2元素标签之后的同级元素标签li

$("h2+li").css("background-color","#00f");选取h2元素标签之后的同级元素标签li,设置背景色蓝色

4.同辈元素选择器

描述：选取当前元素标签下的所有同级元素标签

示例：

$("h1~li")选取h1元素标签之后的所有同级li元素标签

$("h1~li").css("background-color","yellow");选取h1元素标签之后的所有同级li元素标签，设置背景色黄色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery选择器</title>
		<script src="js/jQuery.js"></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				text-align: center;
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<h1>相思</h1>
				<h2>王维</h2>
				<li>红豆生南国，</li>
				<li>春来发几枝。</li>
				<li>愿君多采撷，</li>
				<li>此物最相思。</li>
			</ul>
		</div>
	</body>
	<script>
		//使用同辈元素选择器设置背景颜色黄色
		$(function(){
			$("h1~li").css("background-color","yellow");
		});
	</script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/8927.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Windows OpenGL 图像灰度图

Windows OpenGL 图像灰度图

目录 一.OpenGL 图像灰度图 1.原始图片2.效果演示 二.OpenGL 图像灰度图源码下载三.猜你喜欢 零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 基础 零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 特效 零基础 OpenGL ES …
阅读更多...
27k入职阿里测试岗那天，我哭了，这5个月付出的一切总算没有白费~

27k入职阿里测试岗那天，我哭了，这5个月付出的一切总算没有白费~

先说一下自己的个人情况&#xff0c;计算机专业&#xff0c;16年普通二本学校毕业&#xff0c;经历过一些失败的工作经历后&#xff0c;经推荐就进入了华为的测试岗&#xff0c;进去才知道是接了个外包项目&#xff0c;不太稳定的样子&#xff0c;可是刚毕业谁知道什么外包不外…
阅读更多...
Linux任务调度

Linux任务调度

基本原理&#xff1a; crontab [选项] -e 编辑crontab定时任务 -l 查询crontab任务 -r 删除当前用户所有的crontab任务 快速入门 设置任务调度文件: /etc/crontab 设置个人任务调度。执行crontab -e命令。 接…
阅读更多...
100道Spring面试题以及参考答案（2022年最新版）

100道Spring面试题以及参考答案（2022年最新版）

77道Spring面试题以及参考答案&#xff08;2022年最新版&#xff09;&#xff0c;分享给大家~ 一、Spring概述 1. 什么是spring&#xff1f; Spring是一个轻量级Java开发框架&#xff0c;最早有Rod Johnson创建&#xff0c;目的是为了解决企业级应用开发的业务逻辑层和其他各…
阅读更多...
netstat命令应用和ifconfig命令应用

netstat命令应用和ifconfig命令应用

记录: 318 场景: 在CentOS 7.9操作系统上&#xff0c;使用netstat命令监控和查看TCP/IP等网络信息&#xff1b;使用ifconfig命令查看IP地址等网络信息。 版本: 操作系统: CentOS 7.9 1.基础环境 在CentOS 7.9操作系统&#xff0c;使用netstat命令和ifconfig命令&#xff…
阅读更多...
Linux之LNMP离线安装

Linux之LNMP离线安装

一、需求说明 LNMP一键安装包对于小型系统部署来说真的是非常方便&#xff0c;日常工作中除了在线安装&#xff0c;也存在部分场景要求离线安装。比如内网专网、严格限制访问外网的网络等&#xff0c;有些院校的实验室就是这种情况&#xff0c;需要使用光盘来完成系统的部署安装…
阅读更多...
2022年认证杯SPSSPRO杯数学建模C题(第二阶段)污水流行病学原理在新冠疫情防控方面的作用求解全过程文档及程序

2022年认证杯SPSSPRO杯数学建模C题(第二阶段)污水流行病学原理在新冠疫情防控方面的作用求解全过程文档及程序

2022年认证杯SPSSPRO杯数学建模 C题 污水流行病学原理在新冠疫情防控方面的作用 原题再现&#xff1a; 2019 年新型冠状病毒肺炎疫情暴发至今已过两年&#xff0c;新型冠状病毒历经多次变异&#xff0c;目前已有 11 种变异毒株&#xff0c;包括阿尔法、贝塔、德尔塔、奥密克戎…
阅读更多...
Optional详解

Optional详解

一 有什么用 对象的NPE处理简化if else代码 二 怎么用 Optional 就好像是一个包装类&#xff0c;可以把具体的数据封装到 Optional 对象内部&#xff0c;然后我们去使用 Optional 中封装好的方法操作封装进去的数据就可以非常优雅的避免空指针异常 2.1 创建Optional对象 O…
阅读更多...
CellMarker 2.0 | 细胞标志物数据库更新啦！~（附使用指南）

CellMarker 2.0 | 细胞标志物数据库更新啦！~（附使用指南）

1写在前面 细胞标志物&#xff08;Cellmarker&#xff09;可以用来定义、区别不同细胞。随着单细胞测序&#xff08;scRNA-seq&#xff09;的普及&#xff08;主要是便宜了&#x1f4c9;&#xff09;&#xff0c;相关的研究也越来越多。&#x1f973; 在进行细胞注释的时候&…
阅读更多...
【菜菜的sklearn课堂笔记】逻辑回归与评分卡-二元逻辑回归损失函数的数学解释，公式推导与解惑

【菜菜的sklearn课堂笔记】逻辑回归与评分卡-二元逻辑回归损失函数的数学解释，公式推导与解惑

视频作者&#xff1a;菜菜TsaiTsai 链接&#xff1a;【技术干货】菜菜的机器学习sklearn【全85集】Python进阶_哔哩哔哩_bilibili 白板推导里有写过程&#xff0c;但是当时理解的不太好&#xff0c;ψ(xi,ω)\psi(x_{i},\omega)ψ(xi​,ω)的理解有点问题也就是下面的yθ(xi)y_…
阅读更多...
Docker（二）：Windows系统安装Docker

Docker（二）：Windows系统安装Docker

安装环境 在安装之前&#xff0c;Windows 版 Docker 的环境有以下要求&#xff1a; 1、Windows 10 Pro&#xff08;专业版&#xff09; / Enterprise&#xff08;企业版&#xff09; / Education&#xff08;教育版&#xff09;&#xff08;1607 Anniversary Update、Build 14…
阅读更多...
Vue3路由——基本使用、动态路由、路由正则、重复参数、嵌套路由、编程式导航、命名路由、重定向、别名、路由模式与导航守卫

Vue3路由——基本使用、动态路由、路由正则、重复参数、嵌套路由、编程式导航、命名路由、重定向、别名、路由模式与导航守卫

文章目录P23 Vue3路由的基本使用P24 动态路由和404NotFound动态路由404NotFoundp25 路由正则与重复参数路由正则重复参数p26 嵌套路由p27 使用js跳转页面(编程式导航)p28 命名路由与重定向别名命名路由重定向别名p29 路由模式与导航守卫P23 Vue3路由的基本使用 npm init vite-…
阅读更多...
[附源码]java毕业设计基于的花店后台管理系统

[附源码]java毕业设计基于的花店后台管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
《Nature》STING 与 cGAMP 结合导致 TBK1 激酶募集和活化

《Nature》STING 与 cGAMP 结合导致 TBK1 激酶募集和活化

来自细菌或病毒的核酸在受感染的细胞中会产生强效的免疫反应&#xff0c;而病原体衍生核酸的检测是宿主感知感染并启动保护性免疫反应的核心策略。cGAS (Cyclic GMP-AMP synthase) 是一种双链 DNA 传感器&#xff0c;可催化 cGAMP&#xff08;cyclic GMP-AMP&#xff09;的合成…
阅读更多...
中间件简介

中间件简介

中间件简介 1. 中间件概述 随着网络和软件技术的飞速发展&#xff0c;软件面临更多的问题&#xff0c;例如&#xff1a;不同的操作系统、不同的网络环境等。在每个软件中解决这些问题加大了软件开发人员的负担&#xff0c;因此倾向于将这些具有广泛应用的共性功能提取出来&am…
阅读更多...
【离散数学】第二章 测试

【离散数学】第二章 测试

1.单选题 谓词推理要 A. 先US&#xff0c;后ES B. 先ES&#xff0c;后US 正确答案&#xff1a; B 2.单选题 前提: (∀x)(F(x)→G(x))&#xff0c;(∃x)F(x)&#xff0c; 结论: (∃x)G(x)。 A. 成立 B. 不成立 正确答案&#xff1a; A 3.单选题 根据ES规则&#xff0c;若(∃x)P(…
阅读更多...
gRPC（八）生态 grpc-gateway 应用：同一个服务端支持Rpc和Restful Api

gRPC（八）生态 grpc-gateway 应用：同一个服务端支持Rpc和Restful Api

目录前言一、gRPC-Gateway概述1、简述2、出现二、准备工作1、目录结构2、环境准备1&#xff09;Protobuf2&#xff09;gRPC3&#xff09;gRPC-Gateway3、编写 IDL1&#xff09;google.api2&#xff09;hello.proto3&#xff09;编译proto4、制作证书1&#xff09;生成CA根证书2…
阅读更多...
香港服务器一定比美国服务器好吗？

香港服务器一定比美国服务器好吗？

香港服务器一定比美国服务器好吗?从出海业务兴起以来就有不少的站长拿较为热门的香港服务器和美国服务器来作出对比&#xff0c;对其两者孰优孰劣的探讨一直都没有停止过。在这里&#xff0c;我们对两者做个比较。 香港服务器和美国服务器两者的对比&#xff1a; 1. 香港服务器…
阅读更多...
linux笔记(3):东山哪吒STU开发板初体验

linux笔记(3):东山哪吒STU开发板初体验

文章目录1.开发板上电观察串口1.1 从nand flash启动1.2 从SD卡启动2.上传文件到开发板2.1 使用FileZilla软件连接开发板2.2 使用ADB软件双11下单后&#xff0c;经过多日的等待&#xff0c;终于在昨天下午收到了开发板。在等待的过程中&#xff0c;看了一下文档和B站东山老师的视…
阅读更多...
Rhino Linux：滚动发布但也很稳定的 Ubuntu

Rhino Linux：滚动发布但也很稳定的 Ubuntu

导读滚动发布的 Ubuntu 发行版&#xff1f;等等&#xff0c;什么&#xff1f; Rhino Linux 听起来不错……Ubuntu but rolling but also stable! Thats what Rhino Linux aims to be Rhino Linux 将成为 Rolling Rhino Remix 的继任者。这个由 http.llamaz 构建的 Linux 发行版…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023