百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

jQuery(jquery库)

bigegpt 2024-08-01 11:46 8 浏览

jQuery介绍

jQuery是对JavaScript的封装,它是免费、开源的JavaScript函数库,jQuery 极大地简化了 JavaScript 编程

jQuery和JavaScript它们的作用一样,都是负责网页行为操作,增加网页和用户的交互效果的,只不过jQuery简化了JavaScript编程,jQuery实现交互效果更简单

jQuery的下载地址:

https://code.jquery.com

jQuery用法

jQuery引入

jQuery的入口函数:

我们知道使用js获取标签元素,需要页面加载完成以后再获取,我们通过使用onload事件来获取标签元素

而jQuery提供了ready函数来解决这个问题,保证获取标签元素没有问题,它的速度比原生的 window.onload 更快

jQuery选择器

jquery选择器就是快速选择标签元素,获取标签的,选择规则和css选择器一样

jQuery选择器的种类:

  1. 标签选择器是根据标签名来选择标签
  2. 类选择器是根据类名来选择标签
  3. id选择器是根据id来选择标签
  4. 层级选择器是根据层级关系来选择标签
  5. 属性选择器是根据属性名来选择标签

判断标签是否选择成功:

可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功,否则选择失败

选择集过滤

选择集过滤就是在选择标签的集合里面过滤自己需要的标签

①has(选择器名称)方法,表示选取包含指定选择器的标签

②eq(索引)方法,表示选取指定索引的标签

选择集转移

选择集转移就是以选择的标签为参照,然后获取转移后的标签

$('#box').prev(); 表示选择id是box元素的上一个的同级元素

