JQuery中的$

news2024/11/24 14:48:04

});

当jquery.color.js动画插件加载完毕后,单击id为“go”按钮时,class为block的元素就有了颜色动画变化。


$.getJSON()

===========

$.getJSON()方法用于加载JSON文件,与$.getScript()方法的用法相同。

我们来看demo2.

demo2.html


已有评论:

test.json代码:

[

{

“username”: “张三”,

“content”: “沙发.”

},

{

“username”: “李四”,

“content”: “板凳.”

},

{

“username”: “王五”,

“content”: “地板.”

}

]

但点击“加载”按钮后,网页上看不到任何效果。虽然加载了JSON文件,但是并没有告诉JavaScript对返回的数据如何处理。为此,jQuery提供了回调函数,在回调函数里处理返回的数据。代码如下:

$(function() {

$(‘#send’).click(function() {

$.getJSON(‘test.json’,function(data) {

//data:返回的数据

});

});

});

可以在函数中通过data变量来遍历相应的数据,也可以使用迭代方式为每个项构建相应的HTML代码。虽然在这里可以使用传统的for循环来实现,但既然是讲解jQuey,那么还是使用jQuery里的方法。jQuery提供了一个通用的遍历方法$.each(),可以用于遍历对象和数组。

$.each()函数不同于jQuery对象的each()方法,它是一个全局函数,不操作jQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对象变量或内容。代码如下:

