jQuery的文档操作(重点)/简单接触ajax(和风天气)

Posted 2021-01-11 骑驴老神仙

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery的文档操作(重点)/简单接触ajax(和风天气)相关的知识，希望对你有一定的参考价值。

一.jQuery的文档操作******

之前js中学习了js的DOM操作,也就是所谓的增删改查DOM操作。通过js的DOM的操作，大家也能发现，大量的繁琐代码实现我们想要的效果。那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档。

看一个我们JS操作DOM的例子:

var oUl = document.getElementsByTagName(‘ul‘)[0];
var oLi = document.createElement(‘li‘);
oLi.innerhtml = ‘赵云‘;
oUl.appendChild(oLi);

1.插入操作

(1).知识点1:

语法:

父元素.append(子元素)

解释：追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素

代码如下:

var oli = document.createElement(‘li‘);
oli.innerHTML = ‘哈哈哈‘;
$(‘ul‘).append(‘<li>1233</li>‘);
$(‘ul‘).append(oli);
$(‘ul‘).append($(‘#app‘));

PS:如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。

(2).知识点2:

语法:

子元素.appendTo(父元素)

解释：追加到某元素子元素添加到父元素

$(‘<li>天王盖地虎</li>‘).appendTo($(‘ul‘)).addClass(‘active‘)

PS:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素

(3).知识点3:

语法:

父元素.prepend(子元素)；

解释：前置添加, 添加到父元素的第一个位置

$(‘ul‘).prepend(‘<li>我是第一个</li>‘)

(4).知识点4:

语法:

子元素.prependTo(父元素)；

解释：前置添加, 添加到父元素的第一个位置

$(‘<a href="#">百度一下</a>‘).prependTo(‘ul‘)

(5).知识点5:

语法:

兄弟元素.after(要插入的兄弟元素)；
要插入的兄弟元素.inserAfter(兄弟元素)；

解释：在匹配的元素之后插入内容

$(‘ul‘).after(‘<h4>我是一个h3标题</h4>‘)
$(‘<h5>我是一个h2标题</h5>‘).insertAfter(‘ul‘)

(6).知识点6:

语法:

兄弟元素.before(要插入的兄弟元素)；
要插入的兄弟元素.inserBefore(兄弟元素)；

解释：在匹配的元素之后插入内容

$(‘ul‘).before(‘<h3>我是一个h3标题</h3>‘)
$(‘<h2>我是一个h2标题</h2>‘).insertBefore(‘ul‘)

2.克隆操作

语法:

$(选择器).clone();

解释：克隆匹配的DOM元素

$(‘button‘).click(function() {

  // 1.clone()：克隆匹配的DOM元素
 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
  $(this).clone(true).insertAfter(this);
})

3.修改操作

(1).知识点1:

语法:

$(selector).replaceWith(content);

解释: 将所有匹配的元素替换成指定的string、js对象、jquery对象.

//将所有的h5标题替换为a标签
$(‘h5‘).replaceWith(‘<a href="#">hello world</a>‘)
//将所有h5标题标签替换成id为app的dom元素
$(‘h5‘).replaceWith($(‘#app‘));

(2).知识点2:

语法:

$(‘<p>哈哈哈</p>‘)replaceAll(‘h2‘);

解释: 替换所有; 将所有的h2标签替换成p标签.

$(‘<br/><hr/><button>按钮</button>‘).replaceAll(‘h4‘)

4.删除操作:

(1).知识点1:

语法:

$(selector).remove();

解释：删除节点后，事件也会删除（简言之，删除了整个标签）

$(‘ul‘).remove();

(2).知识点2:

语法:

$(selector).detach();

解释：删除节点后，事件会保留

 var $btn = $(‘button‘).detach()
 //此时按钮能追加到ul中
 $(‘ul‘).append($btn)

(3).知识点3:

语法:

$(selector).empty(); 好

解释: 清空选中元素中的所有后代节点

//清空掉ul中的子元素，保留ul
$(‘ul‘).empty()

二.简单接触ajax

1.申请一个和风天气账号

2.ajax

//get请求
$.ajax({

   url:‘请求的地址‘,
   type:‘get‘,
   success:function(data){
   
   },
   error:function(err){
   }

});

3.ajax的get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text" placeholder="请输入城市">
    <input type="button" value="获取最新的天气">


    <div class="box"></div>
    <script src="jquery.js"></script>
    <script>
        $(function () {

            $(‘input[type=button]‘).click(function(event) {
                
                // ajax
                var cityVal = $(‘input[type=text]‘).val();

                $.ajax({
                    url:`https://free-api.heweather.com/s6/weather/now?location=${cityVal}&key=你的key`,
                    type:‘get‘,
                    success:function (data) {

                        console.log(data);
                        console.log(data.HeWeather6[0].now.tmp);
                        console.log(data.HeWeather6[0].now.cond_txt);

                        var tmp = data.HeWeather6[0].now.tmp;

                        var nowTmp = `${tmp}℃`;

                        $(‘.box‘).html(nowTmp)

                    },
                    error:function (err) {
                        console.log(err);
                    }
                });
            }); 
        })
    </script>
</body>
</html>

4.初始化获取和风天气数据

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

    <div class="box"></div>
    <script src="jquery.js"></script>
    <script>
        $(function () {

                //加载第一个和风天气的数据

                // setTimeout(init,2000)
                

                //函数对象
                var init = function(){
                    $.ajax({
                    url:`https://free-api.heweather.com/s6/weather/now?location=beijing&key=你的key`,
                    type:‘get‘,
                    success:function (data) {

                        console.log(data);
                        console.log(data.HeWeather6[0].now.tmp);
                        console.log(data.HeWeather6[0].now.cond_txt);

                        var tmp = data.HeWeather6[0].now.tmp;

                        var nowTmp = `${tmp}℃`;

                        $(‘.box‘).html(nowTmp)


                    },
                    error:function (err) {
                        console.log(err);
                    }
                });
                }
                
                setTimeout(init,2000)    

            });
    </script>
</body>
</html>

View Code

5.鼠标悬浮显示天气

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <a href="javascript"></a>
    <div class="box"></div>
    <script src="jquery.js"></script>
    <script>
        $(function () {

            var HeWeather6Data = null;

                //加载第一个和风天气的数据

                var init = function(){
                    $.ajax({
                    url:`https://free-api.heweather.com/s6/weather/now?location=beijing&key=你的key`,
                    type:‘get‘,
                    success:function (data) {

                        HeWeather6Data = data;

                        
                        var cityName = data.HeWeather6[0].basic.location;

                        

                        $(‘a‘).html(cityName)


                    },
                    error:function (err) {
                        console.log(err);
                    }
                });
                }

                init();

                
                $(‘a‘).mouseenter(function() {
                    

                    setTimeout(function () {

                        $(‘.box‘).show();
                        console.log(HeWeather6Data);
                        
                    }, 1000)
                });

                //函数对象
            });
    </script>
</body>
</html>

View Code

6.和风获取三天的天气

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <a href="javascript"></a>
    <div class="box">
        <ul>
            <li>
                <img src="" alt="">
            </li>
            <li>
                <img src="" alt="">
            </li>
            <li>
                <img src="" alt="">
            </li>
        </ul>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function () {

            var HeWeather6Data = null;


            var weatherArry = [];

                //加载第一个和风天气的数据

                 function init(){
                    //获取实况天气
                    getNowWeather();

                    getForecastWeather();
                }

                init();


                function getNowWeather () {
                    $.ajax({
                        url:`https://free-api.heweather.com/s6/weather/now?location=beijing&key=你的key`,
                        type:‘get‘,
                        success:function (data) {

                            HeWeather6Data = data;

                            
                            var cityName = data.HeWeather6[0].basic.location;

                            

                            $(‘a‘).html(cityName)


                        },
                        error:function (err) {
                            console.log(err);
                        }
                    });
                }

                function getForecastWeather(){
                    $.ajax({
                        url:‘https://free-api.heweather.com/s6/weather/forecast?location=beijing&key=你的key‘,
                        type:"get",
                        success:function (data) {
                            console.log(data.HeWeather6[0].daily_forecast);

                            weatherArry = data.HeWeather6[0].daily_forecast;
                            
                        }
                    })
                };


                //更新天气

                setInterval(function () {
                    getForecastWeather();

                },1000*60*60*3)

                
                $(‘a‘).mouseenter(function() {
                    

                    setTimeout(function () {

                        $(‘.box‘).show();

                        weatherArry.forEach(function(item,index){
                            console.log(item,index);
                            // item {}

                            var cond_code = item.cond_code_d;

                            $(‘.box ul li img‘).eq(index).attr(‘src‘,`./images/${cond_code}.png`);
                        })
                        

                        
                    }, 1000)
                });

                //函数对象
            });
    
    </script>
</body>
</html>

View Code

7.请求数据处理的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .content{
            display: none;
        }
    </style>
</head>
<body>

    <div class="box">alex</div>
    <div class="content">
        <!-- <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div> -->

    </div>
    <script src="jquery.js"></script>
    <script>
        
        $(function () {
    
            document.getElementsByClassName(‘box‘)[0].addEventListener(‘click‘,function () {

                alert(1);
                
            },false);
            $(‘.box‘).mouseenter(function(event) {
                $.ajax({
                        url:‘https://free-api.heweather.com/s6/weather/forecast?location=beijing&key=你的key‘,
                        type:"get",
                        success:function (data) {
                            console.log(data.HeWeather6[0].daily_forecast);
                            var datas = data.HeWeather6[0].daily_forecast

                            $(‘.content‘).show();
                            $(‘.content‘).empty();
                            datas.forEach(function(item,index) {
                                // $(‘.content .item‘).eq(index).html(item.tmp_max); 

                                $(‘<div class="item"></div>‘).appendTo(‘.content‘).html(item.tmp_max);
                            })

                            
                        }
                    })
            });

            $(‘.box‘).mouseleave(function() {
                $(‘.content‘).hide();
            });
        })
    </script>
    
</body>
</html>

View Code

以上是关于jQuery的文档操作(重点)/简单接触ajax(和风天气)的主要内容，如果未能解决你的问题，请参考以下文章

JAVAWEB学习笔记28_jqueryAjax：json数据结构jquery的ajax操作和表单校验插件

Jquery-AJAX进阶

JQuery中ajax的简单使用教程（附带实例代码）

jQuery一些问题和ajax操作

基础1.初次接触Jquery

jQuery