什么是jQuery?怎么使用?


文章目录

    • 一、jQuery是什么
    • 二、dom对象和jQuery对象
      • 1、DOM对象可以和jQuery对象相互的转换
    • 三、基本选择器
      • 1、元素选择器:根据HTML元素的名称选择元素
      • 2、ID选择器:通过元素的ID属性选择元素
      • 3、类选择器:通过元素的class属性选择元素
      • 4、通配符选择器:选择所有元素
      • 5、属性选择器:根据元素的属性选择元素
      • 6、多个属性选择器:根据多个属性选择元素
      • 7、子元素选择器:选择特定父元素的子元素
      • 8、后代选择器:选择特定元素的后代元素(不仅限于直接子元素)
      • 9、相邻兄弟选择器:选择紧接在另一元素后的元素,且二者有相同父元素
      • 10、一般兄弟选择器:选择所有在另一元素后的兄弟元素,且二者有相同父元素
      • 11、首元素选择器:选择特定父元素的第一个子元素
      • 12、末元素选择器:选择特定父元素的最后一个子元素
      • 13、奇偶元素选择器:选择特定父元素的奇数或偶数索引的子元素
      • 14、特定索引选择器:选择特定父元素的具有特定索引的子元素
      • 15、表单选择器:使用`<input>`标签的type属性值,定位DOM对象的方式。
      • 16、不是选择器:选择不匹配特定选择器的所有元素
    • 四、表单属性过滤器
      • 1、`:input`:选择所有的`<input>`、`<textarea>`、`<select>`和`<button>`元素。
      • 2、`:text`:选择所有的文本输入框
      • 3、`:password`:选择所有的密码输入框
      • 4、`:radio`:选择所有的单选按钮
      • 5、`:checkbox`:选择所有的复选框
      • 6、`:submit`:选择所有的提交按钮
      • 7、`:image`:选择所有的图像按钮
      • 8、`:reset`:选择所有的重置按钮
      • 9、`:button`:选择所有的按钮元素和类型为"button"的<input>元素
      • 10、`:file`:选择所有的文件上传元素
      • 11、`:hidden`:选择所有隐藏的元素
      • 12、`:enabled`:选择所有启用的表单元素
      • 13、`:disabled`:选择所有禁用的表单元素
      • 14、`:checked`:选择所有被选中的表单元素(如复选框、单选按钮)
      • 15、`:selected`:选择所有被选中的<option>元素
    • 五、使用each循环处理数组
    • 六、jQuery中给DOM对象绑定事件
      • 1、`$(选择器).事件名称(事件的处理函数)`
      • 2、on 事件绑定
    • 七、使用jQuery的函数,实现Ajax请求的处理。
      • 1、jQuery实现Ajax请求的处理
      • 2、$.ajax函数
      • 3、Ajax中的json结构参数说明
        • 1、async
        • 2、contentType
        • 3、data
        • 4、dataType
        • 5、error
        • 6、success
        • 7、url
        • 8、type

一、jQuery是什么

jQuery是一个JavaScript库,它封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档遍历、事件处理、动画和Ajax交互。jQuery的设计宗旨是“Write Less, Do More”,即倡导写更少的代码,做更多的事情。它具有快速、小巧且功能丰富的特点。

jQuery具有以下一些主要特点:

  • 简洁性:jQuery使用简洁的语法来操作HTML文档、处理事件、执行动画和与服务器交互。它大大简化了传统JavaScript代码的编写。
  • 跨浏览器兼容性:jQuery内部处理了浏览器的兼容性问题,使得开发者可以编写统一的代码,而无需担心不同浏览器之间的差异。
  • 丰富的插件支持:jQuery拥有庞大的插件库,这些插件可以帮助开发者实现各种复杂的功能,从表单验证到复杂的UI效果。
  • 链式操作:jQuery支持链式操作,这意味着可以对一个jQuery对象连续调用多个方法,而无需每次都重新选择元素。
  • 事件处理:jQuery提供了简洁的事件处理机制,可以方便地绑定和处理各种事件。
  • Ajax交互:jQuery简化了Ajax的使用,使得开发者可以轻松地实现与服务器的异步交互。

由于jQuery的这些优点,它被广泛用于Web开发中,无论是简单的静态页面还是复杂的Web应用,都可以看到jQuery的身影。

二、dom对象和jQuery对象

DOM对象:使用javascript的语法创建的对象叫做DOM对象,也就是js对象。

var obj = document.getElementById("txt1"); // obj是DOM对象,也叫做js对象
obj.value; // 获取DOM对象的属性,调用其方法。

