JQuery && JSON

最新推荐文章于 2024-08-07 09:33:53 发布
最新推荐文章于 2024-08-07 09:33:53 发布
阅读量160 收藏
点赞数
文章标签： jquery json html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenguoao1999/article/details/120233031
版权

课程笔记Day45

  • JQuery
  • JSON

第一章 JQuery

备注：下载素材地址

https://sc.chinaz.com/tag_jiaoben/jquery.html

第01节 增删效果
1、添加操作

语法

append()  //在被选元素的结尾插入内容
prepend() //在被选元素的开头插入内容
after()   //在被选元素之后插入内容
before()  //在被选元素之前插入内容

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加功能</title>
</head>
<body>

<p>
    hello
    world
</p>

<ul>
    <li>迪丽热巴</li>
    <li>古力娜扎</li>
</ul>

<div>
    <button id="btnp_hou">点我，添加在P标签的后面</button>
    <button id="btnul_hou">点我，添加在ul标签的后面</button>

    <button id="btnp_qian">点我，添加在P标签的前面</button>
    <button id="btnul_qian">点我，添加在ul标签的前面</button>
</div>

<script src="../js/jquery-3.3.1.min.js"></script>
</body>
</html>

<script>
    $(function () {
        $("#btnp_hou").click(function () {
            $("p").append("java");
        });
        $("#btnul_hou").click(function () {
            $("ul").append("<li>马尔扎哈</li>");
        });
        $("#btnp_qian").click(function () {
            $("p").prepend("前端");
        });
        $("#btnul_qian").click(function () {
            $("ul").prepend("<li>卡特琳娜</li>");
        });
    });
</script>
2、删除操作

语法

remove()  // 删除被选元素（及其子元素）清除全部的内容，宽度和高度为0
empty()   // 从被选元素中删除子元素， 清除全部的内容，宽度和高度保持不变

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除功能</title>
</head>
<body>

<div style="background-color: #00FFFF;width: 400px;height: 100px">

    大家好,我是渣渣辉,欢迎来玩贪玩蓝月 一刀999 秒变高富帅
    <span>
        我们要玩王者荣耀...
    </span>
</div>

<br><br>
<button id="btn_remove"> 点我删除 remove </button>
<button id="btn_empty"> 点我删除 empty </button>

<script src="../js/jquery-3.3.1.min.js"></script>
</body>
</html>

<script>
    $(function () {
        $("#btn_remove").click(function () {
            $("div").remove();
        });
        $("#btn_empty").click(function () {
            $("div").empty();
        });
    });
</script>
第02节 尺寸问题
1、宽度高度

语法

width()			//获取的是元素的宽度，不包括边框和内边距
height()		//获取的是元素的高度，不包括边框和内边距

innerWidth()	//获取的是元素的宽度，包括内边距，不包括边框
innerHeight()	//获取的是元素的高度，包括内边距，不包括边框

outerWidth()	//获取的是元素的宽度，包括内边距，包括边框
outerHeight()	//获取的是元素的高度，包括内边距，包括边框

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取尺寸</title>
    <style>
        div {
            width: 400px;
            height: 100px;
            padding: 50px;
            border: 5px solid #FF9900;
        }
    </style>
</head>
<body>

<div id="divid">
    还有一周就要放假啦！~ <br>
    宽度的设置是400,高度的设置是 100 <br>
    内边距设置是50,边框是5 
</div>

<p>
    <button id="btn_width"> 获取宽度 width</button>
    <button id="btn_height"> 获取高度 height</button>
</p>

<p>
    <button id="btn_innerwidth"> 获取宽度 innerwidth</button>
    <button id="btn_innerheight"> 获取高度 innerheight</button>
</p>

<p>
    <button id="btn_outerwidth"> 获取宽度 outerwidth</button>
    <button id="btn_outerheight"> 获取高度 outerheight</button>
</p>

<span>
    展示内容：
</span>
<script src="../js/jquery-3.3.1.min.js"></script>
</body>
</html>

