jQuery 基本操作

01-简介

    jQuery 是一个功能丰富且广泛使用的 JavaScript 库，它简化了 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作。jQuery 通过其易用的 API，使复杂的 JavaScript 编程任务变得更加简单，并且兼容各种浏览器。

1、jQuery特点

  • 简化 DOM 操作：jQuery 提供了简洁的选择器和方法，可以轻松地查找和操作 DOM 元素。
  • 跨浏览器兼容性：jQuery 处理了许多不同浏览器之间的兼容性问题，使开发者可以编写一次代码，在多个浏览器中无缝运行。
  • 事件处理：jQuery 提供了简单且强大的事件绑定和事件触发功能。
  • 动画效果：jQuery 提供了多种内置动画效果，可以轻松实现复杂的动画。
  • Ajax 支持：jQuery 使与服务器进行异步通信变得简单，方便实现无刷新页面更新。
  • 插件系统：jQuery 拥有丰富的插件库，可以扩展其功能以满足各种需求。

2、为什么要选择用jQuery，而不用原生JavaScript开发

  • 简化 DOM 操作：jQuery 提供了简洁、直观的选择器和方法，使 DOM 操作变得更加简单和直观。
  • 跨浏览器兼容性：jQuery 处理了不同浏览器之间的兼容性问题，使得开发者可以编写一次代码，并在多个浏览器中无缝运行。
  • 简化事件处理：jQuery 提供了简单且强大的事件绑定和事件委托方法，简化了事件处理的代码。
  • 丰富的动画效果：jQuery 提供了多种内置动画效果，可以轻松实现复杂的动画。
  • 强大的 Ajax 支持：jQuery 使与服务器进行异步通信变得简单，方便实现无刷新页面更新。
  • 插件系统：jQuery 拥有丰富的插件库，可以扩展其功能以满足各种需求。
  • 简洁的链式语法：jQuery 采用链式语法，可以在一次选择后连续调用多个方法，提高代码的可读性和简洁性。
总结：
尽管现代前端框架（如 React、Vue、Angular）的兴起，使得 jQuery 的使用有所减少，但在许多简单项目、快速开发、或需要跨浏览器兼容性的情况下，jQuery 仍然是一个非常有用的工具。它简化了许多常见的 JavaScript 任务，使得开发者可以更高效地编写功能强大且兼容性良好的 Web 应用程序。

02-jQuery基本使用

1、引入jQuery

     可以通过 CDN 或下载本地文件来引入 jQuery。使用 CDN 是推荐的方式，因为它可以提高加载速度。
    通过 CDN 引入 jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2、基本用法

    2.1、 选择元素 

        使用 ‘$’ 函数和选择器来选择元素。
$(document).ready(function() {
    $("p").css("color", "blue"); // 将所有段落的文字颜色改为蓝色
});

    2.2、 修改内容

$(document).ready(function() {
    $("#myParagraph").text("Hello, jQuery!"); // 修改 id 为 myParagraph 的段落的文本
});

    2.3、 添加和删除元素

$(document).ready(function() {
    $("ul").append("<li>New item</li>"); // 向所有 ul 元素添加一个新列表项
    $("li:first").remove(); // 删除第一个列表项
});

03-jQuery选择器

A. 基本选择器  

1、元素选择器： 选择所有指定元素。

$("p").css("color", "blue"); // 选择所有段落元素

2、ID选择器： 选择具有特定 ID 的元素。

$("#myId").text("Hello, World!"); // 选择 id 为 myId 的元素

3、类选择器： 选择具有特定类的元素。

$(".myClass").hide(); // 选择 class 为 myClass 的元素

4、全部选择器： 选择所有元素。

$("*").css("border", "1px solid red"); // 选择所有元素

B. 层级选择器

1、后代选择器： 选择所有符合条件的后代元素。

$("ul li").css("color", "green"); // 选择所有 ul 元素的 li 后代元素

2、子选择器： 选择所有符合条件的子元素。

$("ul > li").css("color", "blue"); // 选择所有 ul 元素的直接子元素 li

3、同级选择器： 选择所有符合条件的同级元素。

