jQuery简介-01-程序员宅基地

用户页面中触发ajax请求，访问后端服务器，Web中间件拦截用户请求，转发后端程序进行数据处理，一般还需访问数据库，然后逐层返回。数据库返回数据处理服务，数据处理服务返回Web中间件，Web中间件返回ajax调用，将数据封装到返回的js对象中，目前主流返回数据为json字符串。在回调callback的方法中解析json中的数据，最终回显到页面上。通常我们使用jquery封装过的ajax，写法更加简洁灵活。

jQuery简介

什么是jQuery

jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码

轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架

jQuery的核心思想："写的更少，但做的更多"

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

jQuery** 库包含以下功能：**

HTML 元素快速选取(给予css选择器,方便快速查询DOM文档中的元素)
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX

jQuery的语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法是：$(selector).action()

$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素

jQuery的优势

1,简化了js的写法，用$替代了document.getXxx()

2,可以像CSS选择器一样非常方便的获取元素

3,可以通过修改css样式控制页面的效果

var ele = document.getElementById("username");			//js
var ele = $("#username");						// jQuery

var ele = document.getElementsByTagName("p");	//js
var ele = $("p");								//jQuery

var ele = document.getElementsByName("username");		//js
var ele = $('input[name="username"]');		// jQuery

var ele = document.getElementsByClassName("info");		//js
var ele = $(".info");							// jQuery

$("div").css("background", "red");
$("div").css({
	"background" : "blue",
	"border" : "2px solid red",
	"font-size" : "30px"
});

jQuery的使用

jQuery其实就是一个JS文件,如需使用 jQuery,需要下载，然后使用 HTML 的script标签引用它,应该位于页面的head 部分。

<!-- 引入jQuery的函数库文件 -->
<script src="jquery.min.js"></script>
或者：
<script src="jquery.js"></script>

文档就绪事件

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。

测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jq</title>
		<!-- 引入jQuery文件 -->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 嵌入js代码 -->
		<script>
		// 方式1:还没加载到h1元素,a是null,调用null的资源f12时会出问题
			// var a = document.getElementById("p1");
// alert(a); //null
			// alert(a.innerHTML);
			
			// 方式2: 使用jQuery的文档就绪函数,整个DOM都加载完了才执行
			//jQuery语法:$(选择器).action{ } ;
			$(document).ready(function(){
				var a = document.getElementById("p1");
				alert(a.innerHTML);
			});
			// 方式3: 简写
			$(function(){
				var a = document.getElementById("p1");
				alert(a.innerHTML);
			});
		</script>
	</head>
	<body>
		<h1 id="p1">文档就绪</h1>
	</body>
</html>

总结

什么时候该使用文档就绪事件函数？

如果在获取元素时，获取元素的代码执行的时机（时间）比元素本身加载的时间还要早，如果元素还没有加载到就获取，必然是获取不到的！

将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载过了，再获取任何元素都能获取到！

本文链接：https://blog.csdn.net/qq_55624813/article/details/121430634

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

874计算机科学基础综合,2018年四川大学874计算机科学专业基础综合之计算机操作系统考研仿真模拟五套题...-程序员宅基地

文章浏览阅读1.1k次。一、选择题1．串行接口是指( )。A. 接口与系统总线之间串行传送，接口与I/0设备之间串行传送B. 接口与系统总线之间串行传送，接口与1/0设备之间并行传送C. 接口与系统总线之间并行传送，接口与I/0设备之间串行传送D. 接口与系统总线之间并行传送，接口与I/0设备之间并行传送【答案】C2．最容易造成很多小碎片的可变分区分配算法是( )。A. 首次适应算法B. 最佳适应算法..._874 计算机科学专业基础综合题型

XShell连接失败：Could not connect to '192.168.191.128' (port 22): Connection failed._could not connect to '192.168.17.128' (port 22): c-程序员宅基地

文章浏览阅读9.7k次，点赞5次，收藏15次。连接xshell失败，报错如下图，怎么解决呢。1、通过ps -e|grep ssh命令判断是否安装ssh服务2、如果只有客户端安装了，服务器没有安装，则需要安装ssh服务器，命令：apt-get install openssh-server3、安装成功之后，启动ssh服务，命令：/etc/init.d/ssh start4、通过ps -e|grep ssh命令再次判断是否正确启动..._could not connect to '192.168.17.128' (port 22): connection failed.

杰理之KeyPage【篇】_杰理空白芯片烧入key文件-程序员宅基地

文章浏览阅读209次。00000000_杰理空白芯片烧入key文件

一文读懂ChatGPT，满足你对chatGPT的好奇心_引发对chatgpt兴趣的表述-程序员宅基地