jQuery对象:使用jquery语法表示对象叫做jquery对象。

注意:jquery表示的对象都是数组。

var jobj = $("#txt1"); // jobj就是使用jQuery语法表示的对象,就是jQuery对象,

它是一个数组,现在数组中就一个值。

1、DOM对象可以和jQuery对象相互的转换

DOM对象可以转为jQuery:

$(DOM对象)

jQuery对象也可以转为DOM对象:

  • 从数组中获取第一个对象,第一个对象就是DOM对象,使用[0]或者get(0)

为什么要进行DOM和jQuery的转换:目的是要使用对象的方法,或者方法。
当你是DOM对象时,可以使用DOM对象的属性或者方法,如果你要想使用jQuery提供的函数,必须是jQuery对象才可以。

三、基本选择器

jQuery提供了多种基本选择器,用于选择页面上的元素。选择器就是一个字符串,用来定位DOM对象的。定位了DOM对象,就可以通过jQuery的函数操作DOM。这些选择器基于元素的名称、ID、类名、属性以及元素在DOM树中的位置来定位元素。

以下是一些常用的jQuery基本选择器:

1、元素选择器:根据HTML元素的名称选择元素

$("p") // 选择所有的<p>元素

2、ID选择器:通过元素的ID属性选择元素

$("#myId") // 选择ID为myId的元素

3、类选择器:通过元素的class属性选择元素

$(".myClass") // 选择所有class为myClass的元素

4、通配符选择器:选择所有元素

$("*") // 选择页面上的所有元素

5、属性选择器:根据元素的属性选择元素

$("[href]") // 选择所有具有href属性的元素  
$("[href='#']") // 选择所有href属性值为'#'的元素

6、多个属性选择器:根据多个属性选择元素

$("[href][target='_blank']") // 选择同时具有href和target='_blank'属性的元素

7、子元素选择器:选择特定父元素的子元素

$("ul li") // 选择所有<ul>元素内的<li>元素

8、后代选择器:选择特定元素的后代元素(不仅限于直接子元素)

$("ul li a") // 选择所有<ul>元素内的<li>元素下的<a>元素

9、相邻兄弟选择器:选择紧接在另一元素后的元素,且二者有相同父元素

$("label + input") // 选择所有紧接在<label>元素后的<input>元素

10、一般兄弟选择器:选择所有在另一元素后的兄弟元素,且二者有相同父元素

$("form ~ input") // 选择<form>元素内的所有<input>兄弟元素

11、首元素选择器:选择特定父元素的第一个子元素

$("ul li:first-child") // 选择所有<ul>元素内的第一个<li>子元素

12、末元素选择器:选择特定父元素的最后一个子元素

$("ul li:last-child") // 选择所有<ul>元素内的最后一个<li>子元素

13、奇偶元素选择器:选择特定父元素的奇数或偶数索引的子元素

$("ul li:even") // 选择所有<ul>元素内的偶数索引的<li>子元素  
$("ul li:odd") // 选择所有<ul>元素内的奇数索引的<li>子元素

14、特定索引选择器:选择特定父元素的具有特定索引的子元素

$("ul li:eq(2)") // 选择所有<ul>元素内的第三个<li>子元素(索引从0开始)

15、表单选择器:使用<input>标签的type属性值,定位DOM对象的方式。

$(":type属性值")// 例如:
$(":text"), // 选择的是所有的单行文本框,
$(":button"), // 选择的是所有的按钮。

16、不是选择器:选择不匹配特定选择器的所有元素

$("input:not(:checked)") // 选择所有未被选中的<input>元素

这些选择器可以根据需要组合使用,以创建更复杂的选择器表达式,从而精确地定位页面上的元素。在使用jQuery选择器时,请确保文档已经加载完毕,通常将选择器代码放在$(document).ready()函数中,以确保DOM元素已经可用。

四、表单属性过滤器

在jQuery中,表单属性过滤器允许您基于表单元素的特定属性来选择元素。这些过滤器对于处理表单输入特别有用,因为它们可以根据元素的属性(如type、checked、disabled、selected等)来快速选择元素。

以下是一些常用的jQuery表单属性过滤器:

1、:input:选择所有的<input><textarea><select><button>元素。

$(":input") // 选择所有的输入元素

2、:text:选择所有的文本输入框

$(":text") // 选择所有的<input type="text">元素

3、:password:选择所有的密码输入框

$(":password") // 选择所有的<input type="password">元素