$("h2 + p").css("color", "purple"); // 选择紧接在 h2 元素后的第一个 p 元素
$("h2 ~ p").css("color", "orange"); // 选择 h2 元素之后的所有 p 元素

C. 属性选择器

1、具有指定属性的元素：

$("input[name]").css("border", "1px solid red"); // 选择所有具有 name 属性的 input 元素

2、具有指定属性值的元素：

$("input[name='username']").css("background-color", "yellow"); // 选择所有 name 属性值为 username 的 input 元素

3、属性值以特定值开头的元素：

$("input[name^='user']").css("background-color", "lightblue"); // 选择所有 name 属性值以 user 开头的 input 元素

4、属性值以特定值结尾的元素：

$("input[name$='name']").css("background-color", "lightgreen"); // 选择所有 name 属性值以 name 结尾的 input 元素

5、属性值包含特定值的元素：

$("input[name*='ser']").css("background-color", "lightcoral"); // 选择所有 name 属性值包含 ser 的 input 元素

D. 过滤选择器

1、：选择第一个元素。

$("p:first").css("color", "red"); // 选择第一个段落元素

2、：选择最后一个元素。

$("p:last").css("color", "blue"); // 选择最后一个段落元素

3、： 选择索引为偶数或奇数的元素（索引从 0 开始）。

$("tr:even").css("background-color", "lightgray"); // 选择索引为偶数的行
$("tr:odd").css("background-color", "lightblue"); // 选择索引为奇数的行

4、（index）： 选择具有指定索引的元素。

$("li:eq(2)").css("color", "purple"); // 选择索引为 2 的列表项

5、（index）： 选择索引大于或小于指定值的元素。

$("li:gt(2)").css("color", "green"); // 选择索引大于 2 的列表项
$("li:lt(2)").css("color", "red"); // 选择索引小于 2 的列表项

6、（selector）： 选择不匹配指定选择器的元素。

$("p:not(.intro)").css("color", "gray"); // 选择不具有 class 为 intro 的段落元素

7、（text）： 选择包含指定文本的元素。

$("p:contains('jQuery')").css("font-weight", "bold"); // 选择包含文本 "jQuery" 的段落元素

8、（selector）： 选择包含指定选择器的元素。

$("div:has(p)").css("border", "1px solid blue"); // 选择包含段落元素的所有 div 元素

9、 ：选择没有子元素的空元素。

$("p:empty").text("This was empty"); // 选择所有空的段落元素并添加文本

10、 ：选择至少包含一个子元素的元素。

$("p:parent").css("border", "1px solid green"); // 选择所有包含子元素的段落元素

11、 ：选择可见或隐藏的元素。

$("div:visible").css("border", "1px solid red"); // 选择所有可见的 div 元素
$("div:hidden").show(); // 显示所有隐藏的 div 元素

E. 子元素过滤器

1、 ：选择父元素的第一个或最后一个子元素。

$("p:first-child").css("color", "red"); // 选择每个父元素的第一个子元素
$("p:last-child").css("color", "blue"); // 选择每个父元素的最后一个子元素

2、（n） ：选择父元素的第 n 个子元素（从 1 开始）。

$("li:nth-child(2)").css("color", "green"); // 选择每个父元素的第二个子元素

3、 ：选择是唯一子元素的元素。

$("p:only-child").css("font-weight", "bold"); // 选择是唯一子元素的段落元素

F. 表单选择器

1、 ：选择所有表单元素。

$(":input").css("border", "1px solid blue"); // 选择所有表单元素

2、 ：选择特定类型的表单元素。

$(":text").val("New text value"); // 选择所有文本输入框并设置新值

3、 ：选择所有选中的复选框或单选按钮。

$(":checkbox:checked").css("border", "1px solid red"); // 选择所有选中的复选框

4、 ：选择所有选中的选项。

$("option:selected").css("background-color", "yellow"); // 选择所有选中的选项

5、 ：选择所有禁用或启用的表单元素。

$(":disabled").css("background-color", "lightgray"); // 选择所有禁用的表单元素

04-方法

     jQuery 提供了大量的方法来简化 DOM 操作、事件处理、动画和 Ajax 操作。

A. DOM操作方法

1、‘text()’：获取或设置元素的文本内容。

