1， jQuery 中， $(document).ready()是什么意思？

通常我們都會(huì)強(qiáng)調(diào)，一定要把JS寫(xiě)在代碼最后，以便等所有內(nèi)容加載完成在渲染，使得不會(huì)出現(xiàn)報(bào)錯(cuò)。但是有一種辦法可以不用這么安排。

這里補(bǔ)充一下：*window.onload*這樣做雖然不用特意將JS文件放到代碼最后，但是如果頁(yè)面圖片的加載元素過(guò)多也會(huì)使得整個(gè)頁(yè)面加載時(shí)間拖得很久，這是弊端

在原生JS中：

  <html>
    <head>
      <meta charset="utf-8">
      <title>jquerytest2</title>
      <script type="text/javascript">
        window.onload = function(){
          //解析到script標(biāo)簽時(shí)還沒(méi)有body，但是window只要開(kāi)始就存在，所有這里改為window
      </script>
    </head>
  <body>
    <script type="text/javascript">
      document.body.onload = function(){
        //把所有的js都放在這個(gè)函數(shù)中，等到所有HTML加載完成才會(huì)執(zhí)行而不會(huì)報(bào)錯(cuò)
      }
    </script>

在jQuery中：

  <html>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    $(document).ready(function(){
      //把所有的js都放在這個(gè)函數(shù)中，等到所有HTML加載完成才會(huì)執(zhí)行而不會(huì)報(bào)錯(cuò)
    })
    <head>
    </head>
  </html>

簡(jiǎn)化版也可以這樣寫(xiě)：

  <html>
  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    $(function(){
      //把所有的js都放在這個(gè)函數(shù)中，等到所有HTML加載完成才會(huì)執(zhí)行而不會(huì)報(bào)錯(cuò)
    })
    <head>
    </head>
  </html>

原生onload與JS下ready的區(qū)別：

JS：ready:
在大多數(shù)情況下，只要DOM結(jié)構(gòu)已完全加載時(shí)，腳本就可以運(yùn)行。傳遞處理函數(shù)給.ready()方法，能保證DOM準(zhǔn)備好后就執(zhí)行這個(gè)函數(shù)，因此，這里是進(jìn)行所有其它事件綁定及運(yùn)行其它 jQuery 代碼的最佳地方。
原生onload:
當(dāng)頁(yè)面呈現(xiàn)時(shí)用來(lái)執(zhí)行這個(gè)事件，直到所有的東西，如圖像已被完全接收前，此事件不會(huì)被觸發(fā)。
如果執(zhí)行的代碼需要在元素被加載之后才能使用時(shí)，（例如，取得圖片的大小需要在圖片被加載完后才能知道），就需要將這樣的代碼放到 load 事件中。

2， $node.html()和$node.text()的區(qū)別?

$node.html()，返回所選擇元素內(nèi)的html內(nèi)容，包含html標(biāo)簽和文本內(nèi)容
$node.text()，返回所選擇元素內(nèi)的文本內(nèi)容，不包含html標(biāo)簽，只包含文本內(nèi)容

  <body>
    <div id="ct">
      <div class="box"></div>
      <button class="btn1">隱藏</button>
      <button class="btn2">展示</button>
    </div>
  </body>

$node.html()具體解釋
 $node.text()具體解釋

3，$.extend 的作用和用法?

extend作用：
$.extend(目標(biāo)對(duì)象，先對(duì)象，后對(duì)象，...)
后對(duì)象中有的屬性替換先對(duì)象的屬性值，沒(méi)有的屬性仍然使用先對(duì)象的屬性值。

用法：

$.extend(obj,obj1)

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
  var obj={};
  var obj1 = {
    name: 'harrisking',
    age: '23',
    sex: 'man'
  };
  $.extend(obj,obj1); //obj={ name: 'harrisking', age: '23', sex: 'man'}

$.extend(obj,obj1,obj2)

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
  var obj={};
  var obj1 = {
    name: 'harrisking',
    age: '23',
    sex: 'man'
  };
  var obj2 = {
    name: 'marry',
    sex: 'woman'
  };
  $.extend(obj,obj1,obj2); //obj={ name: 'marry', age: '23', sex: 'woman'}

var opts = $.extend({ },obj1,obj2)

  //extend非常常用的用法：

  function getMessage(obj){
    var defult = {
      name: '佚名',
      age: '未知',
      sex: '中性'
    }
    var ops = {};
    var opts = $.extend({}, defult, obj)
    //也可以$.extend(opts, defult, obj);
    console.log(opts);
  }
  getMessage();

extend(true, obj, obj1)

  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" charset="utf-8"></script>
  <script type="text/javascript">
    var obj={};
    var obj1 = {
      name: 'harrisking',
      age: '23',
      sex: 'man',
      friend:[1,2,3]
    };
    $.extend(obj,obj1);
    console.log(obj);
</script>

  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" charset="utf-8"></script>
  <script type="text/javascript">
    var obj={};
    var obj1 = {
      name: 'harrisking',
      age: '23',
      sex: 'man',
      friend:[1,2,3]
    };
    $.extend(true,obj,obj1);
    console.log(obj);
</script>

4， jQuery 的鏈?zhǔn)秸{(diào)用是什么？

jQuery鏈?zhǔn)秸{(diào)用：在對(duì)象上一次性調(diào)動(dòng)多個(gè)方法
$(this).addClass("active").siblings().removeClass("active")
因?yàn)榇蟛糠謱?duì)象方法的最后是return this，所以有了鏈?zhǔn)秸{(diào)用，簡(jiǎn)易代碼。

相關(guān)博客

5， jQuery 中 data 函數(shù)的作用

用于在匹配元素上存儲(chǔ)數(shù)據(jù)。

data.()具體介紹

6，JQuery ajax 中緩存怎樣控制?

cache (默認(rèn) : true, dataType 為 "script" 和 "jsonp" 時(shí)默認(rèn)為 false)
如果設(shè)置為 false ，瀏覽器將不緩存此頁(yè)面。注意: 設(shè)置cache
為 false將在 HEAD和GET請(qǐng)求中正常工作。它的工作原理是在GET請(qǐng)求參數(shù)中附加"_={timestamp}"（加上時(shí)間戳）

7，寫(xiě)出以下功能對(duì)應(yīng)的 jQuery 方法：

給元素 $node 添加 class active，給元素 $noed 刪除 class active

$node.addClass('active')
$node.removeClass('active')

展示元素$node, 隱藏元素$node

$node.show()
$node.hide()

獲取元素$node 的屬性: id、src、title，修改以上屬性

  獲取：
  $node.attr('id')
  $node.attr('src')
  $node.attr('tittle')

  修改：
  $node.attr('id','ct1')
  $node.attr('src','http://a.har.com')

給$node 添加自定義屬性data-src

  $node.attr('data-src','whatever')

在$ct 內(nèi)部最開(kāi)頭添加元素$node

  $ct.prepend($node)

在$ct 內(nèi)部最末尾添加元素$node

  $ct.append($node)

刪除$node

  $node.remove()

把$ct里內(nèi)容清空

  $ct.empty()

在$ct 里設(shè)置 html <div class="btn"></div>

  $ct.html('<div class="btn"></div>')
  //但是這樣將會(huì)清空掉原來(lái)的內(nèi)容

獲取、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距、包括邊框、包括外邊距)

  不包括內(nèi)邊距、外邊距、邊框：
  $node.width()
  $node.height()
  
  包括內(nèi)邊距，不包括外邊距、邊框：
  $node.innerWidth()
  $node.innerHeight()
  
  包括內(nèi)邊距、邊框，不包括外邊距：
  $node.outerWidth()
  $node.outerHeight()

  包括內(nèi)邊距、外邊距、邊框：
  $node.outerWidth(true)
  $node.outerHeight(true)

