jquery.ajax

jQuery 中鞍陨， $(document).ready()是什么意思植阴？

可以簡單理解為頁面加載完成后執(zhí)行 $(document).ready()內(nèi)的代碼。

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

$node.html()獲取的是元素的html結(jié)構(gòu)
$node.text()獲取的是元素的文本

$.extend 的作用和用法?

jQuery.extend( target [, object1 ] [, objectN ] )
描述: 將兩個(gè)或更多對象的內(nèi)容合并到第一個(gè)對象,用于擴(kuò)展對象。
當(dāng)我們提供兩個(gè)或多個(gè)對象給$.extend()察净，對象的所有屬性都添加到目標(biāo)對象（target參數(shù)）。
如果只有一個(gè)參數(shù)提供給$.extend()盼樟，這意味著目標(biāo)參數(shù)被省略氢卡。在這種情況下，jQuery對象本身被默認(rèn)為目標(biāo)對象晨缴。這樣译秦，我們可以在jQuery的命名空間下添加新的功能。

默認(rèn)情況下，第一個(gè)參數(shù)會(huì)被修改诀浪，如果我們需要保留原對象棋返，那么可以傳遞一個(gè)空對象作為目標(biāo)對象：

var object = $.extend({}, object1, object2);

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

在一條代碼中對指定對象按順序調(diào)用多種方法雷猪，節(jié)省代碼量睛竣，提高代碼的效率。

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

data函數(shù)的作用是在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù) 或返回匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲(chǔ)的值求摇。
當(dāng)參數(shù)只有一個(gè)key的時(shí)候射沟，為讀取該jQuery對象對應(yīng)DOM中存儲(chǔ)的key對應(yīng)的值，值得注意的是与境，如果瀏覽器支持HTML5验夯，同樣可以讀取該DOM中使用 data-[key] = [value] 所存儲(chǔ)的值。
當(dāng)參數(shù)為兩個(gè)時(shí)摔刁，為像該jQuery對象對應(yīng)的DOM中存儲(chǔ)key-value鍵值對的數(shù)據(jù)挥转。

寫出以下功能對應(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('title');

$node.attr('id', value);
$node.attr('src', value);
$node.attr('title', value);

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

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

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

$ct.prepend($node)

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

$ct.apend($node)

刪除$node

$node.remove()

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

$ct.empty();
$node.html('');

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

$ct.html('<div class="btn"></div>');

獲取拗引、設(shè)置$node 的寬度借宵、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距矾削、包括邊框壤玫、包括外邊距)

// 獲取內(nèi)容寬度和高度
$node.width();
$node.height();

// 獲取內(nèi)容寬度和高度（包括padding，但不包括border）
$node.innerWidth();
$node.innerHeight();

// 獲取內(nèi)容寬度和高度（包括padding哼凯，border和可選的margin）
$node.outerWidth();
$node.outerHeight();

// 獲取內(nèi)容寬度和高度（包括padding欲间，border，margin）
$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,fontSize:'14px'})

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

var str = $node.text() + $node.text()
$node.text(str)

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

$ct.find('.item')

獲取$ct 里面的所有孩子

$ct.children();

對于$node嘱能，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子

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

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

$('#id').length

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

$('#id').length

demo

前端代碼

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>來看新聞啦</title>
  <link rel="stylesheet" type="text/css" >
  <style>
    ul,li{
      list-style: none;
    }
    html,body,h2,p,ul,li{
      margin: 0;
      padding: 0;
    }
    .ct{
      width: 500px;
      margin: 0 auto;
    }
    .item:first-child{
      margin-top: 20px;
    }
    .item{
      padding: 10px;
    }
    .item:after{
      content: '';
      display: block;
      clear: both;
    }
    .item .thumb img{
      width: 160px;
      height: 100px;
      float: right;
      margin-top: 26px;
    }
    .item h2{
      color: #7B7171;
      font-size: 18px;
    }
    .item p{
      font-size: 12px;
      color: #BABBB9;
      margin-top: 10px;
    }
    span{
      color: #448aff;
      font-size: 12px;
      margin-bottom: 3px;
      line-height: 23px;
    }
    #loadMore{
      width: 120px;
      border: 1px solid blue;
      padding: 0 20px;
      text-align: center;
      line-height: 28px;
      margin: 10px auto;
      background: white;
    }
    a{
      text-decoration: none;
      color: blue;
    }
    .last{
      width: 500px;
      border: 1px solid;
      text-align: center;
      margin-bottom: 200px;
      margin-top: 100px;
    }
  </style>