$("#myElement").text("New text content");

2、‘html()’：获取或设置元素的 HTML 内容。

$("#myElement").html("<b>Bold text</b>");

3、‘val()’：获取或设置表单元素的值。

$("input[type='text']").val("New value");

4、‘attr()’：获取或设置属性值。

$("img").attr("src", "new-image.jpg");

5、‘css()’：获取或设置 CSS 样式。

$("#myElement").css("color", "red");

6、‘addClass()’：向元素添加一个或多个类。

$("#myElement").addClass("newClass");

7、‘ removeClass()’：从元素中删除一个或多个类。

$("#myElement").removeClass("oldClass");

8、‘ toggleClass()’：在元素中切换类。

$("#myElement").toggleClass("active");

9、‘ append() ’：在元素内部的末尾插入内容。

$("ul").append("<li>New item</li>");

10、‘ prepend() ’：在元素内部的开头插入内容。

$("ul").prepend("<li>First item</li>");

11、‘ after() ’：在元素之后插入内容。

$("#myElement").after("<p>New paragraph</p>");

12、‘ before() ’：在元素之前插入内容。

$("#myElement").before("<p>New paragraph</p>");

13、‘ remove() ’：移除元素。

$("#myElement").remove();

14、‘ empty() ’：清空元素的内容。

$("#myElement").empty();

B. 事件处理方法

1、‘ click() ’： 绑定点击事件处理程序。

$("#myButton").click(function() {
    alert("Button clicked!");
});

2、‘ dblclick() ’： 绑定双击事件处理程序。

$("#myButton").dblclick(function() {
    alert("Button double-clicked!");
});

3、‘ hover() ’： 绑定鼠标悬停和离开事件处理程序。

$("#myElement").hover(
    function() {
        $(this).css("background-color", "yellow");
    },
    function() {
        $(this).css("background-color", "white");
    }
);

4、‘ on() ’： 用于事件委托，绑定多个事件。

$("#parentElement").on("click", ".childElement", function() {
    $(this).css("color", "red");
});

5、‘ off() ’： 移除事件处理程序。

$("#myButton").off("click");

C. 动画效果

1、‘ show() ’： 显示元素。

$("#myElement").show();

2、‘ hide() ’： 隐藏元素。

$("#myElement").hide();

3、‘ toggle() ’： 切换元素的显示状态。

$("#myElement").toggle();

4、‘ fadeIn() ’： 淡入显示元素。

$("#myElement").fadeIn();

5、‘ fadeOut() ’： 淡出隐藏元素。

$("#myElement").fadeOut();

6、‘ slideUp() ’： 向上滑动隐藏元素。

$("#myElement").slideUp();

7、‘ slideDown() ’： 向下滑动显示元素。

$("#myElement").slideDown();

8、‘ animate() ’： 自定义动画。

$("#myElement").animate({
    left: '250px',
    opacity: '0.5',
    height: 'toggle'
});

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

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

相关文章

智慧工厂监控可视化解决方案（160页WORD）

智慧工厂监控可视化解决方案（160页WORD）

方案介绍&#xff1a; 本智慧工厂监控可视化解决方案通过集成先进的物联网和大数据技术&#xff0c;为制造业企业提供了全面的数字化转型支持。通过实时监控、数据分析、可视化展示等功能&#xff0c;帮助企业提升生产效率、降低运营成本、优化产品质量和能源利用率&#xff0…
阅读更多...
设计模式（三）代理模式

设计模式（三）代理模式

目录 一、什么是代理模式 二、静态代理 1、定义 2、代码 2.1、接口 2.2、被代理对象 2.3、代理对象 2.4、测试 三、动态代理 1、定义 2、代码 2.1、接口 2.2、目标对象 2.3、代理对象 2.4、测试 一、什么是代理模式 代理模式(Proxy Pattern)是一种结构性模式。代理模…
阅读更多...
注塑件检测视觉检测中可能遇到的外观缺陷

注塑件检测视觉检测中可能遇到的外观缺陷

