Web09--jQuery基础

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.mfbz.cn/a/345110.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

HTTP动态代理的原理及其对网络性能的影响

HTTP动态代理的原理及其对网络性能的影响

HTTP动态代理是一种通过代理服务器来转发HTTP请求和响应数据的网络技术&#xff0c;它可以优化网络性能、提高网络安全性&#xff0c;并解决跨域请求的问题。本文将详细介绍HTTP动态代理的原理及其对网络性能的影响。 一、HTTP动态代理的原理 HTTP动态代理的基本原理是在客户…
阅读更多...
什么是交换机端口镜像？

什么是交换机端口镜像？

热门IT课程【视频教程】-华为/思科/红帽/oraclehttps://xmws-it.blog.csdn.net/article/details/134398330 镜像可以在不影响交换机/路由器等网络设备报文正常处理流程的情况下&#xff0c;将指定源的报文复制一份到目的端口。目的端口与监控设备直接或间接相连&#xff0c;监控…
阅读更多...
山体滑坡监测预警系统-gnss位移监测站

山体滑坡监测预警系统-gnss位移监测站

GNSS山体滑坡位移监测站是一种利用全球导航卫星系统&#xff08;GNSS&#xff09;进行山体滑坡位移监测的设备。它通过接收和处理GNSS卫星信号&#xff0c;能够实时监测山体的位移变化&#xff0c;并将数据传输到后端系统进行分析和处理。 GNSS山体滑坡位移监测站具有高精度、…
阅读更多...
文件上传技术总结

文件上传技术总结

语言可解析的后缀 &#xff08;前提&#xff1a;在Apache httpd.conf 配置文件中有特殊语言的配置 AddHandler application/x-httpd-php .php 搭配大小写、双重、空格来进行 其中&#xff1a; phtml、pht、php3、php4和php5都是Apache和php认可的php程序的文件后缀 常见的…
阅读更多...
云安全包括哪些方面？

云安全包括哪些方面？

随着云计算的快速发展&#xff0c;云安全问题也日益受到关注。云安全不仅涉及到个人数据安全&#xff0c;还涉及到国家安全、社会稳定等方面。因此&#xff0c;了解云安全包括哪些方面对于保护个人隐私和企业数据安全具有重要意义。本文将从多个角度探讨云安全所涉及的方面。 ​…
阅读更多...
ASCB1系列一体式智能微型断路器 智慧空开-安科瑞 蒋静

ASCB1系列一体式智能微型断路器 智慧空开-安科瑞 蒋静

1. 概述 ASCB1系列智能微型断路器(一体式)&#xff08;以下简称智能微型断路器&#xff09;应用于户内建筑物及类似场所的工业、商业、民用建筑及基础设施等领域低压终端配电网络。智能微型断路器对用电线路的关键电气参数&#xff0c;如电压、电流、功率、温度、漏电、能耗等…
阅读更多...
Ask for Power Apps 消失了?

Ask for Power Apps 消失了?

Ask for Power Apps 消失了? 背景替换定义一个接收数组的参数1.我们新建一个Text接收参数取名为**Arrlist**.定义一个参数类型是Array 背景 今天才发现&#xff0c;我在flow中想向power apps索要一个参数&#xff0c;但是之前的Ask for Power Apps 这个触发器怎么也找不到了。…
阅读更多...
k8s---pod的水平自动伸缩HPA

k8s---pod的水平自动伸缩HPA

HPA&#xff1a;Horizontal Pod Autoscaling是pod的水平自动伸缩。是k8s自带的模块 pod占用CPU的比率到达一定的阈值会触发伸缩机制。 replication controller&#xff1a;副本控制器。控制pod的副本数 deployment controller&#xff1a;节点控制器。部署pod hpa控制副本的…
阅读更多...
【C++】初步认识基于C的优化

【C++】初步认识基于C的优化

C祖师爷在使用C语言时感觉到了不方便的一些点&#xff0c;于是一步一步改进优化&#xff0c;最后形成了C 本文将盘点一下基于C的语法优化 目录 命名空间&#xff1a;命名空间定义&#xff1a;命名空间使用&#xff1a; C输入&输出&#xff1a;cout&#xff1a;endl&#…
阅读更多...
spring中循环依赖问题、Servlet 的过滤器与 Spring 拦截器区别

spring中循环依赖问题、Servlet 的过滤器与 Spring 拦截器区别

spring中的循环依赖问题 当A类中关联B&#xff0c;B类中关联A class A {B b; } class B {A a; } 正常java代码中new A时&#xff0c;b为null&#xff1b;new B时&#xff0c;a为null&#xff1b; 但是在spring中&#xff0c;由于对象是由spring容器管理的&#xff0c;当创建…
阅读更多...
C语言——联合和枚举

