jQuery使用（超详细）_jquery怎么用-程序员宅基地
技术标签： Java Web 前端 Web基础 jquery javascript
一、jQuery介绍
1.JQuery简介
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库，jQuery的宗旨：用最少的代码！
2.jQuery官网
官方地址：点击打开
官方文档：点击打开
二、jQuery的简单使用
1.JQuery的引用
本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用
<head>
<script src="jquery-1.9.1.min.js"></script>
</head>
CDN引入：使用远程CDN资源库在线引入，避免了文件下载（本教程所采用）
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head> 2.JQuery快速使用
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){ //表示页面加载完成之后，相当于window,onload =function(){}
var $btnObj=$("#btnId"); //表示按id查询标签对象
$btnObj.click(function(){ //绑定单击事件
alert("jquery 的单击事件")
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
运行结果
$是jQuery的核心函数，能完成jquery的很多功能。$()就是调用$这个函数
三、核心函数的四个作用
*1. 传入参数为[函数]是，在文档加载完成以后执行这个函数
* 2.传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象
* 3.传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象
* 4.传入参数为[DOM对象]时，将DOM对象包装为jQuery对象返回
1. 传入参数为[函数]是，在文档加载完成以后执行这个函数
表示页面加载完成之后，相当于window.οnlοad=function(){}
2.传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象
会对我们创建这个html标签对象
<script>
$(function(){
// 2.传入参数为[HTML 字符串]时:根据这个字符串创建元素节点对象
$("<span>div-span1</span>").append("body");
})
</script>3.传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象
$("#id属性值") id选择器，根据id查询标签对象
$("标签名") 标签名选择器，根绝指定的标签名查询标签对象
$(".class属性值") 类型选择器，可以根据class属性查询标签对象
4、传入参数为 [DOM对象] 时，
会把这个dom对象转换成jQuery对象,即 [object HTMLSpanElement] ======> [object Object]
实例：
<script>
$(function(){
// alert("页面加载完成之后，自动调用");
$(" <div>"+
"<span>div-span1</span>"+
"<span>div-span2</span>"+
"</div>").appendTo("body");
var span01=document.getElementById("s01");
alert(span01);
alert($(span01));
});
</script>
<body>
<span id="s01"></span>
</body>
结果
四、DOM对象和JQuery对象
1.DOM对象形式
2.jQuery对象
jQuery对象的本质
jQuery对象的本质是dom对象的数组+jQuery提供的一系列的功能函数
实例
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>a03_JQuery/a02_DOM对象和JQuery对象.html</title>
<script src="js/jquery-3.7.0.js"></script>
<script>
$(function(){
var arr=[12,"abc",true];
var $btns=$("button")
alert(1);
});
</script>
</head>
<body>
<button id="btn1">very Good!!</button>
<button id="btn2">使用DOM</button>
<button id="btn3">使用Jquery对象调用JQuery方法</button>
<button id="btn4">使用jQuery对象调用DOM方法</button>
</body>
</html>代码运行调试,弄断点重新刷新页面进行调试
3.jQuery对象和DOM对象相互转换
jQuery和DOM的使用方法是不一样的，不能混淆使用
就比如说，
js当中是
document.getElementById("testDiv").innerHTML="这个就是DOM对象的属性值innerHTML";
JQuery当中就没有这个，写
$("#testDiv").innerHTML="这个就是DOM对象的属性值innerHTML";
不会起效果
五、选择器
1.id选择器
2.标签选择器
3.类选择器
4.组合选择器
5.全选选择器
智能推荐
RT-Thread简介-程序员宅基地
文章浏览阅读6.7k次，点赞5次，收藏7次。RT-Thread 是一款完全由国内团队开发维护的嵌入式实时操作系统（RTOS），具有完全的自主知识产权。经过近 12 个年头的沉淀，伴随着物联网的兴起，它正演变成一个功能强大、组件丰富的物联网操作系统。1.RT-Thread概述RT-Thread，全称是 Real Time-Thread，顾名思义，它是一个嵌入式实时多线程操作系统，基本属性之一是支持多任务，允许多个任务同时运行并不意味着...
BP神经网络的基本思想,一文搞定bp神经网络_简述bp算法的基本思想。-程序员宅基地
文章浏览阅读1.1k次。经过激活函数f（u）的作用得到隐含层1的输出信息：岩溶地区地下水与环境的特殊性研究经过激活函数f（u）的作用得到隐含层2的输出信息：岩溶地区地下水与环境的特殊性研究激活函数f（u）我们这里采用Sigmoid型，即f（u）=1/[1+exp（-u）]（6.5）隐含层的输出信息传到输出层，可得到最终输出结果为岩溶地区地下水与环境的特殊性研究以上过程为网络学习的信息正向传播过程。最后一个隐层传递到输出层各神经元的信息，经进一步处理后，完成一次学习的正向传播处理过程，由输出层向外界输出信息处理结果。..._简述bp算法的基本思想。
vue中的@keyup事件-程序员宅基地
文章浏览阅读3.5w次，点赞15次，收藏62次。什么是@keyup@keyup是按键松开，当指定的按键松开会触发的事件事件代码事件描述@keyup.enter回车按键松开@keyup.left左键按键松开@keyup.right右键按键松开@keyup.up上键按键松开@keyup.down下键按键松开@keyup.delete删除键松开@keyup 事件使用场景：平台登录页面可以使用该事件，当输入账号和密码后，无需点击登录按钮，直接在输入密码以后回车完成登录，以增加用户体验@k_@keyup
网络摄像机ip修改工具_海康威视NVR通道被锁定网络不可达未认证的设备通道故障来了...-程序员宅基地
文章浏览阅读1.3w次，点赞2次，收藏3次。你是否曾遇到录像机不显示画面就束手无策？是不是经常通道报错就焦头烂额？今天黄老师来告诉你需要怎么做~故障01 用户名或密码错误该报错一般为添加摄像头密码错误导致：解决方法1、进入“配置→通道管理→通道配置→IP通道”，选择报错“用户名或密码错误”的监控点，点击右边“操作”按钮。2、输入摄像机正确激活密码，点击“添加”即可。(若不清楚摄像机密码，请找回摄像机密码再重新添加哦~)故障 02 用户被锁定..._海康威视监控dr摄像头 报错
Airflow 中文文档：初始化数据库后端_airflow2.5.1初始化表-程序员宅基地
文章浏览阅读3.7w次。如果您想对Airflow进行真正的试驾，您应该考虑设置一个真正的数据库后端并切换到LocalExecutor。由于Airflow是使用优秀的SqlAlchemy库与其元数据进行交互而构建的，因此您应该能够使用任何支持作为SqlAlchemy后端的数据库后端。 我们建议使用MySQL或Postgres 。注意我们依赖更严格的MySQL SQL设置来获得合理的默认值。 确保在<cite&g..._airflow2.5.1初始化表
Kendo UI SPA文档-程序员宅基地
文章浏览阅读49次。Kendo UI单页面程序中文文档 Kendo UI SPA Documentation（translated from the official site） 概览...
随便推点
将pytorch框架网络转换为onnx格式，并使用netron可视化HRNet的网络结构_pytorch onnx netron-程序员宅基地
文章浏览阅读1.9k次，点赞4次，收藏7次。前言一、环境配置1.配置运行环境2.安装netron二、pytorch到onnx1.定位主干网络2.onnx格式转换附：HRNet emantic-segmentation运行的调试_pytorch onnx netron
C语言当中int,float,double,char这四个有什么区别？-程序员宅基地
文章浏览阅读4.5w次，点赞51次，收藏300次。区别在以下方面：一、定义方面：1、int为整数型，用于定义整数类型的数据 。2、float为单精度浮点型，能准确到小数点后六位 。3、double为双精度浮点型，能准确到小数点都十二位 。4、char为字符型，用于定义字符类型的数据。二、内存占据：1、int 的内存大小是4 个byte。2、float 内存大小是4 个byte。3、double 的内存大小是8 个byt..._int float double char区别
基于PCA的图像降维及图像重构_图像pca-程序员宅基地
文章浏览阅读2.3w次，点赞36次，收藏225次。实例链接：https://download.csdn.net/download/u010801439/104502101 PCA简述PCA（Principal Component Analysis）主成分分析算法，在进行图像识别以及高维度数据降维处理中有很强的应用性，算法主要通过计算选择特征值较大的特征向量来对原始数据进行线性变换，不仅可以去除无用的噪声，还能减少计算量。2 算法过程......_图像pca
网页设计课程设计报告_学生网页设计设计目的-程序员宅基地
文章浏览阅读4.3w次，点赞70次，收藏686次。学号 课 程 设 计课程名称 网页设计 题 目 鑫晨之家特效网站设计 专 业 软件工程 ..._学生网页设计设计目的
.NET Core:使用ImageSharp跨平台处理图像-程序员宅基地
文章浏览阅读603次。一.简述ImageSharp是一个新的跨平台2D图形API，旨在处理图像而不使用System.Drawing。二.安装目前ImageSharp还是处于alpha版本，所以我们需要在nuget中添加它的地址:https://www.myget.org/F/imagesharp三.画验证码(点我查看源码)在使用ImageSharp之..._.net core 3.1 sixlabors.imagesharp怎么使用
C语言结构体指针与结构体变量作形参的区别_形参是结构体指针-程序员宅基地
文章浏览阅读2.2k次，点赞3次，收藏23次。区别结构体变量结构体变量作为函数参数，传递的是结构体变量本身，是一种值传递形参结构体变量成员值的改变不影响对应的实参构体变量成员值的改变结构体指针结构体指针作为函数参数，传递的是指向结构体变量的本身结构体指针指向的变量成员值的改变影响对应的实参构体变量成员值的改变代码直接说有些抽象难懂，敲代码演示一遍就很清楚了#include <stdio.h>#include <stdlib.h>#include <string.h>struct st_形参是结构体指针