Web09--jQuery基础

news2024/11/17 11:27:06

1、jQuery概述

1.1 什么是jQuery

jQuery是一款优秀的JavaScript的轻量级框架之一，封装了DOM操作、事件绑定、ajax等功能。特别值得一提的是基于jQuery平台的插件非常丰富，大多数前端业务场景都有其封装好的工具可直接使用。

jQuery下载和版本介绍

官网地址：jQuery

1.2 jQuery版本

  • jquery-x.js     开发版本：有良好的缩进格式和注释，方便开发者阅读
  • jquery-x.min.js  生产版本：代码进行压缩，体积小方便网络传输

框架（Framework）是完成某种功能的半成品，抽取重复繁琐的代码，提供简洁强大的方法实现。

1.3 jQuery入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery入门</title>
		<!-- 当前页面如果想使用jq，需要引入jq的库，通script标签中的src属性进行即可 -->
		<script src="js/jquery-3.4.1.js"></script>
	</head>
	<body>
		
		<script>
			// JS原生版
			window.onload = function(){
				alert("111");
			}
			
			// jQ版本
			jQuery(function(){
				alert("222")
			})
			
			// jq简化写法1
			$(document).ready(function(){
				alert("333");
			})
						
			//jq简化写法2 推荐
			$(function(){
				//今后的jq代码都在这里书写
				alert("444");
			});
		</script>
		
	</body>
</html>

1.4 jQ与JS的页面加载的区别

// JS原生版
window.onload = function(){
  alert("111");
}

//jq
$(function(){
  alert("444");
});

js: 只能定义一次，如果定义多次，后面会将前面的进行给覆盖掉

jq: 可以定义多次

1.5 jQ与JS的转换

jQuery虽然本质上也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象。

通过js方式获取的是js对象，通过jQuery方式获取的是jQuery对象。

js 转 jQ

$(js对象)

jq 转 js

jq对象[索引]

jq对象.get(索引)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQ与JS转换</title>
		<script src="js/jquery-3.4.1.js"></script>
		<script>
			$(function() {
				// js写法
				document.getElementById("mydiv").innerHTML = "我是dom对象的修改";
				// jq写法
				$("#mydiv").html("我是jq对象的修改");

				// js ---> jq
				$(document.getElementById("mydiv")).html("js 转  jq");

				// jq ---> js
				//方式一
				$("div")[0].innerHTML = "jq转成js方式一";

				//方式二
				$("div").get(1).innerHTML = "jq转成js方式二"
			});
		</script>
	</head>
	<body>
		<div id="mydiv">1111</div>
		<div id="mydiv">2222</div>
	</body>
</html>

2、jQuery选择器

2.1 基本选择器

标签选择器（元素选择器）

语法： $("html标签名") 获得所有匹配标签名称的元素

id选择器

语法： $("#id的属性值") 获得与指定id属性值匹配的元素

类选择器

语法： $(".class的属性值") 获得与指定的class属性值匹配的元素

通配符选择器

语法： $("*") 获得所有元素

并集选择器

语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		<script src="js/jquery-3.4.1.js"></script>
		<script>
			$(function(){
				
				// id选择器
				$("#nav").css("color","red");
				
				// 标签选择器
				$("div").css("background-color","pink");
				
				// 类选择器
				$(".cls").css("color","blue");
				
				// 通配符选择器
				$("*").css("font-size","20px")
				
				// 组合选择器,并集选择器
				$("#nav,p").css("background-color","aqua");
				
			});
		</script>
	</head>
	<body>
		<div id="nav">
			div1
		</div>
		<div class="cls">
			div2
		</div>
		<div class="cls">
			div3
		</div>
		<p>ppp</p>
	</body>
</html>

2.2 层级选择器

后代选择器

语法： $("A B") 选择A元素内部的所有B元素

子选择器

语法： $("A > B") 选择A元素内部的所有B子元素

兄弟选择器

语法： $("A ~ B") 选择在A元素之后的同级的B元素

跟班选择器