獲取窗口滾動(dòng)條垂直滾動(dòng)距離

  $(window).scrollTop()

獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離

  $node.offset()

修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px

  $node.css({'color':'red','font-size':'14px'})

遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍

  $node.each(function(){
      $(this).text($(this).text()+$(this).text())
  })

從$ct 里查找 class 為 .item的子元素

  $ct.find('.item')

獲取$ct 里面的所有孩子

  $ct.children()

對(duì)于$node，向上找到 class 為'.ct'的父親，再?gòu)脑摳赣H找到 '.panel' 的孩子

  $node.parents('.ct').find('.panel')

獲取選擇元素的數(shù)量

  $node.length

獲取當(dāng)前元素在兄弟中的排行

  $node.index()

8，完成如下要求：

用jQuery實(shí)現(xiàn)以下操作當(dāng)點(diǎn)擊$btn 時(shí)，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
當(dāng)窗口滾動(dòng)時(shí)，獲取垂直滾動(dòng)距離
當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?/li>
當(dāng)鼠標(biāo)激活 input 輸入框時(shí)讓輸入框邊框變?yōu)樗{(lán)色，當(dāng)輸入框內(nèi)容改變時(shí)把輸入框里的文字小寫(xiě)變?yōu)榇髮?xiě)，當(dāng)輸入框失去焦點(diǎn)時(shí)去掉邊框藍(lán)色，控制臺(tái)展示輸入框里的文字
當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容

網(wǎng)頁(yè)效果預(yù)覽

9，完成如下頁(yè)面效果預(yù)覽9