机器视觉检测注塑件不良特征有哪些&#xff1f;按照检测需求一般分为两类&#xff1a;外观缺陷和尺寸缺陷。但由于注塑件的工艺特点及原材料特性&#xff0c;注塑件外观缺陷在生产过程中出现的概率于频率远远大于尺寸缺陷。 注塑件检测视觉检测中可能遇到的外观缺陷 1、色差&a…
阅读更多...
CyberBattleSim-（内网自动化渗透）研究分析

CyberBattleSim-（内网自动化渗透）研究分析

01 背景知识介绍 CyberBattleSim介绍 CyberBattleSim是一款微软365 Defender团队开源的人工智能攻防对抗模拟工具&#xff0c;来源于微软的一个实验性研究项目。该项目专注于对网络攻击入侵后横向移动阶段进行威胁建模&#xff0c;用于研究在模拟抽象企业网络环境中运行的自动…
阅读更多...
深入研究websocket直播中signature这个参数怎么来的，模拟自己生成一个

深入研究websocket直播中signature这个参数怎么来的，模拟自己生成一个

上一节课我们已经找到了生成signature这个字段的代码位置&#xff0c;就是这个B函数&#xff0c;嗯......听起来好像有点奇怪&#xff0c;但是它确实叫B啊&#xff0c;笑死。不管了&#xff0c;看一下里面的逻辑是啥。 注意e参数的内容是&#xff1a; {"app_name":…
阅读更多...
Java基础之练习(2)

Java基础之练习(2)