语法： $("A + B") 选择A元素之后的同级的B元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层级选择器</title>
		<script src="js/jquery-3.4.1.js"></script>
		
		<script>
			$(function(){
				// 后代选择器 $("A B")
				$("#nav span").css("color",'red');
				
				// 子选择器 $("A > B")
				$("#nav > span").css("background-color",'blue');
				
				// 兄弟选择器 $("A ~ B")
				$("#nav ~ div").css("font-size",'25px');
				
				// 跟班选择器 $("A + B")
				$("#nav ~ div").css("background-color",'aqua');
			});
		</script>
	</head>
	<body>
		<div>独立的div</div>
		<div id="nav">
			<span>div的子元素span</span>
			<p>
				<span>div的子元素p，p的子元素span</span>
			</p>
		</div>
		<div>独立的div</div>
		<div>独立的div</div>
	</body>
</html>

2.3 过滤器

2.3.1 属性过滤选择器

首元素选择器

语法： :first 获得选择的元素中的第一个元素

尾元素选择器

语法： :last 获得选择的元素中的最后一个元素

偶数选择器

语法： :even 偶数，从 0 开始计数

奇数选择器

语法： :odd 奇数，从 0 开始计数

等于索引选择器

语法： :eq(index) 指定索引元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性过滤选择器</title>
		<script src="js/jquery-3.4.1.js"></script>
		<script>
			$(function() {
				// 首元素选择器 :first
				$("tr:first").css("font-size","24px");
				
				// 尾元素选择器 :last
				$("tr:last").css("color","red");
				
				// 偶数选择器 :even 偶数，从 0 开始计数
				$("tr:even").css("background-color","pink");
				
				// 奇数选择器 :odd 奇数，从 0 开始计数
				$("tr:odd").css("background-color","greenyellow");
				
				// 等于索引选择器 :eq(index) 指定索引元素
				$("tr:eq(0)").css("background-color","gray");
				
				
			});
		</script>
	</head>
	<body>
		<table border="1" width="600">
			<tr>
				<th>商品编号</th>
				<th>商品名称</th>
				<th>售价</th>
				<th>数量</th>
			</tr>
			<tr>
				<td>001</td>
				<td>冰箱</td>
				<td>3000</td>
				<td>100</td>
			</tr>
			<tr>
				<td>002</td>
				<td>洗衣机</td>
				<td>2000</td>
				<td>50</td>
			</tr>
			<tr>
				<td>003</td>
				<td>热水器</td>
				<td>1500</td>
				<td>20</td>
			</tr>
			<tr>
				<td>004</td>
				<td>手机</td>
				<td>2188</td>
				<td>200</td>
			</tr>
		</table>
	</body>
</html>

2.3.2 属性选择器

属性名称选择器

语法： $("A[属性名]") 包含指定属性的选择器

属性选择器

语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器

复合属性选择器

语法： $("A[属性名='值'] []...") 包含多个属性条件的选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		<script src="js/jquery-3.4.1.js"></script>
		<script>
			$(function() {
				// 属性名称选择器 $("A[属性名]")
				$("input[type]").css("color","red");
				
				// 属性选择器 $("A[属性名='值']")
				$("input[type='text']").css("background-color","blueviolet");
				
				// 复合属性选择器 $("A[属性名='值'] []...")
				// 获取 type ='text' 并且 name='nickname' 的标签
				$("input[type='text'][name='nickname']").css("font-size","20px");
			});
		</script>
	</head>
	<body>
		<input type="text" name="username" value="用户名" /><br />

		<input type="text" name="nickname" value="昵称" /><br />

		<input type="password" name="password" value="密码" /><br />

		<p class="p-yanqi">我是class="p-yanqi"</p>
	</body>
</html>

