jQuery基础

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

1.使用jQuery弹出提示框

语法：

简写方式


html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>使用jQuery弹出提示框title>
		
		<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():

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

window.onload:

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

jQuery选择器

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

1.标签选择器

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

示例：

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

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


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的元素标签，设置背景色为红色


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的元素，设置文本颜色为蓝色


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元素标签，设置背景颜色灰色


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")选取所有元素，设置文本字体颜色为橙色


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元素标签，设置背景色红色


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元素标签，设置背景色绿色


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元素标签，设置背景色黄色


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>

相关阅读:
技术的“核心引擎”
后台管理----搜索，重置功能
 微信支付业务代码流程
 023-普通内部类与静态内部类
 如何快速推广新产品？小马识途营销顾问谈新品推广技巧
 【.NET CORE】yisha框架校验输入内容
 idea未知的解决方案
 APA泊车名词解释
 【OpenGL】六、深度测试和模板测试
 MATLAB实现的数字图像处理（指纹增强）
原文地址：https://blog.csdn.net/m0_57051895/article/details/127860261