<script>
    $(function () {
       $("#btn_width").click(function () {
           let v = $("#divid").width();
           $("span").append(" width: "+v);
       });
    });
    $(function () {
        $("#btn_height").click(function () {
            let v = $("#divid").height();
            $("span").append(" height: "+v);
        });
    });
    $(function () {
        $("#btn_innerwidth").click(function () {
            let v = $("#divid").innerWidth();
            $("span").append(" innerWidth: "+v);
        });
    });
    $(function () {
        $("#btn_innerheight").click(function () {
            let v = $("#divid").innerHeight();
            $("span").append(" innerHeight: "+v);
        });
    });
    $(function () {
        $("#btn_outerwidth").click(function () {
            let v = $("#divid").outerWidth();
            $("span").append(" outerWidth: "+v);
        });
    });
    $(function () {
        $("#btn_outerheight").click(function () {
            let v = $("#divid").outerHeight();
            $("span").append(" outerHeight: "+v);
        });
    });
</script>
2、浏览器窗口

语法

$(document).width()    //获取到宽度
$(document).height()   //获取到高度

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取窗口尺寸</title>
</head>
<body>

<button id="btn">点我获取到窗口的尺寸</button>

<script src="../js/jquery-3.3.1.min.js"></script>
</body>
</html>

<script>
    $(function () {
        $("#btn").click(function () {
            let windowWidth = $(window).width();
            let windowHeight = $(window).height();
            let documentWidth = $(document).width();
            let documentHeight = $(document).height();
            //展示结果
            let message = "windowWidth = " + windowWidth + "\n";
            message += "windowHeight = " + windowHeight + "\n";
            message += "documentWidth = " + documentWidth + "\n";
            message += "documentHeight = " + documentHeight + "\n";
            alert(message);
        });
    });
</script>
第03节 动画效果
1、基础动画

语法介绍

1. 显示  show()
2. 隐藏  hide()
3. 淡入  fadeIn(毫秒值);
4. 淡出  fadeOut(毫秒值);
5. 滑动  slideDown(毫秒值)  slideUp(毫秒值)  slideToggle(毫秒值)

案例代码

显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示和隐藏</title>
</head>
<body>

<div id="divid">
    随便啦, 我随意，你干了。
</div>

<button id="btn_show">点我显示SHOW</button>
<button id="btn_hide">点我隐藏HIDE</button>

<script src="../js/jquery-3.3.1.min.js"></script>
</body>
</html>

<script>
    $(function () {
        //显示按钮的点击事件效果
        $("#btn_show").click(function () {
            $("#divid").show()
        });
        //隐藏按钮的点击事件效果
        $("#btn_hide").click(function () {
            $("#divid").hide()
        });
    });
</script>

淡入淡出的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出</title>
</head>
<body>

<p>
    <button id="btn_in"> 淡入 fadeIn </button>
    <button id="btn_out"> 淡出 fadeOut </button>
    <button id="btn_toggle"> 淡入淡出 fadeToggle </button>
    <button id="btn_to"> 调解透明度指定大小 </button>
</p>

<img id="picid" src="meinv.png" width="280" height="280">

<script src="../js/jquery-3.3.1.min.js"></script>
</body>
</html>

<script>
    $(function () {
        //按钮的点击事件效果 stop() 在执行当前动画之前,停止其他动画
        $("#btn_in").click(function () {
            $("#picid").stop().fadeIn(2000);
        });
        //按钮的点击事件效果 stop() 在执行当前动画之前,停止其他动画
        $("#btn_out").click(function () {
            $("#picid").stop().fadeOut(2000);
        });
        //按钮的点击事件效果 stop() 在执行当前动画之前,停止其他动画
        $("#btn_toggle").click(function () {
            $("#picid").stop().fadeToggle(2000);
        });
        //按钮的点击事件效果 stop() 在执行当前动画之前,停止其他动画
        //2000毫秒的执行时间, 达到0.3的透明度。 透明度范围在 0.0-1.0之间
        $("#btn_to").click(function () {
            $("#picid").stop().fadeTo(2000,0.3);
        });
    });
</script>

滑动的动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑动的效果</title>
</head>
<body>