$(function(){

$(‘#send’).click(function() {

$.getJSON(‘test.json’, function(data) {

$(‘#resText’).empty();

var html = ‘’;

$.each(data, function(commentIndex, comment) {

html += ‘

’ + comment[‘username’] + ‘:

’ + comment[‘content’] + ‘

’;

});

$(‘#resText’).html(html);

});

});

});

修改后的demo2.html代码如下:


已有评论:

在上面的代码中,在jQuery部分,当返回数据成功后,首先清空id为“resText”的元素的内容,以便重新构造新的HTML,然后通过$.each()循环函数依次遍历每个项,并将遍历出来的内容构建成HTML代码拼接起来,最后将构建好的HTML添加到id为“resText”的元素中。


不仅如此,还能通过使用JSONP形式的回调函数来加载其他网站的JSON数据,例如从图片网站(http://Flicker.com)搜索汽车类别的4张最新图片。代码如下:(假设你已经对JSONP有了解——不熟悉JSONP的同学可以看我的这篇文章:关于JSON和JSONP的详解)

上面的代码中再次用到全局函数$.each()来遍历数据,因为只需要4张图片,所以当i=3的时候就需要退出循环。在$.each()函数中,如果需要退出each循环,只要返回false即可。


关于JSON和JSONP的详解


$.ajax()方法

==========

$.ajax()方法是jQuery最底层的Ajax实现。

它的结构为:

$.ajax(options)

该方法只有1个参数,但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息,参数以key/value的形式存在,所有参数都是可选的。

前面用到的$.load()$.get()$.post()$getScript()$.getJSON()这些方法,都是基于$.ajax()方法构建的,$.ajax()方法是jQuery最底层的Ajax实现,因此可以用它来代替前面的所有方法。

例如,可以使用下面的jQuery代码代替$.getScript方法:

$(function(){

$(‘#send’).click(function() {

$.ajax({

type: “GET”,

url: “test.js”,

dataType: “script”

});

});

});

再例如,可以使用以下jQuery代码来代替$.getJSON()方法:

$(function(){

$(‘#send’).click(function() {

$.ajax({

type: “GET”,

url: “test.json”,

dataType: “json”,

success : function(data){

$(‘#resText’).empty();

var html = ‘’;

$.each( data , function(commentIndex, comment) {

html += ‘

’ + comment[‘username’] + ‘:

’ + comment[‘content’] + ‘

’;

});

$(‘#resText’).html(html);

$(‘#resText’).val(html);

}

});

});

});


序列化

===

最后,讲解一下序列化元素

1.serialize()方法


做项目的过程中,表单是必不可少的,经常用来提供数据,例如注册、登录等。常规的方法是使表单提交到另一个页面,整个浏览器都会被刷新,而使用Ajax技术则能够异步的提交表单,并将服务器返回的数据显示在当前页面中。

前面在讲解$.get()$.post()方法的时候,表单的HTML代码如下:

评论:

姓名:

为了获取姓名和内容,必须将字段的值逐个添加到data参数中。代码如下:

$(‘#send’).click(function() {

$.get(“get1.php”, {

username:$(‘#username’).val(),

content:$(‘#content’).val()

},function(data,textStatus){

$(‘#resText’).html(data); //将返回的数据添加到页面上

});

});

这种方式只有少量字段的表单中,勉强还可以用,但如果表单元素越来越复杂,使用这种方式在增大工作量的同时也使表单缺乏弹性。jQuery为这一常用的操作提供了一个简化的方法——serialize()。与jQuery中其他方法一样,serialize()方法也是作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求。通过使用serialize()方法,可以把刚才的jQury代码改为如下:

$(‘#send’).click(function() {

. g e t ( " g e t 1. p h p " , .get("get1.php", .get("get1.php",(‘#form1’).serialize(),function(data,textStatus){

$(‘#resText’).html(data); //将返回的数据添加到页面上

});

});

我们可以看到使用serialize()与前面那个逐个传参的效果是一样的。

而且这种,即使在表单中再增加字段,脚本仍然能够使用,并且不需要做其他多余工作。

需要注意的是,$.get()方法中data参数不仅可以使用映射方式,如以下jQuery代码:

{

username: $(‘#username’).val(),

conent: $('#content).val()

}

也可以使用字符串方式,如以下jQuery代码:

“username=” + encodeURIComponent(KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲username').val(…(‘#content’).val())

用字符串方式时,需要注意对字符编码(中文问题),如果不希望编码带来麻烦,可以使用serialize()方法,它会自动编码。

因为serialize()方法作用于jQuery对象,所以不光只有表单能使用它,其他选择器选取的元素也都能使用它,如以下jQuery代码:

$(“:checkbox,:radio”).serialize();

把复选框和单选框的值序列化为字符串形式,只会将选中的值序列化。

2.serializeArray()方法


在jQuery中还有一个与serialize()类似的方法——serializeArray(),该方法不是返回字符串,而是将DOM元素序列化后,返回JSON格式的数据。jQuery代码如下:

var fields = $(“:checkbox,:radio”).serializeArray();

console.log(fields);

通过console.log()方法输出fields对象,然后在浏览器的F12中查看该对象。

serializeArray

既然是一个对象,那么就可以使用$.each()函数对数据进行迭代输出。代码如下:

$(function() {

var fields = $(“:checkbox,:radio”).serializeArray();

console.log(fields);

$.each(fields,function(i,field){

$(‘#results’).append(fiels.value + " , ");

});

});

3.$.param()方法


它是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化。

例如:

var obj = {a:1,b:2,c:3};

var k = $.param(obj);

alert(k); //输出a=1&b=2&c=3

TIP

===

$.ajax() 方法是 . g e t 、 .get、 .get.post 等一系列方法的基础,这些方法的底层还是调用 $.ajax() 方法。拿一小段源码来看一下:

getJSON: function(url,data,callback) {

return jQuery.get(url,data,callback,“json”);

}

get: function(url,data,callback,type) {

// shift arguments if data argument was omited

if(jQuery.isFunction(data)) {

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

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

相关文章

Linux下如何使用CMake实现动态库的封装与调用

一、动态库的封装 1.创建工程 首先创建一个qt工程(这里我采用的是ui工程) 这里选择Widget工程 名字取一个和动态库相关的即可,我这里取的UIDLL 这里选择CMake 这里我选择命名为Dynamic kits采用Qt 5.14.2 GCC 64bit,之后直接下一…

Qt常用控件——QLabel

文章目录 QLabel核心属性文本格式演示显示图片文本对齐自动换行、边距、缩进设置伙伴 QLabel核心属性 QLabel是显示类控件,可以用来显示文本和图片 属性说明textQLabel中的文本textFormat文本格式Qt::PlainText纯文本Qt::RichText富文本(支持html标签&…

html+css网页设计 旅游 雪花旅行社5个页面

htmlcss网页设计 旅游 雪花旅行社5个页面 网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作)。 获取源码 1&#…

Windows下meson编译libplacebo库

1、安装msys64,添加系统环境变量C:\msys64 2、修改msys64目录下msys2_shell.cmd文件: 去掉“rem set MSYS2_PATH_TYPEinherit” 中rem,以便于shell能继承系统环境变量,然后保存 rem To export full current PATH from environme…

ESP32 TCP通信交换数据Mixly Arduino编程

TCP通信交换数据 在ESP32与ESP32或其它局域网络内主机间传输数据时,TCP是很方便的,特别当我们连接互联网后ESPnow不能用,MQTT又不稳定发送大量的数据,同时蓝牙有其它用途时,那么学会TCP通信协议就变得十分重要。 一、…

Python数据结构集合的相关介绍

集合是一种无序、可变的数据结构,它也是一种变量类型,集合用于存储唯一的元素。集合中的元素不能重复,并且没有固定的顺序。在Python 提供了内置的 set 类型来表示集合,所以关键字set就是集合的意思。 你可以使用大括号 {} 或者 …

pytest 生成allure测试报告

allure的安装 github地址 allure资产列表 windows下载.zip,解压并配置环境变量PATH;linux下载tar.gz,解压配置; allure作为pytest插件 # 安装 pip install allure-pytest# 执行单元测试,生成allure测试数据&…

如何在内网中与阿里云服务器进行文件传输?[2024详细版]

随着云计算发展,企业和个人选择将数据存储在云端,以提高数据的安全性和可访问性。阿里云作为国内领先的云服务提供商之一,提供了多种云产品和服务。其中,云服务器ECS(Elastic Compute Service)因其灵活性和…

网络初识-相关概念

本篇主要介绍关于网络的相关概念~ 相关概念 局域网: 把几个电脑连接到一起,或者几台电脑连接到同一个路由器,就能构成局域网,局域网中的电脑可以相互通信。 广域网: 将多个局域网连接起来,就构成了范围更…

以一种访问权限不允许的方式做了一个访问套接字的尝试

System.Net.Sockets.SocketException: 以一种访问权限不允许的方式做了一个访问套接字的尝试. 近来做的一个net core的网页,突然有这样的一个提示。上网查询之后,有二种可能,1,管理员角色运行VS2022后重新编译一下项目。2&#x…

9.10javaweb项目总结

1.创建吧 这里的话,是用的那个模态背景来写的,就是可以在原有界面上进行创建。目前就只有这些内容,具体一点就是吧吧的分类弄了一下,然后还有待完善,就是贴吧,吧头像的设置,还是有点问题的&…

AutoSar AP平台的SOMEIP文档的理解笔记

1. SOMEIP报文格式 1.1 SOME/IP消息格式:头格式 1.2 SOME/IP头格式:Request ID (Client ID/Session ID) 1.3 SOME/IP头格式:Message Type [8 Bit] and Return Code [8 Bit] 1.4 SOME/IP消息格式的大小端 1.5 SOME/IP消息格式:序列…

揭秘开发者的效率倍增器:编程工具的选择与应用

文章目录 每日一句正能量前言工具介绍功能特点:使用场景:提高工作效率的方式: 效率对比未来趋势后记 每日一句正能量 这推开心窗之人,可以是亲朋好友,也可以是陌客路人,可以是德高望重的哲人名流&#xff0…

Nexpose v6.6.266 for Linux Windows - 漏洞扫描

Nexpose v6.6.266 for Linux & Windows - 漏洞扫描 Rapid7 Vulnerability Management, release Aug 21, 2024 请访问原文链接:https://sysin.org/blog/nexpose-6/,查看最新版。原创作品,转载请保留出处。 作者主页:sysin.o…

JavaScript --while案例求一个数字的阶乘

求5*4*3*2*1的值 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-w…

Probabilistic Embeddings for Cross-Modal Retrieval 论文阅读

Probabilistic Embeddings for Cross-Modal Retrieval 论文阅读 Abstract1. Introduction2. Related work3. Method3.1. Building blocks for PCME3.1.1 Joint visual-textual embeddings3.1.2 Probabilistic embeddings for a single modality 3.2. Probabilistic cross-modal…

摩托车加装车载手机充电usb方案/雅马哈USB充电方案开发

长途骑行需要给手机与行车记录仪等设备供电&#xff0c;那么&#xff0c;加装USB充电器就相继在两轮电动车上应用起来了。摩托车加装usb充电方案主要应用于汽车、电动自行车、摩托车、房车、渡轮、游艇等交通工具。提供电动车USB充电器方案/摩托车加装usb充电方案/渡轮加装usb充…

深入理解Java虚拟机:Jvm总结-垃圾收集器与内存分配策略

第三章 垃圾收集器与内存分配策略 3.1 意义 Java堆和方法区具有不确定性&#xff1a;一个接口的多个实现类、一个方法的不同条件分支需要的内存可能不一样。程序运行起来才知道到底会创建什么对象&#xff0c;创建多少个对象。动态分配内存和垃圾回收排查内存泄漏和内存溢出时…

FLBOOK一款强大的样本册制作工具

​在数字化时代&#xff0c;样本册的制作与展示已成为企业宣传和业务拓展的重要手段。一款强大的样本册制作工具&#xff0c;不仅能帮助企业高效地打造精美的样本册&#xff0c;还能提升企业的专业形象和市场竞争力。今天&#xff0c;我要向大家介绍一款名为FLBOOK的样本册制作…

【银河麒麟高级服务器操作系统】虚拟机服务器执行systemctl提示timeout——分析全过程及处理建议

了解更多银河麒麟操作系统全新产品&#xff0c;请点击访问 麒麟软件产品专区&#xff1a;https://product.kylinos.cn 开发者专区&#xff1a;https://developer.kylinos.cn 文档中心&#xff1a;https://documentkylinos.cn 现象描述 产品信息 产品名称 银河麒麟高级服务…