jQuery的文檔操作(重點)/簡單接觸ajax(和風天氣)

阿新 • • 發佈：2018-10-08

mov 追加 erro string dom 操作dom 地址兄弟元素 ace

一.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(和風天氣)

mov 追加 erro string dom 操作dom 地址兄弟元素 ace 一.jQuery的文檔操作****** 之前js中學習了js的DOM操作,也就是所謂的增刪改查DOM操作。通過js的DOM的操作，大家也能發現，大量的繁瑣代碼實現我們想要的效果。那麽jQue

jQuery的文檔操作(重點)/簡單接觸ajax(和風天氣)

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

1.插入操作

(1).知識點1:

PS:如果追加的是jquery對象那麽這些元素將從原位置上消失。簡言之，就是一個移動操作。

(2).知識點2:

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

(3).知識點3:

(4).知識點4:

(5).知識點5:

(6).知識點6:

2.克隆操作

3.修改操作

(1).知識點1:

(2).知識點2:

4.刪除操作:

(1).知識點1:

(2).知識點2:

(3).知識點3:

二.簡單接觸ajax

1.申請一個和風天氣賬號

2.ajax

3.ajax的get請求

4.初始化獲取和風天氣數據

5.鼠標懸浮顯示天氣

6.和風獲取三天的天氣

7.請求數據處理的情況

相關推薦