文章浏览阅读475次。2023年初，“ChatGPT”一词在社交媒体上引起了热议，人们纷纷探讨它的本质和对社会的影响。就连央视新闻也对此进行了报道。作为新传专业的前沿人士，我们当然不能忽视这一热点。本文将全面解析ChatGPT，打开“技术黑箱”，探讨它对新闻与传播领域的影响。_引发对chatgpt兴趣的表述

中文字符频率统计python_用Python数据分析方法进行汉字声调频率统计分析-程序员宅基地

文章浏览阅读259次。用Python数据分析方法进行汉字声调频率统计分析木合塔尔·沙地克;布合力齐姑丽·瓦斯力【期刊名称】《电脑知识与技术》【年(卷),期】2017(013)035【摘要】该文首先用Python程序,自动获取基本汉字字符集中的所有汉字,然后用汉字拼音转换工具pypinyin把所有汉字转换成拼音,最后根据所有汉字的拼音声调,统计并可视化拼音声调的占比.【总页数】2页(13-14)【关键词】数据分析;数据可..._汉字声调频率统计

linux输出信息调试信息重定向-程序员宅基地

文章浏览阅读64次。最近在做一个android系统移植的项目，所使用的开发板com1是调试串口，就是说会有uboot和kernel的调试信息打印在com1上（ttySAC0）。因为后期要使用ttySAC0作为上层应用通信串口，所以要把所有的调试信息都给去掉。参考网上的几篇文章，自己做了如下修改，终于把调试信息重定向到ttySAC1上了，在这做下记录。参考文章有：http://blog.csdn.net/longt..._嵌入式rootfs 输出重定向到/dev/console

随便推点

uniapp 引入iconfont图标库彩色symbol教程_uniapp symbol图标-程序员宅基地

文章浏览阅读1.2k次，点赞4次，收藏12次。1，先去iconfont登录，然后选择图标加入购物车 2，点击又上角车车添加进入项目我的项目中就会出现选择的图标 3，点击下载至本地，然后解压文件夹，然后切换到uniapp打开终端运行注：要保证自己电脑有安装node(没有安装node可以去官网下载Node.js 中文网)npm i -g iconfont-tools（mac用户失败的话在前面加个sudo，password就是自己的开机密码吧）4,终端切换到上面解压的文件夹里面，运行iconfont-tools 这些可以默认也可以自己命名（我是自己命名的_uniapp symbol图标

C、C++ 对于char和char[]的理解_c++ char-程序员宅基地

文章浏览阅读1.2w次，点赞25次，收藏192次。char*和char[]都是指针，指向第一个字符所在的地址，但char*是常量的指针，char[]是指针的常量_c++ char*

Sublime Text2 使用教程-程序员宅基地

文章浏览阅读930次。代码编辑器或者文本编辑器，对于程序员来说，就像剑与战士一样，谁都想拥有一把可以随心驾驭且锋利无比的宝剑，而每一位程序员，同样会去追求最适合自己的强大、灵活的编辑器，相信你和我一样，都不会例外。我用过的编辑器不少，真不少～但却没有哪款让我特别心仪的，直到我遇到了 Sublime Text 2 ！如果说“神器”是我能给予一款软件最高的评价，那么我很乐意为它封上这么一个称号。它小巧绿色且速度非

对10个整数进行按照从小到大的顺序排序用选择法和冒泡排序_对十个数进行大小排序java-程序员宅基地

文章浏览阅读4.1k次。一、选择法这是每一个数出来跟后面所有的进行比较。2.冒泡排序法，是两个相邻的进行对比。_对十个数进行大小排序java

物联网开发笔记——使用网络调试助手连接阿里云物联网平台（基于MQTT协议）_网络调试助手连接阿里云连不上-程序员宅基地

文章浏览阅读2.9k次。物联网开发笔记——使用网络调试助手连接阿里云物联网平台（基于MQTT协议）其实作者本意是使用4G模块来实现与阿里云物联网平台的连接过程，但是由于自己用的4G模块自身的限制，使得阿里云连接总是无法建立，已经联系客服返厂检修了，于是我在此使用网络调试助手来演示如何与阿里云物联网平台建立连接。一.准备工作1.MQTT协议说明文档（3.1.1版本）2.网络调试助手（可使用域名与服务器建立连接）PS：与阿里云建立连解释，最好使用域名来完成连接过程，而不是使用IP号。这里我跟阿里云的售后工程师咨询过，表示对应_网络调试助手连接阿里云连不上

＜＜＜零基础C++速成＞＞＞_无c语言基础c++期末速成-程序员宅基地

文章浏览阅读544次，点赞5次，收藏6次。运算符与表达式任何高级程序设计语言中，表达式都是最基本的组成部分，可以说C++中的大部分语句都是由表达式构成的。_无c语言基础c++期末速成