C语言——联合和枚举

目录 一、联合体 1.1 联合体类型的声明 1.2 联合体的特点 1.3 相同成员的结构体和联合体对比 1.4 联合体大小的计算 1.5 联合的⼀个练习 二、枚举类型 2.1 枚举类型的声明 2.2 枚举类型的优点 2.3 枚举类型的使用 一、联合体 1.1 联合体类型的声明 像结构体⼀样…
阅读更多...
【腾讯云服务器】幻兽帕鲁私服服务器部署保姆级教程

【腾讯云服务器】幻兽帕鲁私服服务器部署保姆级教程

在帕鲁的世界&#xff0c;你可以选择与神奇的生物「帕鲁」一同享受悠闲的生活&#xff0c;也可以投身于与偷猎者进行生死搏斗的冒险。帕鲁可以进行战斗、繁殖、协助你做农活&#xff0c;也可以为你在工厂工作。你也可以将它们进行售卖&#xff0c;或分解后食用。 想要部署属于自…
阅读更多...
C++ STL之stack的使用及模拟实现

C++ STL之stack的使用及模拟实现

文章目录 1. 介绍2. stack的使用3. 栈的模拟实现 1. 介绍 英文解释&#xff1a; 也就是说&#xff1a; stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。 stack是作为容器适配器被实现…
阅读更多...
8 种网络协议

8 种网络协议

什么是网络协议&#xff1f; 网络协议就是计算机之间沟通的语言&#xff0c;为了有效地交流&#xff0c;计算机之间需要一种共同的规则或协议&#xff0c;就像我们和老外沟通之前&#xff0c;要先商量好用哪种语言&#xff0c;要么大家都说中文&#xff0c;要么大家都说英语&a…
阅读更多...
Elasticsearch分布式一致性原理剖析(三)-Data篇

Elasticsearch分布式一致性原理剖析(三)-Data篇

本文首发于云栖社区(Elasticsearch分布式一致性原理剖析(三)-Data篇-博客-云栖社区-阿里云)&#xff0c;由原作者转载。 前言 “Elasticsearch分布式一致性原理剖析”系列将会对Elasticsearch的分布式一致性原理进行详细的剖析&#xff0c;介绍其实现方式、原理以及其存在的问…
阅读更多...
安卓移动设备使用DS file文件管理工具远程访问本地群晖NAS文件

安卓移动设备使用DS file文件管理工具远程访问本地群晖NAS文件

文章目录 1. 群晖安装Cpolar2. 创建TCP公网地址3. 远程访问群晖文件4. 固定TCP公网地址5. 固定TCP地址连接6. 结语 DS file 是一个由群晖公司开发的文件管理应用程序&#xff0c;主要用于浏览、访问和管理存储在群晖NAS&#xff08;网络附加存储&#xff09;中的文件。这个应用…
阅读更多...
ubuntu下使用Live555搭建流媒体服务器

ubuntu下使用Live555搭建流媒体服务器

本教程实验环境在64bit ubuntu Live555基本介绍&#xff0c;RTSP&#xff0c;以及服务端客户端的编程参考这篇文章&#xff1a;实时流媒体传输开源库——Live555 拉取Live555源码到本地文件夹 wget http://www.live555.com/liveMedia/public/live.2023.11.30.tar.gz解压缩 …
阅读更多...
NIC400简介

NIC400简介

1. 简介 CoreLink NIC-400&#xff08;Network Inter Connect&#xff09;网络互连是高度可配置的&#xff0c;能够创建一个完整的高性能、优化和符合AMBA标准的网络基础设施。CoreLink NIC-400网络互连有许多可能的配置。它们的范围从单一的桥接组件&#xff0c;例如AHB到AXI协…
阅读更多...
【MIdjourney】五个特殊物体关键词

【MIdjourney】五个特殊物体关键词

1.碳酸(Carbonate) 这一词语的本意是指包含碳&#xff08;C&#xff09;、氧&#xff08;O&#xff09;和氢&#xff08;H&#xff09;元素的化合物。而在MIdjourney中添加该词汇会使得生成的图片具有水滴效果且富有动态感。 2.灯丝(Filament) Filament效果可能包括更逼真的…
阅读更多...
Dify学习笔记-手册（三）

Dify学习笔记-手册（三）

1、应用构建及提示词 在 Dify 中&#xff0c;一个“应用”是指基于 GPT 等大型语言模型构建的实际场景应用。通过创建应用&#xff0c;您可以将智能 AI 技术应用于特定的需求。它既包含了开发 AI 应用的工程范式&#xff0c;也包含了具体的交付物。 简而言之&#xff0c;一个应…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站