HTML端：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery任務(wù)二</title>
    <style media="screen">
    *{
      margin: 0;
      padding: 0;
    }
      .cot li{
        border: 1px solid #ccc;
        height:40px;
        list-style: none;
        margin: 10px 0;
        line-height: 40px;
        padding-left: 10px;
      }
      .btn{
        display: inline-block;
        width: 80px;
        height:30px;
        border:1px solid red;
        color:red;
        text-align: center;
        line-height: 30px;
        border-radius: 5px;
        cursor: pointer;
        position: absolute;
        left:50%;
        margin-left: -40px;
      }
      .btn:hover{
        background: red;
        color: white;
      }
    </style>
  </head>
  <body>
    <ul class="cot">
      <li>內(nèi)容1</li>
      <li>內(nèi)容2</li>
    </ul>
    <a class="btn">加載更多</a>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript">
    $('.cot').on('mouseenter','li',function(){
      $(this).css({
        background: 'green',
        color: 'white'
      })
    });
    $('.cot').on('mouseleave','li',function(){
      $(this).css({
        background: 'white',
        color: 'black'
      })
    });
    var index = 1
    $('.btn').on('click',function(){
      $.ajax({
        url: '/loading',
        method: 'get',
        data:{
          len:3,
          start:index
        }
      }).done(function(result){
        appendHtml(result);
        index++;
      }).fail(function(){
          console.log('error')
      })
      function appendHtml(info){
        var html = "";
        html += '<li>'+"內(nèi)容"+info.array[0]+'</li>',
        html += '<li>'+"內(nèi)容"+info.array[1]+'</li>',
        html += '<li>'+"內(nèi)容"+info.array[2]+'</li>',
        $('.cot').append(html);
      }
    })
    </script>
  </body>
</html>

后臺(tái)端：

app.get('/loading', function(req, res) {
    var loadDate = req.query.len*req.query.start;
    var array=[loadDate,loadDate+1,loadDate+2]
    res.send({
        status: 0,
        array
    });
});

10，實(shí)現(xiàn)一個(gè)天氣預(yù)報(bào)頁(yè)面，前端展示自由發(fā)揮，數(shù)據(jù)接口: http://api.jirengu.com/weather.php

(選做題目)

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

我的前端學(xué)習(xí)筆記27——jQuery動(dòng)畫(huà)與ajax

我的前端學(xué)習(xí)筆記27——jQuery動(dòng)畫(huà)與ajax

1， jQuery 中， $(document).ready()是什么意思？

2， $node.html()和$node.text()的區(qū)別?

3，$.extend 的作用和用法?

4， jQuery 的鏈?zhǔn)秸{(diào)用是什么？

5， jQuery 中 data 函數(shù)的作用

6，JQuery ajax 中緩存怎樣控制?

7，寫(xiě)出以下功能對(duì)應(yīng)的 jQuery 方法：

8，完成如下要求：

網(wǎng)頁(yè)效果預(yù)覽

9，完成如下頁(yè)面效果預(yù)覽9

10，實(shí)現(xiàn)一個(gè)天氣預(yù)報(bào)頁(yè)面，前端展示自由發(fā)揮，數(shù)據(jù)接口: http://api.jirengu.com/weather.php

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

我的前端學(xué)習(xí)筆記27——jQuery動(dòng)畫(huà)與ajax

1， jQuery 中， $(document).ready()是什么意思？

2， $node.html()和$node.text()的區(qū)別?

3，$.extend 的作用和用法?

4， jQuery 的鏈?zhǔn)秸{(diào)用是什么？

5， jQuery 中 data 函數(shù)的作用

6，JQuery ajax 中緩存怎樣控制?

7，寫(xiě)出以下功能對(duì)應(yīng)的 jQuery 方法：

8，完成如下要求：

網(wǎng)頁(yè)效果預(yù)覽

9，完成如下頁(yè)面 效果預(yù)覽9

10，實(shí)現(xiàn)一個(gè)天氣預(yù)報(bào)頁(yè)面，前端展示自由發(fā)揮，數(shù)據(jù)接口: http://api.jirengu.com/weather.php

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1， jQuery 中， $(document).ready()是什么意思？

2， $node.html()和$node.text()的區(qū)別?

3，$.extend 的作用和用法?

4， jQuery 的鏈?zhǔn)秸{(diào)用是什么？

5， jQuery 中 data 函數(shù)的作用

6，JQuery ajax 中緩存怎樣控制?

7，寫(xiě)出以下功能對(duì)應(yīng)的 jQuery 方法：

8，完成如下要求：

9，完成如下頁(yè)面效果預(yù)覽9

10，實(shí)現(xiàn)一個(gè)天氣預(yù)報(bào)頁(yè)面，前端展示自由發(fā)揮，數(shù)據(jù)接口: http://api.jirengu.com/weather.php