<p>
<button id="btn_down">向下滑动 down</button>
<button id="btn_up">向上滑动 up</button>
<button id="btn_toggle">开关效果 toggle</button>
</p>

<div style="background-color: #FF9900;text-align: center">
    <img id="picid" src="meinv.png" style="display: none">
</div>

<script src="../js/jquery-3.3.1.min.js"></script>

</body>
</html>

<script>
    $(function () {
        //下滑展示
        $("#btn_down").click(function () {
            $("#picid").stop().slideDown(2000);
        });
        //上滑隐藏
        $("#btn_up").click(function () {
            $("#picid").stop().slideUp(2000);
        });
        //开关效果：下滑展示,上滑隐藏
        $("#btn_toggle").click(function () {
            //可以禁用按钮
            $("#btn_toggle").prop("disabled",true);
            $("#picid").stop().slideToggle(2000,function () {
                //执行完毕，可用按钮
                $("#btn_toggle").prop("disabled",false);
            });
        });
    });
</script>
2、自定义动画

语法介绍

$("选择器名称").animate({css的参数},速度值,回调函数);    //回调函数,动画执行完毕,可以完成什么操作

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义动画效果</title>
</head>
<body>

<p>
    <button id="btn1">动画效果1</button>
    <button id="btn2">动画效果2</button>
</p>

<img id="picid" src="meinv.png" width="140" height="140" style="position: absolute">

<script src="../js/jquery-3.3.1.min.js"></script>
</body>
</html>

<script>
    $(function () {
        $("#btn1").click(function () {
            //左边的距离是 10px
            //底部的距离是 50px
            $("#picid").animate({
                left: '10px',
                bottom: '50px'
            }, 2000, function () {
                alert("Over")
            })
        });
        $("#btn2").click(function () {
            //宽度增加 100px
            //高度增加 100px
            //透明度调整到 0.4
            $("#picid").animate({
                width: '+=100px',
                height: '+=100px',
                opacity: '0.4',
            }, 2000, function () {
                alert("Over")
            })
        });
    });
</script>

第二章 JSON

第01节 基础理论
1、概念说明
1. 什么是JSON ?
	JSON 就是一种特殊格式的字符串， 主要用于网络传输当中。

2. 例如:
	服务器 ---返回数据（String字符串）---->客户端(浏览器)
	对于字符串来说, 设置为指定的方式, 叫做 JSON 格式

3. 关于JSON解析方式:
	A. Java自带的JSON解析方式： JSONObject 和 JSONArray  (了解)
	B. JacksonJSON 解析方式:  (重点)
	C. fastJSON  解析方式: 阿里巴巴的(不用了，有人翻阅源码发现存在问题)
	D. Gson 解析方式: 安卓程序开发,Google 旗下的
2、相关jar包准备

对于 JacksonJSON 主要有三个 jar 包需要准备

jackson-annotations-2.2.1.jar
jackson-core-2.2.1.jar
jackson-databind-2.2.1.jar

对于 gson 来说，主要只有一个 jar 包需要准备

gson-2.7.jar
第02节 写数据操作
1、写数组类型的数据
import com.fasterxml.jackson.databind.ObjectMapper;

import java.util.ArrayList;

//JacksonJSON 生成 JSON 数据
public class Test01 {

    public static void main(String[] args) throws Exception {
        //定义一个集合对象,里面存放的是字符串。
        ArrayList<String> array = new ArrayList<>();
        //存放数据
        array.add("迪丽热巴");
        array.add("古力娜扎");
        array.add("马尔扎哈");
        //需要去创建 ObjectMapper 的对象
        ObjectMapper mapper = new ObjectMapper();
        //生成JSON对象
        String json = mapper.writeValueAsString(array);
        //展示结果
        System.out.println(json);
 
    }
}

// ["迪丽热巴","古力娜扎","马尔扎哈"]
2、写对象类型的数据

学生类

public class Student {

    private String name;
    private int age;
    private String gender;
	//省略部分内容.....
}

测试类

import com.fasterxml.jackson.databind.ObjectMapper;

