jQuery练习t325，从0到1

最新推荐文章于 2024-07-16 16:43:05 发布
最新推荐文章于 2024-07-16 16:43:05 发布
阅读量166 收藏
点赞数
分类专栏： jQuery JavaScript 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/modern358/article/details/113842814
版权

前端开发 JSON jQuery 数据获取 DOM操作
关键词由CSDN通过智能技术生成

info.json 

[
  {
    "name": "tom",
    "sex" : "男",
    "age" : 24
  },
  {
    "name" : "Jerry",
    "sex" : "男",
    "age" : 25
  },
  {
    "name": "John",
    "sex" : "女",
    "age": 23
  }
]

t325.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-3.5.1.js"></script>
    <script>
        //getJson方法

        $(function () {
            $("#btn1").click(function () {
                $.getJSON("info.json",function (data) {
                   var str = "";
                   $.each(data,function (index, value) {
                      str += "姓名：" + value["name"] + "<br>";
                      str += "性别：" + value["sex"] + "<br>";
                      str += "年龄：" + value["age"] + "<br>";
                      str += "<hr>";
                   });
                   $("div").html(str);
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btn1" value="获取数据">
    <div></div>
</body>
</html>

 

虾米大王
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
simpleLogInForm-Practice1-:这是练习1，从AI培训我们有关Ajax和javascript，jquery，json的知识
05-06
这是练习1，从AI培训我们有关Ajax和javascript，jquery，json的知识 此图片仅作为示例-用户输入表单的完整格式-除“地址”字段外，所有字段都是必填字段，以防用户输入丢失，它将显示一条消息。 -当您按下Submit...
jquery学习一
08-05
**jQuery学习一** jQuery是一个广泛使用的JavaScript库，它极...如果“p.1”和“t.1”包含了实践练习或示例代码，那么这将是一个很好的动手实践资源，帮助巩固理论知识。建议读者结合实际操作来深入理解和掌握jQuery。
jQuery练习t257，从0到1
虾米大王的学习历程
02-07 185
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 400px; margin: 0 auto; } h3{ .
jQuery练习t194，从0到1
虾米大王的学习历程
02-01 165
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p{ font-weight: bold; } </style> <script src="...
jQuery练习t157，从0到1
虾米大王的学习历程
01-27 173
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.5.1.js"></script> <script> $(function () { //表单属性 伪类选.
jQuery练习t162，从0到1
虾米大王的学习历程
01-27 191
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.5.1.js"></script> <script> //创建复杂元素 $(function () { .
jQuery练习t249，从0到1
虾米大王的学习历程
02-06 202
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /* 习题， 1.在jQuery 1.x版本中，如果想要为元素绑定一个事件，应该使用（） a.on() b.delegate() .
jQuery练习t301，从0到1
虾米大王的学习历程
02-14 255
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.5.1.js"></script> <script> //数组操作 //$j.grep() $(f.
jQuery练习t304，从0到1
虾米大王的学习历程
02-14 219
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.5.1.js"></script> <script> $(function () { var person .
jQuery练习t293，从0到1
虾米大王的学习历程
02-11 215
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.5.1.js"></script> <script> //查找所有兄弟元素 //.siblings(selecto.
jQuery练习t196，从0到1
虾米大王的学习历程
02-01 177
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.5.1.js"></script> <script> $(function () { //样式操作，设置多.
jquery学习资料
05-25
压缩包中的"jQuery_2.exe"可能是一个包含教程、示例代码或者交互式练习的程序，对于理解并实践jQuery的各种功能将大有帮助。通过实际操作，初学者可以更好地理解和应用所学知识。 总的来说，jQuery以其易用性和高效...
样式绑定-tab切换-练习.rar
12-31
tabs.forEach(t => t.classList.remove('active')); tabContents.forEach(content => content.classList.remove('active')); // 添加当前选中项的活动状态 tab.classList.add('active'); const index = Array....
adi-recap:ESI - ADI 回顾练习
05-31
adi-recap加巴里特 CSS 插件 JQuery Cookie Télécharger le fichier : 倾倒利用：图书馆 GSON (谷歌) Gson gson = new Gson ();Object obj = new Object ();String json = gson . toJson(obj); // Serialize obj ...
更新商品前端接口编写
weixin_55639995的博客
07-12 413
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 761
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
qq_37752382的博客
07-15 538
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
最新发布
uu0216的博客
07-16 534
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
jQuery入门指南：从基础到实践
3. 引入jQuery到项目中： - 本地引入：通过`<script>`标签，设置`src`属性指向jQuery库文件，如`js/jquery-1.11.1.js`。 - CDN引用：可以利用内容分发网络（CDN）加快加载速度。常见的CDN提供商包括百度、又拍云、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虾米大王

有你的支持，我会更有动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值