jQuery深度笔记:从基础到高级

一、jQuery简介

  jQuery是一个快速、小巧且富有特色的JavaScript库。自2006年诞生以来,它已经成为Web开发中最受欢迎的工具之一。通过简化和统一JavaScript API,jQuery使得开发者能够更高效地编写交互式网页和复杂的前端应用。

二、选择器

  jQuery的选择器是其核心特性之一,它使得定位HTML元素变得非常简单。以下是选择器的一些示例:

  1. 基础选择器

    #id: 选择具有特定ID的元素。
    .class: 选择具有特定类的元素。
    element: 选择特定类型的元素。
    示例代码

// 改变ID为myId的元素的背景颜色
$("#myId").css("background-color", "red");// 隐藏所有类为myClass的元素
$(".myClass").hide();
  1. 层次选择器

    ancestor descendant: 选择给定祖先元素的所有后代元素。
    示例代码

// 选择p元素内的所有span元素
$("p span").css("color", "blue");
  1. 过滤选择器

    :first, :last: 选择第一个或最后一个匹配的元素。
    :even, :odd: 选择偶数或奇数匹配的元素。
    示例代码

// 选择第一个li元素
$("li:first").css("text-decoration", "underline");
  1. 属性选择器

    [attribute]: 选择带有指定属性的元素。
    示例代码

// 选择所有带有title属性的元素并改变它们的背景颜色
$("input[title]").css("background-color", "yellow");
  1. 表单选择器

    :input: 选择所有输入元素(如<input>, <textarea>, <select>等)。
    示例代码

// 为所有输入框添加一个红色边框
$("input:input").css("border-color", "red");

三、DOM操作

jQuery提供了多种方法来操作DOM。例如:

  • .text(): 获取或设置匹配元素的文本内容。
  • .html(): 获取或设置匹配元素的HTML内容。
  • .val(): 获取或设置匹配元素的表单字段值。
  • .attr(): 获取或设置匹配元素的属性值。
  • .css(): 获取或设置匹配元素的样式属性。
  • .addClass(), .removeClass(): 添加或移除匹配元素的类。
  • .hide(), .show(): 隐藏或显示匹配元素。
  • .toggle(): 切换匹配元素的可见状态。

示例代码

// 设置文本内容
$("#myId").text("Hello World");// 获取HTML内容
var htmlContent = $(".myClass").html();
console.log(htmlContent); // 输出:<div>Some content</div>

四、事件处理

jQuery简化了事件处理,使得添加和删除事件监听器更加容易。例如:

  • .click(): 绑定点击事件。
  • .hover(): 绑定鼠标悬停事件。
  • .focus(): 绑定焦点事件。
  • .on(): 绑定多种事件。
  • .off(): 解绑事件。

示例代码

// 绑定点击事件并执行函数
$("#myButton").click(function() {alert("Button clicked!");
});

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决国内Linux服务器无法使用Github的方法

解决思路&#xff1a;修改Host https://www.ipaddress.com/ 利用上面的网站查询github.com和raw.githubusercontent.com的DNS解析的IP地址 最后&#xff0c;修改服务器的/etc/hosts 添加如下两行&#xff1a; 140.82.112.3 github.com 185.199.108.133 raw.githubuserconte…

树形结构下拉框组件vue-treeselect的使用(安装、模糊匹配、单选、多选、延迟加载、异步搜索等)

一、基本使用流程 首先npm安装依赖 npm install riophae/vue-treeselect --save然后在需要使用的组件中引入 import Treeselect from riophae/vue-treeselect import riophae/vue-treeselect/dist/vue-treeselect.css声明组件 components: { Treeselect }使用 <treesele…

安装布隆过滤器

上传并解压文件解压文件 tar -zxvf RedisBloom-2.2.4.tar.gz 进入解压好的文件 make一下 返回进入conf 配置文件 loadmodule /usr/local/etc/redis/redisbloom.so 粘入 拷贝redisbloom.so到容器 : docker cp redisbloom.so redis:/usr/local/etc/redis 重启redis : docker …

【设计模式】建造者模式就是游戏模式吗?

什么是建造者模式&#xff1f; 传说女娲是用泥巴捏出人来的&#xff0c;当时捏出的小泥人虽然每个都是两条腿、两只手、一个脑袋的样子&#xff0c;但是具体到每个部位&#xff0c;却有有所不同&#xff1a;有的小泥人手长一点&#xff0c;有的手短一点&#xff1b;有的脑袋圆…

NX二次开发获取圆弧的四个象限点

我是用来用来画水路线框的UF_MODL_ask_curve_points&#xff08;&#xff09;可以按弧长或者弧度获取曲线的等分点&#xff0c;取PI/2的圆弧&#xff0c;即将圆弧四等分&#xff0c;你也可以取任意等分点。 int GetArcPoint(tag_t arc_tag,double point[4][3]) {if(arc_tag0)r…

【Spring Boot 3】【Redis】分布式唯一ID生成器

【Spring Boot 3】【Redis】分布式唯一ID生成器 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总…

Ubuntu 20.04安装yum报错:E: Unable to locate package yum