//采用对象，生成JSON数据
public class Test02 {

    
    public static void main(String[] args) throws Exception {

        //创建的对象
        Student stu = new Student("静姐",18,"女");

        //准备JSON写数据
        ObjectMapper mapper = new ObjectMapper();
        //写对象
        String json = mapper.writeValueAsString(stu);
        System.out.println(json);
    }
}

//{"name":"静姐","age":18,"gender":"女"}
3、写综合类型的数据

学生类

public class Student {

    private String name;
    private int age;
    private String gender;
	//省略部分内容.....
}

测试类

import com.fasterxml.jackson.databind.ObjectMapper;

import java.util.ArrayList;
import java.util.HashMap;

//写综合类型的数据
public class Test03 {

    public static void main(String[] args) throws Exception{

        ArrayList<Student> array = new ArrayList<>();
        array.add(new Student("迪丽热巴",23,"女"));
        array.add(new Student("古力娜扎",24,"女"));
        array.add(new Student("马尔扎哈",88,"男"));
        //再来创建一个集合,准备存放数据
        HashMap<String,Object> map = new HashMap<>();
        map.put("message",array);
        map.put("status",200);
        //创建ObjectMapper的对象,准备写数据
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(map);
        System.out.println(json);
    }
}

//{"message":[{"name":"迪丽热巴","age":23,"gender":"女"},{"name":"古力娜扎","age":24,"gender":"女"},{"name":"马尔扎哈","age":88,"gender":"男"}],"status":200}
第03节 读数据操作
1、读数组类型的数据
public class Test01 {

    //["迪丽热巴","古力娜扎","马尔扎哈"]
    public static void main(String[] args) throws Exception {

        File f = new File("JavaWebDay23\\dir\\对象数据.txt");

        //创建ObjectMapper的对象
        ObjectMapper mapper = new ObjectMapper();
        //直接调用读数据的方法
        JavaType type = mapper.getTypeFactory().constructParametricType(List.class, String.class);
        List<String> mList = mapper.readValue(f, type);
        //输出结果
        mList.forEach(System.out::println);
    }
}
2、读对象类型数据

学生类

public class Student {

    private String name;
    private int age;
    private String gender;
	//省略部分内容.....
}

测试类

public class Test02 {