</head>
<body>
<div class="ct">
  <ul class="news">
    <!--<li class="item">-->
      <!--< a href=" ">-->
        <!--<div class="thumb">-->
          <!--![十九大召開在即](http://upload-images.jianshu.io/upload_images/6888710-821c8059a5ed6470?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)-->
          <!--<span class='icon'><i class="iconfont icon-time"></i>  xx分鐘前</span>-->
          <!--<h2>十九大召開在即 9張圖讀懂18次黨代會(huì)“極簡史”</h2>-->
          <!--<p>人民日報(bào)</p >-->
        <!--</div>-->
      <!--</ a>-->
    <!--</li>-->
  </ul>
  <button id="loadMore">加載更多</button>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
  var pageIndex = 0;
  $('#loadMore').on('click', function(){
    $.get('/getNews',{page: pageIndex}).done(function (event) {
      if(event.status ===0){
        pageIndex ++;
        appendHtml(event.data);
      }else{
        console.log('新聞出錯(cuò)了')
      }
    }).fail(function(){
      console.log('系統(tǒng)異常');
    });
  });
  function appendHtml(news){
    if(news.length === 0){
      $('#loadMore').remove();
      $('.ct').append('<div class="last">沒有更多新聞了~</div>')
    }
    var html = '';
    $.each(news, function(){
      html += '';
      html += '<li class="item">';
      html += '< a href="' + this.href + '">';
      html += '<div class="thumb">';
      html += '![](' + this.img + ') ';
      html += '<span>' + '<i class="iconfont icon-time"></i>' + '  ' + this.time + '</span>';
      html += '<h2 class="card-title">' + this.title + '</h2>';
      html += '<p>' + this.address + '</p >';
      html += '</div></ a></li>';
    });
    $('.news').append(html);
  }
  $(document).ready($('#load-more').trigger('click'));
</script>
</body>
</html>

后端代碼

app.get('/getNews', function (req, res) {
    var news = [{
        link: 'https://xw.qq.com/zt/2017090112018831/NEW2017090112018831',
        img: 'https://inews.gtimg.com/newsapp_ls/0/2156536836_150120/0',
        time: '30分鐘前',
        title: '十九大召開在即 9張圖讀懂18次黨代會(huì)“極簡史”',
        address: '人民日報(bào)'
    },
        {
            link: 'https://xw.qq.com/TWF/20171013026598/TWF2017101302659802',
            img: 'https://inews.gtimg.com/newsapp_bt/0/2156638961/1000',
            time: '40分鐘前',
            title: '臺(tái)風(fēng)“卡努”向南海趨近 或在海南廣東沿海登陸',
            address: '海南日報(bào)'
        },
        {
            link: 'https://xw.qq.com/cmsid/20171011A02WHP00',
            img: 'https://inews.gtimg.com/newsapp_bt/0/2113010892/1000',
            time: '50分鐘前',
            title: '又一次重大跨越虱疏，展望中俄聯(lián)合研制的CR929寬體客機(jī)',
            address: '河北日報(bào)'
        },
        {
            link: 'https://xw.qq.com/cmsid/20171013A015H900',
            img: 'https://inews.gtimg.com/newsapp_bt/0/2156579236/1000',
            time: '60分鐘前',
            title: '倆美國人在敘被扣惹骂，求助美軍特種部隊(duì)不僅被拒還遭虐待',
            address: '神州日報(bào)'
        },
        {
            link: 'https://xw.qq.com/zt/2017090112018831/NEW2017090112018831',
            img: 'https://inews.gtimg.com/newsapp_ls/0/2156536836_150120/0',
            time: '1小時(shí)前',
            title: '十九大召開在即 9張圖讀懂18次黨代會(huì)“極簡史”',
            address: '北京日報(bào)'
        },
        {
            link: 'https://xw.qq.com/zt/2017090112018831/NEW2017090112018831',
            img: 'https://inews.gtimg.com/newsapp_ls/0/2156536836_150120/0',
            time: '1小時(shí)前',
            title: '十九大召開在即 9張圖讀懂18次黨代會(huì)“極簡史”',
            address: '長沙日報(bào)'
        },
        {
            link: 'https://xw.qq.com/NEW/20171013007314/NEW2017101300731403',
            img: 'https://inews.gtimg.com/newsapp_bt/0/2156314484/1000',
            time: '2小時(shí)前',
            title: '泰國總理見完特朗普，就宣布購買了中國坦克',
            address: '海外網(wǎng)'
        },
        {
            link: 'https://xw.qq.com/cmsid/20171012A01K7S00',
            img: 'https://inews.gtimg.com/newsapp_bt/0/2152413721/1000',
            time: '3小時(shí)前',
            title: '中國船偵察關(guān)島附近水文做瞪，美軍只能遠(yuǎn)遠(yuǎn)觀望',
            address: '中國新聞網(wǎng)'
        }
    ];

    var pageIndex = req.query.page;
    var newsLength = 2;

    var retNews = news.slice(pageIndex * newsLength, pageIndex * newsLength + newsLength);

    res.send({
        status: 0,
        data: retNews
    });
});

預(yù)覽

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末对粪，一起剝皮案震驚了整個(gè)濱河市右冻，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌著拭，老刑警劉巖纱扭，帶你破解...
沈念sama閱讀 217,084評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異儡遮，居然都是意外死亡乳蛾，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,623評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門鄙币，熙熙樓的掌柜王于貴愁眉苦臉地迎上來肃叶，“玉大人，你說我怎么就攤上這事十嘿∫虿眩” “怎么了？”我有些...
開封第一講書人閱讀 163,450評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵绩衷，是天一觀的道長蹦魔。經(jīng)常有香客問我，道長咳燕，這世上最難降的妖魔是什么勿决？我笑而不...
開封第一講書人閱讀 58,322評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮迟郎，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘聪蘸。我一直安慰自己宪肖，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,370評論 6贊 390
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布健爬。她就那樣靜靜地躺著控乾，像睡著了一般。火紅的嫁衣襯著肌膚如雪娜遵。梳的紋絲不亂的頭發(fā)上蜕衡，一...
開封第一講書人閱讀 51,274評論 1贊 300
城市分裂傳說
那天，我揣著相機(jī)與錄音设拟，去河邊找鬼慨仿。笑死，一個(gè)胖子當(dāng)著我的面吹牛纳胧，可吹牛的內(nèi)容都是我干的镰吆。我是一名探鬼主播，決...
沈念sama閱讀 40,126評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼跑慕，長吁一口氣：“原來是場噩夢啊……” “哼万皿！你這毒婦竟也來了摧找？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 38,980評論 0贊 275
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤牢硅，失蹤者是張志新（化名）和其女友劉穎蹬耘，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體减余，經(jīng)...
沈念sama閱讀 45,414評論 1贊 313
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡综苔，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,599評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了佳励。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片休里。...
茶點(diǎn)故事閱讀 39,773評論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖赃承，靈堂內(nèi)的尸體忽然破棺而出妙黍，到底是詐尸還是另有隱情，我是刑警寧澤瞧剖，帶...
沈念sama閱讀 35,470評論 5贊 344
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布拭嫁，位于F島的核電站，受9級特大地震影響抓于，放射性物質(zhì)發(fā)生泄漏做粤。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,080評論 3贊 327
男人毒藥：我在死后第九天來索命
文/蒙蒙一捉撮、第九天我趴在偏房一處隱蔽的房頂上張望怕品。院中可真熱鬧，春花似錦巾遭、人聲如沸肉康。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,713評論 0贊 22
一樁弒父案灼舍，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽吼和。三九已至，卻和暖如春骑素，著一層夾襖步出監(jiān)牢的瞬間炫乓，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,852評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工献丑，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留末捣，地道東北人。一個(gè)月前我還...
沈念sama閱讀 47,865評論 2贊 370
代替公主和親
正文我出身青樓创橄，卻偏偏與公主長得像塔粒，于是被迫代替她去往敵國和親。傳聞我的和親對象是個(gè)殘疾皇子筐摘，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,689評論 2贊 354