jQuery動(dòng)畫(huà)與ajax

題目1： jQuery 中拂铡， $(document).ready()是什么意思？

當(dāng)DOM準(zhǔn)備就緒時(shí)，指定一個(gè)函數(shù)來(lái)執(zhí)行芯急。傳遞處理函數(shù)給.ready()方法，能保證DOM準(zhǔn)備好后就執(zhí)行這個(gè)函數(shù).

題目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)容

題目3.$.extend 的作用和用法?

jQuery.extend( target [, object1 ] [, objectN ] )

var object = $.extend({}, object1, object2);//object1 和object2里的屬性和值會(huì)合并到｛｝這個(gè)空對(duì)象中。當(dāng)然空對(duì)象可以是任何對(duì)象故俐。這種方法不會(huì)修改obj1的值想鹰，常用于插件開(kāi)發(fā)。

目標(biāo)對(duì)象（第一個(gè)參數(shù)）將被修改购披，并且將通過(guò)$.extend()返回杖挣。然而，如果我們想保留原對(duì)象刚陡，我們可以通過(guò)傳遞一個(gè)空對(duì)象作為目標(biāo)對(duì)象：

深拷貝：

Paste_Image.png

題目4.JQuery 的鏈?zhǔn)秸{(diào)用是什么惩妇？

$(#ct).css('color','blue').show(400).hide();

題目5.jquery 中 data 函數(shù)的作用?

在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù).

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <div>
    The values stored were
    <span></span>
    and
    <span></span>
  </div>
<script>
$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
</script>
 
</body>
</html>

此時(shí)頁(yè)面展示為：
The values stored were 16 and pizza!

題目6：

寫(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('id’,'值'); //修改
$node.attr('src');//獲取
$node.attr('src’,'值');//修改
$node.attr('title');//獲取
$node.attr('title’,'值');//修改

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

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

在$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>');

獲取蝙云、設(shè)置$node 的寬度氓皱、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距勃刨、包括邊框波材、包括外邊距)

無(wú)參數(shù)獲得寬度，高度
有參數(shù)設(shè)置寬度身隐，高度
$node.width();                // width
$node.height();               // height
$node.innerWidth();       // width+ padding
$node.innerHeight();      // height+ padding
$node.outerWidth();       // width+ padding + border
$node.outerHeight();      // height + padding + border
$node.outWidth(true);    // width ＋ padding + border + margin
$node.outHeight(true);   // height + padding + border + margin

獲取窗口滾動(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ù)一遍

$.each(function(){
    console.log($(this).text());
})

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

$ct.find('.item');

獲取$ct 里面的所有孩子

$ct.children();

對(duì)于$node埠帕，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子

$node.parent('.ct').find('.panel');

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

$node.parent('.ct').find('.panel');

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

$(this).index();

題目7：

用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)榘咨?br> 當(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)容

jQuery demo

題目8：用 jQuery ajax 實(shí)現(xiàn)如下效果。`當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁(yè)面效果預(yù)覽57

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>server-mock使用說(shuō)明</title>
<style>
  .container{
    width: 900px;
    margin: 0 auto;
  }
  ul,li,p,a {
    margin: 0;
    padding: 0;
  }
  a {
      text-decoration: none;
      color: #000;
  }
  li {
      list-style: none;
      border: 1px solid #CCC;
      padding: 10px;
      margin-bottom: 10px;
      text-align: left;
      cursor: pointer;
  }

  li:hover {
    background-color: #228C4C;
  }
  #loadmore {
      display: inline-block;
      border: 1px solid #E27272;
      border-radius: 3px;
      padding: 10px;
      color: #E27272;
  }
  .main {
      text-align: center;
  }
  .bcgcolor {
      background: #008000;
  }
</style>
</head>
<body>
  <div class="container">
  <div class="main">
        <ul id="ct">
        </ul>
        <a href="#" id="loadmore">加載更多</a>
    </div>


    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script>

    var $loadmore=$('#loadmore'),
        $ct=$('#ct'),
        pageIndex=0


$loadmore.on('click',function(){
    var lock=false;
    $.ajax({
      type: "GET",
      url: "/loadmore",
      data:{
        index:pageIndex,
        length:5

      },
      dataType: "JSON",
      success:function(ret){
        if (!lock) {
            for(i=0;i<ret.length;i++){
                var li=$('<li></li>')
                li.text(ret[i])
                $ct.append(li)
            }

            pageIndex=pageIndex+5
            lock=true; //當(dāng)數(shù)據(jù)來(lái)臨完畢的時(shí)候苍姜，再設(shè)為true牢酵，下次用戶點(diǎn)擊時(shí)正常
            /*
            var fragment=document.createDocumentFragment()
            for(i=0;i<ret.length;i++){
              var node=document.createElement('li')
              node.innerText=ret[i]
              fragment.appendChild(node);
            }
            $ct.append(fragment)
            pageIndex=pageIndex+5
            lock=true; //當(dāng)數(shù)據(jù)來(lái)臨完畢的時(shí)候，再設(shè)為true衙猪，下次用戶點(diǎn)擊時(shí)正常馍乙。
            */
        }else{
            return
        }

      },

      error:function(){
        alert('出錯(cuò)了')
      }
    });
})


    </script>
</body>
</html>

/**
 * 頁(yè)面路由，從模板渲染頁(yè)面渲染頁(yè)面, 
 * htttp://localhost:8080/user
 * 支持 ejs, jade 模板
 */
app.get('/loadmore', function(req, res) {
    var getIndex=req.query.index
    var len=req.query.length
    var data=[]
    for(var i=0;i<len;i++){
        data.push('內(nèi)容'+(parseInt(getIndex)+i))
    }

    res.send(data);

});