2.3.3 子元素过滤选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子元素过滤选择器</title>
		<script src="js/jquery-3.4.1.js"></script>
		<script>
			$(function(){
				// 索引从1开始
				// 1.在每个表格 下3的倍数行，字体颜色为红色 3 6 9 12
				$("tr:nth-child(3n)").css("color","red");
				
				// 2.每个表格 奇数行 背景色 skyblue
				$("tr:nth-child(odd)").css("background","skyblue");
				
				// 3.每个表格 偶数行 背景色 greenyellow
				$("tr:nth-child(even)").css("background","greenyellow");
				
				// 4.每个tr 只有一个td的  字体为 蓝色
				$("td:only-child").css("color","blue");
			});
		</script>
	</head>
	<body>
		<table border="1" width="400" id="mytable">
			<tr>
				<td>1</td>
				<td>冰箱</td>
			</tr>
			<tr>
				<td>2</td>
				<td>洗衣机</td>
			</tr>
			<tr>
				<td>3</td>
				<td>热水器</td>
			</tr>
			<tr>
				<td>4</td>
				<td>电饭锅</td>
			</tr>
			<tr>
				<td>5</td>
				<td>电磁炉</td>
			</tr>
			<tr>
				<td>6</td>
				<td>豆浆机</td>
			</tr>
			<tr>
				<td>7</td>
				<td>微波炉</td>
			</tr>
			<tr>
				<td>8</td>
				<td>电视</td>
			</tr>
			<tr>
				<td>9</td>
				<td>空调</td>
			</tr>
			<tr>
				<td>10</td>
				<td>收音机</td>
			</tr>
			<tr>
				<td>11</td>
				<td>排油烟机</td>
			</tr>
			<tr>
				<td>12</td>
				<td>加湿器</td>
			</tr>
			<tr>
				<td colspan="2">13 电暖气</td>
			</tr>
		</table>
	</body>
</html>

3、JQ遍历

3.1 对象遍历

jq对象.each(function(index,element){

})

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象遍历</title>
		<script src="js/jquery-3.4.1.js"></script>
		<script>
			$(function(){
				/* 内置的两个参数：
					index: 索引
					element：遍历到的元素
				*/
				$("li").each(function(index, element) {
					
					//遍历索引
					console.log(index);
					
					//遍历元素
					console.log(element);
					
					//遍历元素中的数据
					console.log($(element).html());
				
					console.log($(this).html());
				})
			})
		</script>
	</head>
	<body>
		<ul id="city">
			<li>北京</li>
			<li>上海</li>
			<li>天津</li>
		</ul>
	</body>
</html>

3.2 jQ循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQ循环</title>
		<script src="./js/jquery-3.4.1.js"></script>
		<script>
			$(function() {
				var arr = ['a', 'b', 'c', 'd'];
				$(arr).each(function() {
					console.log(this); //代表是当前引用对象，  用的是谁，this代表谁
				});
			});
		</script>
	</head>
	<body>
	</body>
</html>

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

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

相关文章

qml中访问控件内部的子项

qml中访问控件内部的子项

