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

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

智能推荐

CUDA编译（一）---使用nvcc编译cuda_nvcc编译cuda程序-程序员宅基地

文章浏览阅读3.4w次，点赞17次，收藏57次。CUDA编译（一）—使用nvcc编译cudanvcc介绍示例nvcc介绍nvcc是编译cuda程序的编译器，CDUA C是在C语言上的扩展，所以它依赖C编译器（C编译器在window下是cl.exe，在Linux下是gcc）。因此我们编译CUDA程序必须依靠编译器nvcc。其实，nvcc编译cuda程序和g++编译c++程序是差不多的。在我的其它博客中也写了有关g++编译..._nvcc编译cuda程序

spring bootstrap table 表格创建_springboot table编辑-程序员宅基地

文章浏览阅读827次。前台表格插件多种样，以前用过datatable以及gridtable，这次想要尝试一个新的，就选择了bootstrap table，主要是界面定了想要用bootstrap设计界面，所以就选择了这个，bootstrap table 官网为http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/，里面对表格各种问题都有详细描述。好了，不多..._springboot table编辑

福建师范大学计算机科学与技术学院,福建师范大学计算机科学与技术学院.docx...-程序员宅基地

文章浏览阅读195次。福建师范大学计算机科学与技术学院1、-只能在总账模块里可以制作财务凭证。()--A.　√ B.　×　　答案：×2、-系统初始化工作，可为U8系统内模块提供基础应用的公共档案。()--A.　√ B.　×　　答案：√3、-新建的末级科目辅助项类型必须和上级科目一致。()--A.　√ B.　×　　答案：×4、-项目大类定义中项目栏目是固定的，不能新增栏目。()--A.　√ B.　×　　答案：×5、-凭证...

什么是模块化及其优点是什么-程序员宅基地

文章浏览阅读2.2k次。模块化是一种将系统分离成独立功能部分的方法，严格定义模块接口、模块间具有透明性。javascript中的模块在一些C、PHP、java中比较常见:c中使用include 包含.h文件;php中使用require_once包含.php文件java使用import导入包优点：可维护性1.灵活架构，焦点分离2.方便模块间组合、分解3.方便单个模块功能调试、升级4.多人协作互不干扰..._模块化编程的优点

pyqt5 QMainWindow 模板例子_qtgui设计打印模板-程序员宅基地

文章浏览阅读357次。11import sysfrom PyQt5.QtCore import *from PyQt5.QtGui import *from PyQt5.QtWidgets import *class MainWindow(QMainWindow): def __init__(self): super(MainWindow, self).__init__() ..._qtgui设计打印模板

MATLAB算法实战应用案例精讲-【图像处理】缺陷检测（补充篇）-程序员宅基地

文章浏览阅读116次。缺陷检测是工业上非常重要的一个应用，由于缺陷多种多样，传统的机器视觉算法很难做到对缺陷特征完整的建模和迁移，复用性不大，要求区分工况，这会浪费大量的人力成本。深度学习在特征提取和定位上取得了非常好的效果，越来越多的学者和工程人员开始将深度学习算法引入到缺陷检测领域中。虽然当前深度学习技术十分火爆，但它占AOI落地项目中的比例仅约10%。传统算法依然无法被完全取代，它有着计算复杂度低、调试成本低等优点。

随便推点

高通平台添加屏幕驱动_rm69380-程序员宅基地

文章浏览阅读6.8k次，点赞4次，收藏60次。添加新显示屏通道修改/bootable/bootloader/lk/target/msm8952/oem_panel.c添加屏幕厂家提供的驱动头文件，例：#include “include/panel_kd_ota7290b_1200p_video.h”在数组中添加新的屏幕在函数init_panel_data()中添加与刚才数组对应的panel_id在init_panel_dat..._rm69380

深度学习基础-程序员宅基地

文章浏览阅读734次。了解基本的深度学习概念，熟悉必备的数序基础知识，学会常见的编程工具Python，实现简单的深度学习项目。_深度学习基础

【 python 中 if 的用法(if else, if not, elif)】_python if else if-程序员宅基地

文章浏览阅读5.7w次，点赞35次，收藏173次。本文介绍了常见的if语句的各种用法_python if else if

基于ardunio的外部中断接口及应用_arduino中断测速-程序员宅基地

文章浏览阅读679次，点赞3次，收藏8次。概念，服务程序，优先级，中断号，中断函数，示例_arduino中断测速

安卓学习日志 Day02 — 视图回收_activity view回收-程序员宅基地

文章浏览阅读4.1k次。文章目录概述Miwok应用构建应用概述添加ActivityOnClickListener修改Activity显示的名称视图回收LinearLayout 和 TextViewListView 和 ArrayAdapeter内存性能分析器使用总结参考概述今日学习内容如下：了解 Miwok 语言应用的结构，在该应用中创建多屏，并使用 Intents 将多个 Activity 连接起来。视图回收使用 LinearLayout 和 TextView 展示数据改用 ListView 和 ArrayAda_activity view回收

WEB中五大选择器（基本选择器、包含选择器、复合选择器、属性选择器、伪类选择器）_web选择器-程序员宅基地

文章浏览阅读1.8k次。选择器五大总结_web选择器