菜单 搜索
首页 前端知识 jQuery基础

jQuery基础

2024-02-29 12:02:11 前端知识 前端哥 597 622 我要收藏

目录

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>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/2975.html
标签
学习
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

CSS3 Flexbox

2024-03-18 11:03:22

VUE环境下 CSS3 JS 实现发牌 翻牌

2024-03-18 11:03:21

【编解码：WebP协议】

2024-03-18 11:03:21

纯CSS实现背景色渐变

2024-03-18 11:03:20

CSS3：最新特性和实例教程

2024-03-18 11:03:20

微信小程序 navigator点击后有阴影 ，去掉navigator阴影效果

2024-03-18 11:03:20

HTML5 & CSS3常见新特性

2024-03-18 11:03:19

前端框架的CSS模块化（CSS Modules）

2024-03-18 11:03:54

CSS 3

2024-03-18 11:03:53

aardio简单网站css或js下载练习

2024-03-18 11:03:52

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
6

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
7

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
8

jQuery事件处理

2024-03-12 01:03:32999
9

HTML5实现下拉列表的标签有哪些

2024-03-11 10:03:35999
10

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！