如何访问Repeater类型内部的子项、Row等布局类型内部的子项以及ListView内部的子项等。。。 1、测试代码 import QtQuick 2.0 import QtQuick.Controls 2.12 import QtQuick.Window 2.12 import QtQuick.Layouts 1.3 import QtQml 2.12Window {id: windowobjectName: "m…
阅读更多...
彩色图像处理之彩色图像分割的python实现——数字图像处理

彩色图像处理之彩色图像分割的python实现——数字图像处理

原理 彩色图像分割是图像处理领域的一个重要技术&#xff0c;它旨在将一幅彩色图像划分为多个区域或对象。其基本原理包括以下几个方面&#xff1a; 像素特征的提取&#xff1a;彩色图像分割首先涉及到像素级的特征提取。在彩色图像中&#xff0c;常用的特征包括颜色、纹理和…
阅读更多...
Javadoc的讲解使用

Javadoc的讲解使用

概述&#xff1a;JavaDoc 是用于生成 Java 代码文档的工具。通过编写 JavaDoc 注释&#xff0c;可以为代码中的类、接口、方法、字段等元素添加文档注释&#xff0c;这些注释将被 JavaDoc 工具解析并生成相应的 HTML 文档。 目录 讲解 使用 结果 讲解 下面是一些关于 Java…
阅读更多...
常用通信总线学习——RS232与RS485

常用通信总线学习——RS232与RS485

RS232概述 RS-232标准接口&#xff08;又称EIA RS-232&#xff09;是常用的串行通信接口标准之一&#xff0c;它是由美国电子工业协会(Electronic Industry Association&#xff0c;EIA)联合贝尔系统公司、调制解调器厂家及计算机终端生产厂家于1970年共同制定&#xff0c;其全…
阅读更多...
RocketMQ源码阅读-七-高可用

RocketMQ源码阅读-七-高可用

RocketMQ源码阅读-七-高可用 概述NameServer高可用Broker注册到NameServerProducer、Consumer 访问 Namesrv Broker高可用Broker主从配置Master、Slave通信组件Master与Slave的通信协议Slave节点逻辑Master节点逻辑Master_SYNC模式Producer发消息Consumer消费消息 总结 本篇分析…
阅读更多...
如何配置Tomcat服务环境并实现无公网ip访问本地站点

如何配置Tomcat服务环境并实现无公网ip访问本地站点

文章目录 前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语 前言 Tomcat作为一个轻量级的服务器&#xff0c;不仅名字很有趣&#xff0…
阅读更多...
前出深入-机器学习

前出深入-机器学习

文章目录 一、K近邻算法1.1 先画一个散列图1.2 使用K最近算法建模拟合数据1.3 进行预测1.4 K最近邻算法处理多元分类问题1.5 K最近邻算法用于回归分析1.6 K最近邻算法项目实战-酒的分类1.6.1 对数据进行分析1.6.2 生成训练数据集和测试数据集1.6.3 使用K最近邻算法对数据进行建…
阅读更多...
python3去除图片中的文字水印

python3去除图片中的文字水印

声明&#xff1a;本文为python技术分享&#xff0c;仅供学习使用。 请勿用于商业用途&#xff01;&#xff01;&#xff01; 请勿用于商业用途&#xff01;&#xff01;&#xff01; 请勿用于商业用途&#xff01;&#xff01;&#xff01; 以下为代码&#xff1a; import …
阅读更多...
LeetCode、875. 爱吃香蕉的珂珂【中等，最小速度二分】

LeetCode、875. 爱吃香蕉的珂珂【中等，最小速度二分】

文章目录 前言LeetCode、875. 爱吃香蕉的珂珂【中等&#xff0c;最小速度二分】题目及分类思路分析及代码实现代码优化 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Ja…
阅读更多...
多维时序 | Matlab实现EVO-TCN-Multihead-Attention能量谷算法优化时间卷积网络结合多头注意力机制多变量时间序列预测

多维时序 | Matlab实现EVO-TCN-Multihead-Attention能量谷算法优化时间卷积网络结合多头注意力机制多变量时间序列预测

多维时序 | Matlab实现EVO-TCN-Multihead-Attention能量谷算法优化时间卷积网络结合多头注意力机制多变量时间序列预测 目录 多维时序 | Matlab实现EVO-TCN-Multihead-Attention能量谷算法优化时间卷积网络结合多头注意力机制多变量时间序列预测效果一览基本介绍程序设计参考资…
阅读更多...
部署TOMCAT详解

部署TOMCAT详解

目录 一、Tomcat概述 1.1Tomcat简介 1.2、Tomcat历史 1.3Tomcat官网 二、部署单实例Tomcat 1.下载Tomcat包 2. 解压Tomcat包 3.配置环境变量 4.刷新环境变量 5.查看tomcat是否安装成功 6.启动Tomcat 三、Tomcat目录介绍 1、tomcat主目录介绍 2.webapps目录介绍 3…
阅读更多...
Unity——八叉树的原理与实现

Unity——八叉树的原理与实现

八叉树原理 八叉树&#xff08;Octree&#xff09;是一种用于在三维空间中进行空间分割的数据结构。它将三维空间递归地划分为八个子空间&#xff0c;每个子空间对应于一个八叉树节点。这种分割方式可以有效地组织和管理场景中的对象&#xff0c;提高检索效率&#xff0c;特别…
阅读更多...
会计等式与会计事项

会计等式与会计事项

目录 一. 会计等式二. 会计事项 \quad 一. 会计等式 \quad 最后利润是归所有者权益所有, 就回到了原有等式 \quad \quad \quad 二. 会计事项 \quad 会计事项: 引起会计要素增减变化的经济业务。 会计六要素: 资产 负债 所有者权益 收入 费用 利润 任何会计事项都不会破坏会计…
阅读更多...
C++ 数论相关题目（欧拉函数、筛法求欧拉函数）

C++ 数论相关题目（欧拉函数、筛法求欧拉函数）

1、欧拉函数 给定 n 个正整数 ai &#xff0c;请你求出每个数的欧拉函数。 欧拉函数的定义 1∼N 中与 N 互质的数的个数被称为欧拉函数&#xff0c;记为 ϕ(N) 。 若在算数基本定理中&#xff0c;Npa11pa22…pamm &#xff0c;则&#xff1a; ϕ(N) Np1−1p1p2−1p2…pm−1p…
阅读更多...
人工智能时代：让AIGC成为你的外部智慧源（文末送书）

人工智能时代：让AIGC成为你的外部智慧源（文末送书）

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;数据结构、网络奇遇记 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. 什么是AIGC?二. AIGC如何运作&#xff1f;2.1 步骤一&#xff1a;收集数据2.…
阅读更多...
day32WEB 攻防-通用漏洞文件上传二次渲染.htaccess变异免杀

day32WEB 攻防-通用漏洞文件上传二次渲染.htaccess变异免杀

本章节知识点&#xff1a; 1 、文件上传 - 二次渲染 2 、文件上传 - 简单免杀变异 3 、文件上传 -.htaccess 妙用 4 、文件上传 -PHP 语言特性 前置知识&#xff1a; 后门代码需要用特定格式后缀解析&#xff0c;不能以图片后缀解析脚本后门代码 ( 解析漏洞除外 ) 如&…
阅读更多...
Aleo测试网回顾-测试网期间共释放了多少积分

Aleo测试网回顾-测试网期间共释放了多少积分

上一篇我们整理了Aleo的详细项目介绍&#xff0c;Aleo项目详细介绍-一个兼顾隐私和可编程性的隐私公链-CSDN博客 接下来&#xff0c;让我们盘点下测试网期间的积分释放情况&#xff0c;测试网期间的奖励积分也将是Aleo主网上线后的抛压来源。测试网期间共计释放了4000万的积分…
阅读更多...
2024转行程序员的请注意：均月薪在40-70k

2024转行程序员的请注意：均月薪在40-70k

前言 2023年&#xff0c;对大多数行业来说都是不太好过的一年。 对程序员来说也是如此&#xff0c;很多粉丝朋友都在说android工作特别难找&#xff0c;一个岗位都是几千份简历…大家心里都是特别的焦虑&#xff0c;本以为2024年就业情况会有好转&#xff0c;但实际上并非如此…
阅读更多...
解决Windows系统本地端口被占用的问题

解决Windows系统本地端口被占用的问题

一、解决Windows系统本地端口被占用的问题&#xff0c;首先我们要在虚拟机上人为的占用本地端口 二、占用端口方法&#xff1a;以管理员身份运行cmd;输入net stop http;如果提示是否真的需要停止这些服务,则选择“Y”;完成后输入:sc config http startdisabled 弹出上图内容则成…
阅读更多...
UE4运用C++和框架开发坦克大战教程笔记（十六）（第49~50集）

UE4运用C++和框架开发坦克大战教程笔记（十六）（第49~50集）

UE4运用C和框架开发坦克大战教程笔记&#xff08;十六&#xff09;&#xff08;第49~50集&#xff09; 49. 创建多个资源对象补全调用链并测试生成多个同种类名资源对象实现创建多个同资源名的对象实例 50. 资源加载系统测试补全调用链并测试生成多个同名资源对象测试生成 Widg…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023