4、:radio:选择所有的单选按钮

$(":radio") // 选择所有的<input type="radio">元素

5、:checkbox:选择所有的复选框

$(":checkbox") // 选择所有的<input type="checkbox">元素

6、:submit:选择所有的提交按钮

$(":submit") // 选择所有的<input type="submit">元素

7、:image:选择所有的图像按钮

$(":image") // 选择所有的<input type="image">元素

8、:reset:选择所有的重置按钮

$(":reset") // 选择所有的<input type="reset">元素

9、:button:选择所有的按钮元素和类型为"button"的元素

$(":button") // 选择所有的<button>和<input type="button">元素

10、:file:选择所有的文件上传元素

$(":file") // 选择所有的<input type="file">元素

11、:hidden:选择所有隐藏的元素

$(":hidden") // 选择所有隐藏的元素,包括<input type="hidden">

12、:enabled:选择所有启用的表单元素

$(":enabled") // 选择所有启用的表单元素

13、:disabled:选择所有禁用的表单元素

$(":disabled") // 选择所有禁用的表单元素

14、:checked:选择所有被选中的表单元素(如复选框、单选按钮)

$(":checked") // 选择所有被选中的复选框和单选按钮

15、:selected:选择所有被选中的元素

$(":selected") // 选择所有被选中的<option>元素

这些表单属性过滤器可以与其它选择器组合使用,以构建更复杂的选择器表达式,从而精确地选择满足特定条件的表单元素。

例如,如果想要选择所有被选中的复选框并且它们的父元素是某个特定的<div>,可以这样写:

$("#myDiv :checkbox:checked") // 选择ID为myDiv的元素内的所有被选中的复选框

五、使用each循环处理数组

val,append,each这三个函数是使用最高的!

可以对数组, json,DOM数组循环处理数组, json中的每个成员都会调用一次处理函数。

var arr = { 1, 2, 3}; //数组;var json = {"name":"lisi","age":20 };var obj = $(":text");

语法:$.each( 循环的内容,处理函数 ),表示使用jQuery的each,循环数组,每个数组成员都会执行后面的“处理函数”一次。

  • $:相当于是java的一个类名
  • each:就是类中的静态方法
  • 静态方法调用,可以使用:类名.方法名称

处理函数:function(index, element)

  • index, element都是自定义的形参, 名称自定义。
  • index:循环的索引
  • element:数组中的成员

js循环数组:

for(var i=0; i<arr.length; i++){var item = arr[i]; //数组成员//操作数组成员shuchu(i, item);
}function shuchu(index, element){consol.log(index, element);
}

循环jQuery对象, jQuery对象就是DOM数组。

jQuery对象.each( function(index,element) {} )

六、jQuery中给DOM对象绑定事件

1、$(选择器).事件名称(事件的处理函数)

$(选择器):定位DOM对象, DOM对象可以有多个,这些DOM对象都绑定事件了。

事件名称:就是js中事件去掉on的部分,例如 js中的单击事件 onclick()

jQuery中的事件名称,就是click,都是小写的。

事件的处理函数:就是一个function,当事件发生时,执行这个函数的内容。

例如给id是btn的按钮绑定单击事件:

$("#btn").click(funtion(){alert("btn按钮单击了")})

2、on 事件绑定

$(选择器).on( 事件名称 , 事件的处理函数)

事件名称:就是js事件中去掉on的部分,例如js中onclick ,这里就是click。

事件的处理函数:function 定义。

<input type="button" id="btn">$("#btn").on("click", function() { 处理按钮单击 } )

七、使用jQuery的函数,实现Ajax请求的处理。

1、jQuery实现Ajax请求的处理

没有jQuery之前,使用XMLHttpRequest做Ajax ,有4个步骤。

  • 创建异步对象
  • 给异步对象绑定事件
  • 始异步请求对象
  • 使用异步对象发送请求

jQuery简化了ajax请求的处理。使用三个函数可以实现Ajax请求的处理。

  • $.ajax():jQuery中实现ajax的核心函数。
  • $.post():使用post方式做ajax请求。
  • $.get() :使用get方式发送ajax请求。

$.post()$.get() 他们在内部都是调用的 $.ajax()

2、$.ajax函数

$.ajax()参数是一个json的结构。

