前端学习笔记Day02-- JavaScript(2)，jQuery，JSON，ajax案例

GYQ1

已于 2022-02-10 00:05:58 修改

阅读量407

点赞数

分类专栏：前端文章标签：前端 javascript html5

于 2022-02-09 17:29:26 首次发布

本文链接：https://blog.csdn.net/qq_53157982/article/details/122837940

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

JavaScript

获取标签元素

使用内置对象document的getElementById方法来获取页面上设置了id属性的标签元素，获取到的是一个html对象。

设置标签元素属性

读取或设置标签包裹的内容

数组的操作

数组就是一组数据的集合

javascirpt中，数组里面的数据可以是不同类型的数据，好比python里的列表

循环语句

定时器

jQuery

定义：jQuery是对JavaScript的封装，简化了JavaScript编程

优点：兼容现在的主流浏览器，增加开发效率

引入jQuery

入口函数

js获取标签需要在页面加载完成之后，使用onload函数获取，而jQuery提供了ready函数解决这个问题，速度比原生的onload快。

获取标签

jQuery选择器

选择集过滤

选择集转移

获取和修改元素内容

获取和修改元素属性

元素属性：

标签样式：height，width，background等样式相关的

标签属性：type，value，id等标签中的属性

jQuery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./jquery.min.js"></script>
    <script>
    $(function(){
        var $mybtn=$('#btn');
        var $mytext=$('#text');
        var $mydiv=$('div');
        $mybtn.click(function(){
            $(this).css({"background":"red"});
        });

        $mytext.focus(function(){
            $(this).prop({"placeholder":"获得焦点的文本框"});
        });
        
        $mytext.blur(function(){
            $(this).prop({"placeholder":"文本框"});
        });

        $mydiv.mouseover(function(){
            $(this).css({"background":"blue"});
            $(this).append("鼠标进入div");
        });
    })
    </script>
    <title>GYQ</title>
</head>
<body>
    <div>
        <input type="text" id="text" placeholder="文本框">
        <input type="button" value="按钮" id="btn">
    </div>    
</body>
</html>

事件代理

利用事件冒泡的原理，把事件加到父级上，通过判断事件来源，执行相应子元素的操作

极大减少事件绑定次数，提高性能，其次可以让新加入的子元素也拥有相同操作

JavaScript对象

一切皆对象：字符串，数值，数组，函数等都可认为是对象。此外，允许自定义对象，对象可以拥有属性和方法

JSON

JSON是一种轻量级的数据交换格式采用完全独立于编程语言的文本格式来存储和表示数据，简洁和清晰的层次结构使得JSON成为理想的数据交换语言。

优点：便于人的阅读和编写，同时也易于机器解析和生成，并有效提升网络传输效率

对象格式的JSON数据

使用一对大括号，里面放入key：value形式的键值对，用，隔开

{

“name”:"gyq",

"age":18

}

格式说明：

JOSN中的(key)属性名称和字符串值需要用双引号引起来，否则会导致错误。

数组格式的JSON数据

JSON数据转化为JavaScript对象

对象格式的JSON数据转化为JavaScript对象

数组格式的JSON对象转化为数组

ajax

ajax是一个前后台配合的技术，可以让javascript发送异步的http请求，与后台通信进行数据的获取，ajax最大的优点是实现局部刷新。

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./jquery.min.js"></script>
    <title>GYQ</title>
</head>
<body>
    <h1>天气查询</h1>
    <h3>请输入要查询的城市：</h3>
    <input type="text" id="input">
    <input type="button" value="查询" onclick="searchWeather()">
    <h3>查询结果</h3>
    <ul>
        <li>城市:<span id="city"></span></li>
        <li>天气:<span id="weather"></span></li>
        <li>温度:<span id="tem"></span></li>
        <li>风向:<span id="win"></span></li>
        <li>更新时间:<span id="update_time"></span></li>
    </ul>
    <script>
        function searchWeather(){
            var sCity=$("#input").val();
            $.ajax({
                url:'https://yiketianqi.com/free/day',
                type:"get",
                dataType:"json",
                data:{"appid":"在网址中注册获取","appsecret":"在网址中注册获取","city":sCity},
                success:function(resp){
                    $("#city").text(resp.city);
                    $("#weather").text(resp.wea);
                    $("#update_time").text(resp.update_time);
                    $("#win").text(resp.win);
                    $("#tem").text(resp.tem);                                   
                },
                error:function(){
                    alert("网络异常!");
                }
            });
        };
    </script>
</body>
</html>