$('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素

$('#box').next(); 表示选择id是box元素的下一个的同级元素

$('#box').nextAll(); 表示选择id是box元素的下面所有的同级元素

$('#box').parent(); 表示选择id是box元素的父元素

$('#box').children(); 表示选择id是box元素的所有子元素

$('#box').siblings(); 表示选择id是box元素的其它同级元素

$('#box').find('.myClass'); 表示选择id是box元素的class等于myClass的元素

获取和设置元素内容

获取和设置元素的内容使用: html方法

给指定元素追加html内容使用: append方法

获取和设置元素属性

获取和修改标签样式:

使用css方法可以给标签设置样式属性

获取和设置标签属性:

通过prop方法来完成

获取和设置元素的value属性:

通过val方法来完成,更加简单和方便

jQuery事件

常用事件:

click() 鼠标单击

blur() 元素失去焦点

focus() 元素获得焦点

mouseover() 鼠标进入(进入子元素也触发)

mouseout() 鼠标离开(离开子元素也触发)

ready() DOM加载完成

事件代理

事件代理:

事件代理就是使用父元素来代理子元素的事件,好处是减少事件的绑定次数,提高性能

事件代理使用场景:

使用场景当多个相同的子元素绑定同一个事件,可以使用事件代理

事件代理方法:

事件代理是使用delegate方法来完成

JavaScript对象

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数等都可以认为是对象,此外,JavaScript 允许自定义对象,对象可以拥有属性和方法

创建自定义javascript对象有两种方式:

①通过顶级Object类型来实例化一个对象

②通过对象字面量创建一个对象

JSON

(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式

采用完全独立于编程语言的文本格式来存储和表示数据,简洁和清晰的层次结构使

得 JSON 成为理想的数据交换语言

JSON的优点:

易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率

JSON的格式:

①对象格式

②数组格式

对象格式:

对象格式的JSON数据,使用一对大括号({}),大括号里面放入key:value形式的键值对,多个键值对使用逗号分隔

数组格式:

数组格式的JSON数据,使用一对中括号([]),中括号里面的数据使用逗号分隔


JSON本质上是字符串,如果在js中操作JSON数据,可以将JSON字符串转化为JavaScript对象

ajax

一次完整的请求后,浏览器会接受到html,css,js,图片等大量的数据

ajax的介绍

ajax 是 Asynchronous JavaScript and XML的简写,ajax一个前后台配合的技术,它可以让 javascript 发送异步的 http 请求,与后台通信进行数据的获取,ajax 最大的优点是实现局部刷新,ajax可以发送http请求,当获取到后台数据的时候更新页面显示数据实现局部刷新,在这里大家只需要记住,当前端页面想和后台服务器进行数据交互就可以使用ajax了


ajax的实现

jquery将它封装成了一个方法$.ajax()

我们可以直接用这个方法来执行ajax请求


ajax方法的参数说明:

url 请求地址

type 请求方式,默认是'GET',常用的还有'POST'

dataType 设置返回的数据格式,常用的是'json'格式

data 设置发送给服务器的数据,没有参数不需要设置

success 设置请求成功后的回调函数

error 设置请求失败后的回调函数

async 设置是否异步,默认值是'true',表示异步,一般不用写


ajax的简写方式:

$.ajax按照请求方式可以简写成

$.get或者$.post方式


$.get和$.post方法的参数说明:

$.get(url,data,success(data, status, xhr),dataType).error(func) $.post(url,data,success(data, status, xhr),dataType).error(func)

url 请求地址

data 设置发送给服务器的数据,没有参数不需要设置

success 设置请求成功后的回调函数

data 请求的结果数据

status 请求的状态信息, 比如: "success"

xhr 底层发送http请求XMLHttpRequest对象

dataType 设置返回的数据格式

"xml"

"html"

"text"

"json"

error 表示错误异常处理

func 错误异常回调函数

相关推荐

当Frida来“敲”门(frida是什么)

0x1渗透测试瓶颈目前,碰到越来越多的大客户都会将核心资产业务集中在统一的APP上,或者对自己比较重要的APP,如自己的主业务,办公APP进行加壳,流量加密,投入了很多精力在移动端的防护上。而现在挖...

服务端性能测试实战3-性能测试脚本开发

前言在前面的两篇文章中,我们分别介绍了性能测试的理论知识以及性能测试计划制定,本篇文章将重点介绍性能测试脚本开发。脚本开发将分为两个阶段:阶段一:了解各个接口的入参、出参,使用Python代码模拟前端...

Springboot整合Apache Ftpserver拓展功能及业务讲解(三)

今日分享每天分享技术实战干货,技术在于积累和收藏,希望可以帮助到您,同时也希望获得您的支持和关注。架构开源地址:https://gitee.com/msxyspringboot整合Ftpserver参...

Linux和Windows下:Python Crypto模块安装方式区别

一、Linux环境下:fromCrypto.SignatureimportPKCS1_v1_5如果导包报错:ImportError:Nomodulenamed'Crypt...

Python 3 加密简介(python des加密解密)

Python3的标准库中是没多少用来解决加密的,不过却有用于处理哈希的库。在这里我们会对其进行一个简单的介绍,但重点会放在两个第三方的软件包:PyCrypto和cryptography上,我...

怎样从零开始编译一个魔兽世界开源服务端Windows

第二章:编译和安装我是艾西,上期我们讲述到编译一个魔兽世界开源服务端环境准备,那么今天跟大家聊聊怎么编译和安装我们直接进入正题(上一章没有看到的小伙伴可以点我主页查看)编译服务端:在D盘新建一个文件夹...

附1-Conda部署安装及基本使用(conda安装教程)

Windows环境安装安装介质下载下载地址:https://www.anaconda.com/products/individual安装Anaconda安装时,选择自定义安装,选择自定义安装路径:配置...

如何配置全世界最小的 MySQL 服务器

配置全世界最小的MySQL服务器——如何在一块IntelEdison为控制板上安装一个MySQL服务器。介绍在我最近的一篇博文中,物联网,消息以及MySQL,我展示了如果Partic...

如何使用Github Action来自动化编译PolarDB-PG数据库

随着PolarDB在国产数据库领域荣膺桂冠并持续获得广泛认可,越来越多的学生和技术爱好者开始关注并涉足这款由阿里巴巴集团倾力打造且性能卓越的关系型云原生数据库。有很多同学想要上手尝试,却卡在了编译数据...

面向NDK开发者的Android 7.0变更(ndk android.mk)

订阅Google官方微信公众号:谷歌开发者。与谷歌一起创造未来!受Android平台其他改进的影响,为了方便加载本机代码,AndroidM和N中的动态链接器对编写整洁且跨平台兼容的本机...

信创改造--人大金仓(Kingbase)数据库安装、备份恢复的问题纪要

问题一:在安装KingbaseES时,安装用户对于安装路径需有“读”、“写”、“执行”的权限。在Linux系统中,需要以非root用户执行安装程序,且该用户要有标准的home目录,您可...

OpenSSH 安全漏洞,修补操作一手掌握

1.漏洞概述近日,国家信息安全漏洞库(CNNVD)收到关于OpenSSH安全漏洞(CNNVD-202407-017、CVE-2024-6387)情况的报送。攻击者可以利用该漏洞在无需认证的情况下,通...

Linux:lsof命令详解(linux lsof命令详解)

介绍欢迎来到这篇博客。在这篇博客中,我们将学习Unix/Linux系统上的lsof命令行工具。命令行工具是您使用CLI(命令行界面)而不是GUI(图形用户界面)运行的程序或工具。lsoflsof代表&...

幻隐说固态第一期:固态硬盘接口类别

前排声明所有信息来源于网络收集,如有错误请评论区指出更正。废话不多说,目前固态硬盘接口按速度由慢到快分有这几类:SATA、mSATA、SATAExpress、PCI-E、m.2、u.2。下面我们来...

新品轰炸 影驰SSD多款产品登Computex

分享泡泡网SSD固态硬盘频道6月6日台北电脑展作为全球第二、亚洲最大的3C/IT产业链专业展,吸引了众多IT厂商和全球各地媒体的热烈关注,全球存储新势力—影驰,也积极参与其中,为广大玩家朋友带来了...