需求: 键盘录入一个字符串,使用程序实现在控制台遍历该字符串 package String;import java.util.Scanner;public class StringDemo5 {public static void main(String[] args) {//录入一个字符串Scanner sc new Scanner(System.in);System.out.println("请输入一个字符串…
阅读更多...
vue3 antdv RadioButton默认值选择问题处理

vue3 antdv RadioButton默认值选择问题处理

1、先上官方文档&#xff1a; Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js 官方代码&#xff1a; <template><div><div><a-radio-group v-model:value"value1"><a-radio-button value"a…
阅读更多...
网络编程5----初识http

网络编程5----初识http

1.1 请求和响应的格式 http协议和前边学过的传输层、网络层协议不同&#xff0c;它是“一问一答”形式的&#xff0c;所以要分为请求和响应两部分看待&#xff0c;同时&#xff0c;请求和响应的格式是不同的&#xff0c;我们来具体介绍一下。 1.1.1 请求 在介绍请求之前&…
阅读更多...
助力数据跨境，最新政策解读与应用实践分享

助力数据跨境，最新政策解读与应用实践分享

6月13日&#xff0c;VERYCLOUD睿鸿股份联合深数所企业数据合规服务南山工作站、亚马逊云科技&#xff0c;在深圳南山区共同主办了一场关于《数据出境合规之路——法规解析与实践探索》研讨会。 VERYCLOUD睿鸿股份是南山大数据产业协会的副会长单位。南山大数据产业协会作为深圳…
阅读更多...
C++代码编写风格：Header-Only与声明实现分离的选择

C++代码编写风格：Header-Only与声明实现分离的选择

C代码编写风格&#xff1a;Header-Only与声明实现分离的选择 最近看到一些小伙伴问到了几个比较有趣的问题&#xff0c;这里总结一下&#xff0c;这些都是实际面试中出现过的问题&#xff0c;看看你知道多少&#xff0c;考察一下底子。 面试问题1&#xff1a;你通常编写代码的风…
阅读更多...
实战！如何从零搭建10万级 QPS 大流量、高并发优惠券系统--图文解析

实战！如何从零搭建10万级 QPS 大流量、高并发优惠券系统--图文解析

实战&#xff01;如何从零搭建10万级 QPS 大流量、高并发优惠券系统–图文解析 原文链接&#xff1a;https://juejin.cn/post/7087824893831544845 原文作者&#xff1a;字节跳动技术团队 需求背景 需要设计、开发一个能够支持十万级 QPS 的优惠券系统 什么是QPS? Queri…
阅读更多...
集采商城，智能费控4.0的核心载体

集采商城，智能费控4.0的核心载体

纵观企业费控模式进化史&#xff0c;从1.0手工报销模式到2.0线上报销模式&#xff0c;再到3.0移动报销模式&#xff0c;企业对费用管控的模式与技术虽然在不断升级迭代&#xff0c;但始终没有将消费端纳入费控体系&#xff0c;难以形成完整链路和闭环。 智能费控4.0创新提出场景…
阅读更多...
SpringBoot+Vue物流快递仓库管理系统

SpringBoot+Vue物流快递仓库管理系统

物流快递仓库管理是一项非常繁琐复杂的工作&#xff0c;每天要处理大量的单据数据&#xff0c;包括入库、出库、退库、调库等多项货物操作流程。因此&#xff0c;为提高库管工作的质量和效率&#xff0c;就必须根据仓库管理的特点开发库存物流信息系统。 本文立足于物流信息系…
阅读更多...
基于大数据的计算机就业数据可视化分析项目

基于大数据的计算机就业数据可视化分析项目

使用Python作为编程语言&#xff0c;配合MySQL数据库以及Hadoop和Spark等大数据处理工具&#xff0c;实现了数据的抓取、清洗、分析到可视化展示的整个流程。系统采用Scrapy爬虫框架从拉勾网招聘平台高效抓取计算机行业的就业数据。随后&#xff0c;通过Pandas库对数据进行了深…
阅读更多...
三人同行免单模式：社交电商的新趋势

三人同行免单模式：社交电商的新趋势

在当今社交电商日益繁荣的背景下&#xff0c;三人同行免单模式作为一种创新的购物激励机制&#xff0c;正逐渐受到消费者和品牌的青睐。该模式通过消费者之间的互动和分享&#xff0c;促进产品销售和品牌推广&#xff0c;实现消费者与品牌的双赢。 模式概述 三人同行免单模式的…
阅读更多...
Bilibili开源发布轻量级 Index 系列语言模型：2.8T 训练数据，支持角色扮演

Bilibili开源发布轻量级 Index 系列语言模型：2.8T 训练数据，支持角色扮演

Bilibili首次发布 Index 系列模型中的轻量版本&#xff1a;Index-1.9B 系列 本次开源的 Index-1.9B系列包含以下模型&#xff1a; Index-1.9Bbase:基座模型&#xff0c;具有 19 亿 非词嵌入参数量&#xff0c;在 2.8T 中英文为主的语料上预训练&#xff0c;多个评测基准上与…
阅读更多...
养猫的上班族还不买智能猫砂盆吗？自费测评好用合集来啦！

养猫的上班族还不买智能猫砂盆吗？自费测评好用合集来啦！

到底谁还在蹲点等下班然后冲回家给猫铲屎的&#xff1f;原来是以前的我啊&#xff0c;任劳任怨给猫铲屎&#xff0c;上完自己的班回家还要给猫上班&#xff0c;累死累活的真的受不了&#xff01;最后实在受不了&#xff0c;在网上看了各种智能猫砂盆的测评后果断购入&#xff0…
阅读更多...
mysql中的lead函数和over函数

mysql中的lead函数和over函数

文章目录 mysql中的lead函数和over函数作用需求场景实现方法group by分组和使用over函数分组有什么区别&#xff1f; mysql中的lead函数和over函数 作用 over函数是用来分组加排序的&#xff0c;然后等over函数分好组排好序之后&#xff0c;再使用lead函数去找当前分组内的下…
阅读更多...
JMeter详解

JMeter详解

一、线程组 作用:线程组就是控制Imeter用于执行测试的一组用户 位置:右键点击测试计划’-->添加 -->线程(用户)--> 线程组 特点: 模拟多人操作线程组可以添加多个&#xff0c;多个线程组可以并行或串行取样器(请求)和逻辑控制器必须依赖线程组才能使用线程组下可以…
阅读更多...
自动化测试：Autorunner的使用

自动化测试：Autorunner的使用

自动化测试&#xff1a;Autorunner的使用 一、实验目的 1、掌握自动化测试脚本的概念。 2、初步掌握Autorunner的使用 二、Autorunner的简单使用 autoRunner使用方法 新建项目 a) 在项目管理器空白区域,右键鼠标,选择新建项目 b) 输入项目名后,点击[确定]. 在初次打开aut…
阅读更多...
最新文章

Copyright @ 2022~2023