    //{"name":"静姐","age":18,"gender":"女"}
    public static void main(String[] args) throws Exception {
        File f = new File("JavaWebDay23\\dir\\对象数据.txt");
        //创建ObjectMapper的对象
        ObjectMapper mapper = new ObjectMapper();
        //直接调用读数据的方法
        Student stu = mapper.readValue(f, Student.class);
        //输出结果
        System.out.println(stu);
    }
}
为什么暴躁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[Jquery]Jquery AJAX post提交json示例
德仔
01-23 1万+
下面是html请求web服务器api接口的示例，是post发送json方式请求。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="
使用Jquery JSON所需 jar包 （含8个jar文件和jquery,js文件）
05-14
JSON是客服端与服务器进行交互常用的数据格式，与AJAX，JQuery等一起使用，达到异步通信的目的。这里把就jQuery.js文件和8个jar包文件打包在一起，供大家使用。其中有8个jar包文件，一般会使用其中6个，javadoc和sources对使用JSON或是JQuery没有任何影响，只是给开发者提供的帮助源文件。在项目中可以不引入。
HTML学习教程
dongliqiang2006的专栏
07-06 1107
一、表格的基本构架          表格是在论坛做帖的重要武器。因为论坛提供给用户操作的区域是非常有限的，用户只能在论坛程序框架好的body 区域里的某个区域施展身手，不能修改body的背景色，更不能介入head的定义，因此，诸如让自己的帖子有底色、底图之类的修饰，用户只能通过表格来实现。表格是一个可自定义的容器，因而它就是我们用以实现帖子构设的利器。<br />    把表格称作容器源于表格的装载特性。表格是用于装载数据的，与我们现实中所看到和理解的表格非常一致。我们在Word和Excel里都接触过
6.HTML基础——br标签
Veronnit的博客
07-05 5797
文章目录br标签作用格式注意点 br标签 作用 在HTML中实现换行 格式 < br > 注意点 多个br标签可以连续使用，使用多少个br标签就会换多少行； 由于HTML的作用就是用来给文本添加语义，而br标签的语义是不另起段落换行，而在企业开发中一般情况下需要换行都是因为需要另起一段，所以在企业开发中很少使用br标签； 如果是没有描述完的，但需要换行就用< br >;如果这一段已经描述完了，需要换行，就用< p > ...
jquery.json.js使用
极客神殿
01-04 6168
死亡并不可怕，可怕的是你没有真正活过。依赖Jquery,以下是jquery.json代码:(function (factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery'], factory); } else if (typeof export
jquery JSON的解析方式
u013681658的博客
07-04 522
原文地址：JSON的解析方式">jquery JSON的解析方式作者：Z战士 第一次用JSON作为jquery异步请求的传输对象，结果在jquery请求后返回的结果是字符串还是json对象上折腾了半天。等到问题解决了，也大致明白怎么个意思了，归根结底还是对jquery对相关json对象获取的理解有所偏差。 这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式，对于利用JSONObje
jquery 发送 json
weixin_52026996的博客
06-21 987
json
jQuery调用json文件
liqiyu2014的博客
03-22 1243
jQuery调用json
jQuery入门（五）Ajax和json
kong7906928的博客
08-01 1027
Ajax使用 和 json简介
jquery & json
05-27
**jQuery与JSON** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。而JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也...
formPlugin:一个基于jQuery && json2的表单数据json方式提交的插件
06-20
formPlugin based on jQuery and json2.Simple form submit plugin based on jQuery 1.8.x && json2.jsSupport Firefox, Chrome, IE 8 && high version of IEThis plugin build under utf-8 encoding environmentYou...
1.Javascript & jQuery & Ajax & JSON
01-04
JavaScript、jQuery、Ajax和JSON是Web开发中的四个关键概念，它们在构建动态、交互式的网页应用中发挥着重要作用。下面将分别对这四个主题进行详细阐述。 **JavaScript** 是一种轻量级的脚本语言，主要用于客户端的...
JQuery&JAVA JSON互转
08-10
在JQuery中，`$.getJSON()`函数用于从服务器获取JSON数据，`$.ajax()`或`$.post()`也可以配合`dataType: 'json'`选项来请求和解析JSON。`$.parseJSON()`方法用于将JSON字符串解析为JavaScript对象，但此方法在...
jQuery Json v2.6.0
09-18
《jQuery JSON v2.6.0详解》 在Web开发领域，jQuery库以其简洁的API和强大的功能，深受开发者喜爱。而JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，更是广泛应用于数据传输。当这两者结合，就...
jquery json html 插件,jQuery Json高亮插件json-viewer.js使用方法详解
weixin_34294809的博客
06-21 1094
本文主要为大家详细介绍了jQuery Json数据格式排版高亮插件json-viewer.js的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解1.插件介绍：jquery.json-viewer.js是一款查看json格式数据的jquery插件。它可以将混乱的json数据漂亮的方式展示在...
jquery字符串&Json互转
夏天龙的博客
01-26 456
json字符串转json对象：jQuery.parseJSON(jsonStr); json对象转json字符串：JSON.stringify(jsonObj); IE中可能对unicode使用“\uXXXX”格式来编码，可以使用如下来解码： function unicode2Char(str) { return (str.replace(/\\/g, "%"));
docker 好用的加速器
最新发布
xiaogg3678的专栏
08-07 251
docker 好用的加速器
Python打开JSON/CSV文件的正确方式
splendid_java的专栏
08-06 475
我们在使用python的过程中，经常需要它完成一些数据处理的工作，其中尤以json/csv文件为常见。今天，博主针对异常UniCodeDecodeError进行试验，因为这个是新手最容易犯错的地方。针对，博主提供了错误和正确的示例，相信能够从中获取一些帮助。
jquery json
10-11
要使用jQuery解析JSON数据，可以使用`$.parseJSON()`方法。该方法接受一个JSON字符串作为参数，并返回一个JavaScript对象。 以下是一个使用jQuery解析JSON数据的示例: ```javascript var jsonStr = '{"name":"John...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值