直接上解决方案&#xff01; 1、选择自己对应的版本的源地址 注意需要选择跟系统版本一致的&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu/ 找到Ubuntu点击小问号&#xff0c;进去选择对应的版本&#xff0c;将下面的镜像复制到Linux系统的 /etc/apt/sourc…

【Java】小白友好的面向对象编程学习笔记

目录 OOP介绍 类和对象 方法参数 静态 包和import 构造方法 多态 访问权限 内部类 抽象 接口 枚举 匿名类 bean类 作用域 OOP介绍 Java 是一种面向对象的编程语言&#xff0c;面向对象编程&#xff08;Object-Oriented Programming&#xff0c;简称 OOP&#x…

vue2 使用pdf.js 实现pdf预览,并可复制文本

需求&#xff1a;pdf预览&#xff0c;并且可以选中pdf的内容进行复制。 在ruoyi的vue前端项目中用到&#xff0c;参考了网上不少文章&#xff0c;因为大部分没给具体的pdf.js版本&#xff0c;导致运行过程中报各种api 错误&#xff0c;经过尝试以下版本可用&#xff0c…

R语言【cli】——ansi_html():将ANSI格式文本转换为HTML

Package cli version 3.6.0 Usage ansi_html(x, escape_reserved TRUE, csi c("drop", "keep")) Arguments 参数【x】&#xff1a;输入字符向量。 参数【escape_reserved】&#xff1a;是否转义HTML中保留的字符(&、<和>)。 参数【csi】&a…

ARM多核调度器DSU

1. 背景 从A75开始&#xff0c;ARM提出了一个新的多核心管理系统单元&#xff0c;叫做DSU(DynamIQ Shared Unit)。DSU的核心功能是控制CPU内核&#xff0c;使其成簇Cluster使用&#xff0c;簇内每一个核心可以单独开关、调整频率/电压&#xff0c;能效表现更佳&#xff0c;甚至…

如何使用Webpack打包js文件

《Webpack打包简单的js文件》 初始化一个新的npm 步骤一&#xff1a; 初始化npm项目&#xff0c;创建一个package.json文件 npm init -y 步骤二&#xff1a; 添加打包脚本&#xff1a;在scripts部分添加一个命令来运行webpack "scripts": {"build":…

【机器学习】TensorFlowLite安装和模型训练

运行环境 Linux&#xff0c;部分库不支持Apple芯片 做AI这部分的开发&#xff0c;还是强烈建议装个Linux双系统或虚拟机 这些比折腾Windows和Mac上的移植环境要轻松得多 安装依赖 sudo apt install libportaudio219.6.0-1.2 pip3 install tf-models-official2.3.0 pip3 in…

Lodop-批量逐个打印返回状态

文章目录 前言一、LODOP.GET_VALUE(PRINT_STATUS_OK, P_ID)二、LODOP.GET_VALUE(PRINT_STATUS_EXIST, P_ID)三、核心实现代码总结 前言 前面写过Lodop的相关文章 &#xff1a; 文章一&#xff1a;《Lodop打印控件常用指令记录》 文章二&#xff1a;《Vue3hooks快速接入Lodop打…

Docker-Confluence部署记录

启动 docker container run -v $(pwd):/var/atlassian/application-data/confluence/ --nethost -d --nameconfluence_720_20240120 confluence/confluence:7.2.0新建mysql数据库 导入破解包 atlassian-agent 参考-Confluence 破解方式&#xff08;Linux&#xff09; 按流程破…

springcloud OpenFeign服务接口调用

文章目录 代码下载地址OpenFeign简介OpenFeign使用步骤测试 OpenFeign超时控制超时设置&#xff0c;故意设置超时演示出错情况服务提供方8001故意写暂停程序服务消费方80添加超时方法PaymentFeignService服务消费方80添加超时方法OrderFeignController测试YML文件里需要开启Ope…

区间问题笔记

1、k倍区间 #include <iostream> #include<cmath> #include<vector> #include<algorithm> #include<stack> using namespace std;long long sum[100005]; // 前缀和数组 int cnt[100005]; // 记录sum[i]除k得到的余数的个数 int ans;int…

操作系统实验报告

目录 目录 实验一 一、实验结果 实验二 使用信号量实现进程互斥与同步 一、实验结果 1. 使用信号量实现有限缓冲区的生产者和消费者问题 2. 使用信号量实现读进程具有优先权的读者和写者问题 实验三 死锁和预防 一、实验要求 二、实验内容 三、实验结果 实验四 内…

js中高德地图如何自身所在城市

直接上代码 <!doctype html> <html> <head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"initial-scale1.0, user-scalableno, wi…

如何对拉索回归进行调参?

对拉索回归进行调参主要涉及确定最佳的正则化参数 λ。正则化参数 λ 控制着模型对系数的收缩程度&#xff0c;影响着模型的复杂度。选择合适的 λ 值既可以防止过拟合&#xff0c;也可以保证模型有足够的预测能力。 以下是进行拉索回归调参的一般步骤&#xff1a; 准备数据&a…