$.ajax( {名称:值, 名称1:1..... } ) $.ajax( {  async:true ,contentType:"application/json" ,data: {name:"lisi",age:20 },dataType:"json",error:function(){ 请求出现错误时,执行的函数 },success:function( data ) { // data 就是responseText, 是jQuery处理后的数据。},url:"bmiAjax",type:"get"})

3、Ajax中的json结构参数说明

1、async

是一个boolean类型的值,默认是true ,表示异步请求的。可以不写这个配置项,xmlHttp.open(get, url, true),第三个参数一样的意思。

2、contentType

一个字符串,表示从浏览器发送服务器的参数的类型。 可以不写。 例如你想表示请求的参数是json格式的,可以写application/json。

3、data

可以是字符串,数组,json,表示请求的参数和参数值。常用的是json格式的数据

4、dataType

表示期望从服务器端返回的数据格式。可选的有: xml , html ,text ,json

当我们使用$.ajax()发送请求时,会把dataType的值发送给服务器。那servlet能读取到dataType的值,就知道你的浏览器需要的是 json或者xml的数据,那么服务器就可以返回你需要的数据格式。

5、error

一个function ,表示当请求发生错误时,执行的函数。

6、success

一个function。表示请求状态。请求成功了,从服务器端返回了数据,会执行success指定函数

XMLHttpRequest对象当readyState==4 && status==200的时候。

7、url

请求的地址

8、type

请求方式,get或者post,不用区分大小写。 默认是get方式。

主要使用的是 url,data,dataType,success。

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

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

相关文章

MySql 实战大数据查询-(表分区实现)

一 mysql分区&#xff1a; 分区是将单个表按照某种规则划分成多个子集&#xff0c;每个子集称为一个分区。常见的分区策略包括按照时间范围、范围值、列表等进行分区。 优点&#xff1a; 查询性能更好&#xff0c;涉及分区键的查询&#xff0c;数据库引擎可以只扫描特定分区&…

易宝OA ExecuteQueryForDataSetBinary SQL注入漏洞复现

0x01 产品简介 易宝OA系统是一种专门为企业和机构的日常办公工作提供服务的综合性软件平台,具有信息管理、 流程管理 、知识管理(档案和业务管理)、协同办公等多种功能。 0x02 漏洞概述 易宝OA ExecuteQueryForDataSetBinary 接口处存在SQL注入漏洞,未经身份认证的攻击者…

Word中插入Endnote参考文献时显示乱码

近期在写文章需要插入参考文献&#xff0c;使用Endnote插入时显示乱码&#xff0c;如下图所示&#xff1a; 文章末尾显示{ADDIN EN REFILIST } 解决方法 在网上找了诸多方法尝试也没有解决&#xff0c;最终找到一篇博客介绍了一种方法&#xff1a; word选项—高级&#xff1…

openGauss学习笔记-256 openGauss性能调优-使用Plan Hint进行调优-优化器GUC参数的Hint

文章目录 openGauss学习笔记-256 openGauss性能调优-使用Plan Hint进行调优-优化器GUC参数的Hint256.1 功能描述256.2 语法格式256.3 参数说明 openGauss学习笔记-256 openGauss性能调优-使用Plan Hint进行调优-优化器GUC参数的Hint 256.1 功能描述 设置本次查询执行内生效的…

LAN和WAN, 调制解调器, 路由器,交换机 区别

LAN LAN&#xff08;Local Area Network&#xff09;是指在相对较小的地理范围内&#xff08;如办公室、学校、实验室、家庭等&#xff09;连接在一起的计算机和网络设备的集合。LAN通常由路由器、交换机、网线、无线路由器等设备组成&#xff0c;用于连接多台计算机、打印机、…

react状态管理库---zustand

一个简单的&#xff0c;快速的状态管理解决方案&#xff0c;api设计基于函数式和hooks 安装&#xff1a; npm install zustand 基础使用 让我们实现一个非常简单的计数器案例完成我们的第一个store 1- 创建一个counterStore create( ) 有三个参数&#xff1a;函数、布尔值…

Leetcode - 127双周赛

目录 一&#xff0c;3095. 或值至少 K 的最短子数组 I 二&#xff0c;3096. 得到更多分数的最少关卡数目 三&#xff0c;3097. 或值至少为 K 的最短子数组 II 四&#xff0c;3098. 求出所有子序列的能量和 一&#xff0c;3095. 或值至少 K 的最短子数组 I 本题需要知道一个知…

认识c++链表

上次发了《C链表&#xff08;上&#xff09;》&#xff0c;今天我再发一个认识c链表 C中的链表是一种常见的数据结构&#xff0c;用于存储和组织数据。链表由一系列节点组成&#xff0c;每个节点包含一个值和一个指向下一个节点的指针。链表的优点是可以在运行时动态地增加或删…

先进电气技术 —— (控制理论)何为稳定性?

一、系统稳定性 在控制理论中&#xff0c;系统稳定性是一个非常关键的概念&#xff0c;它主要涉及系统对外界扰动或内部变动的响应行为。以下是与系统稳定性相关的一些核心名词及其解释&#xff1a; 基本概念 稳定性&#xff08;Stability&#xff09; 系统稳定性是指当系统受…

Midjourney艺术家分享|By Moebius

Moebius&#xff0c;本名让吉拉德&#xff08;Jean Giraud&#xff09;&#xff0c;是一位极具影响力的法国漫画家和插画师&#xff0c;以其独特的科幻和幻想风格而闻名于世。他的艺术作品不仅在漫画领域内受到高度评价&#xff0c;也为电影、时尚和广告等多个领域提供了灵感。…

鸿蒙OS开发实例:【应用状态变量共享】

平时在开发的过程中&#xff0c;我们会在应用中共享数据&#xff0c;在不同的页面间共享信息。虽然常用的共享信息&#xff0c;也可以通过不同页面中组件间信息共享的方式&#xff0c;但有时使用应用级别的状态管理会让开发工作变得简单。 根据不同的使用场景&#xff0c;ArkT…

Redis 主从复制,哨兵模式,集群

目录 主从复制 主从复制 作用 缺陷 主从复制流程 实现Redis主从复制 哨兵模式 主从复制切换的缺点 哨兵的核心功能 哨兵模式原理 哨兵模式的作用 哨兵结构组成 故障转移机制 主节点的选举 实现哨兵模式 集群(Cluster) redis群集有三种模式&#xff0c;主从复制…

电脑硬件 -CPU

决定性能&#xff1a;CPU&#xff0c;内存&#xff0c;显卡&#xff0c;硬盘 保证性能&#xff1a;主板&#xff0c;电源&#xff0c;CPU散热器 英特尔&#xff1a;赛扬&#xff0c;奔腾&#xff0c;酷睿&#xff0c;至强&#xff08;从低到高&#xff09; 赛扬和奔腾&#…

电荷泵如何实现升压原来

电荷泵如何实现升压原来 某芯片自举栅极驱动内部原理图迪克森电荷泵 某芯片自举栅极驱动内部原理图 迪克森电荷泵 迪克森电荷泵&#xff08;Dickson Charge Pump&#xff09;是一种电压倍增器电路&#xff0c;可以将低电压升高到较高电压&#xff0c;相对于其他电压升压电路&a…

00-JAVA基础-反射机制

反射 什么是反射 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是Java语言的一个特性&#xff0c;它允许程序在运行时检查类、接口、字段和方法的信息。通过反射&#xff0c;Java代码能够动态地创建对象、调用方法、改变字段的值等&#xff0c;而无需在编译时…

【C++】每日一题 169 多数元素

给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 #include <vector>class Solution { public:int majorityElement(std::v…

java常见的数据结构|面试以及常见问题

在数据结构相关的面试中&#xff0c;面试官可能会从理论基础、实际应用、算法实现及优化等方面提问。以下是一些数据结构面试常见问题及其简要说明&#xff1a; 基础概念与原理 数据结构三要素是什么&#xff1f; 存储结构&#xff08;物理结构&#xff09;&#xff1a;数据元素…

debian的使用笔记

1. XP风格任务栏 安装 debian-live-12.5.0-amd64-xfce.iso 后&#xff0c;把下面的任务栏删除&#xff0c;把上面的任务栏移到下面&#xff0c;然后设置如下选项 2. 命令自动补全 sudo apt install bash-completion 3. 找不到命令 sudo apt install command-not-found sudo…

爬虫学习第一天

爬虫-1 爬虫学习第一天1、什么是爬虫2、爬虫的工作原理3、爬虫核心4、爬虫的合法性5、爬虫框架6、爬虫的挑战7、难点8、反爬手段8.1、Robots协议8.2、检查 User-Agent8.3、ip限制8.4、SESSION访问限制8.5、验证码8.6、数据动态加载8.7、数据加密-使用加密算法 9、用python学习爬…

计算机组成结构2

概念 存储系统 解决成本-速度-容量之前的矛盾问题 寄存器–cache–内存–硬盘–外存储 局部性原理 时间局部&#xff1a;相邻的时间访问同一个数据空间局部&#xff1a;相邻的空间地址会被连续访问 cache cpu与主存之间&#xff0c;命中cache后就不需要访问主存&#xff0c;…