jquery.ajax

作者: zy懒人漫游 | 来源:发表于2018-01-28 04:46 被阅读0次

jQuery Ajax
封装 jQuery.ajax
promise
2018-03-21 jQuery ajax原理
jQuery.ajax向后台传递数组问题
jQuery之ajax
第36章介绍一些函数的用法，给出范例
jQuery Ajax 操作函数
jQuery Ajax
jquery.ajax

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

可以简单理解为页面加载完成后执行 $(document).ready()内的代码。

$node.html()和$node.text()的区别?

$node.html()获取的是元素的html结构
$node.text()获取的是元素的文本

$.extend 的作用和用法?

jQuery.extend( target [, object1 ] [, objectN ] )
描述: 将两个或更多对象的内容合并到第一个对象,用于扩展对象。
当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。

默认情况下，第一个参数会被修改，如果我们需要保留原对象，那么可以传递一个空对象作为目标对象：

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

jQuery 的链式调用是什么？

在一条代码中对指定对象按顺序调用多种方法，节省代码量，提高代码的效率。

jQuery 中 data 函数的作用

data函数的作用是在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
当参数只有一个key的时候，为读取该jQuery对象对应DOM中存储的key对应的值，值得注意的是，如果浏览器支持HTML5，同样可以读取该DOM中使用 data-[key] = [value] 所存储的值。
当参数为两个时，为像该jQuery对象对应的DOM中存储key-value键值对的数据。

写出以下功能对应的 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 内部最开头添加元素$node

$ct.prepend($node)

在$ct 内部最末尾添加元素$node

$ct.apend($node)

删除$node

$node.remove()

把$ct里内容清空

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

在$ct 里设置 html <div class="btn"></div>

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

获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

// 获取内容宽度和高度
$node.width();
$node.height();

// 获取内容宽度和高度（包括padding，但不包括border）
$node.innerWidth();
$node.innerHeight();

// 获取内容宽度和高度（包括padding，border和可选的margin）
$node.outerWidth();
$node.outerHeight();

// 获取内容宽度和高度（包括padding，border，margin）
$node.outerWidth(true);
$node.outerHeight(true);

获取窗口滚动条垂直滚动距离

$(window).scrollTop()

获取$node 到根节点水平、垂直偏移距离

$node.offset();

修改$node 的样式，字体颜色设置红色，字体大小设置14px

$node.css({color:'red,fontSize:'14px'})

遍历节点，把每个节点里面的文本内容重复一遍

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')

获取选择元素的数量

$('#id').length

获取当前元素在兄弟中的排行

$('#id').length

demo

前端代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>来看新闻啦</title>
  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_440128_zzh2f8adqybhjjor.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">-->
          <!--![十九大召开在即](https://img.haomeiwen.com/i6888710/821c8059a5ed6470?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)-->
          <!--<span class='icon'><i class="iconfont icon-time"></i>  xx分钟前</span>-->
          <!--<h2>十九大召开在即 9张图读懂18次党代会“极简史”</h2>-->
          <!--<p>人民日报</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('新闻出错了')
      }
    }).fail(function(){
      console.log('系统异常');
    });
  });
  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次党代会“极简史”',
        address: '人民日报'
    },
        {
            link: 'https://xw.qq.com/TWF/20171013026598/TWF2017101302659802',
            img: 'https://inews.gtimg.com/newsapp_bt/0/2156638961/1000',
            time: '40分钟前',
            title: '台风“卡努”向南海趋近 或在海南广东沿海登陆',
            address: '海南日报'
        },
        {
            link: 'https://xw.qq.com/cmsid/20171011A02WHP00',
            img: 'https://inews.gtimg.com/newsapp_bt/0/2113010892/1000',
            time: '50分钟前',
            title: '又一次重大跨越，展望中俄联合研制的CR929宽体客机',
            address: '河北日报'
        },
        {
            link: 'https://xw.qq.com/cmsid/20171013A015H900',
            img: 'https://inews.gtimg.com/newsapp_bt/0/2156579236/1000',
            time: '60分钟前',
            title: '俩美国人在叙被扣，求助美军特种部队不仅被拒还遭虐待',
            address: '神州日报'
        },
        {
            link: 'https://xw.qq.com/zt/2017090112018831/NEW2017090112018831',
            img: 'https://inews.gtimg.com/newsapp_ls/0/2156536836_150120/0',
            time: '1小时前',
            title: '十九大召开在即 9张图读懂18次党代会“极简史”',
            address: '北京日报'
        },
        {
            link: 'https://xw.qq.com/zt/2017090112018831/NEW2017090112018831',
            img: 'https://inews.gtimg.com/newsapp_ls/0/2156536836_150120/0',
            time: '1小时前',
            title: '十九大召开在即 9张图读懂18次党代会“极简史”',
            address: '长沙日报'
        },
        {
            link: 'https://xw.qq.com/NEW/20171013007314/NEW2017101300731403',
            img: 'https://inews.gtimg.com/newsapp_bt/0/2156314484/1000',
            time: '2小时前',
            title: '泰国总理见完特朗普，就宣布购买了中国坦克',
            address: '海外网'
        },
        {
            link: 'https://xw.qq.com/cmsid/20171012A01K7S00',
            img: 'https://inews.gtimg.com/newsapp_bt/0/2152413721/1000',
            time: '3小时前',
            title: '中国船侦察关岛附近水文，美军只能远远观望',
            address: '中国新闻网'
        }
    ];

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

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

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

预览

jQuery Ajax
jQuery.ajax( [settings ] ) jQuery.ajax( url [, settings ]...
封装 jQuery.ajax
封装一个 jQuery.ajax 升级jQuery.ajax 满足 Promise 规则
promise
let 封装一个jQuery.ajax 可用jQuery.ajax(url,method,body,success...
2018-03-21 jQuery ajax原理
https://www.jquery123.com/jQuery.ajax/
jQuery.ajax向后台传递数组问题
jQuery.ajax向后台传递数组问题今天重温了一个问题，jQuery.ajax向后台传递一个数组，而在后台接...
jQuery之ajax
一、jQuery.Ajax() A、设置方式 (1) $.ajax( url[,settings]) (2) ...
第36章介绍一些函数的用法，给出范例
$.ajax $.get $.getJSON jQuery.ajax( [settings ] ) 先看个例子这...
jQuery Ajax 操作函数
jQuery.ajax() 执行异步 HTTP (Ajax) 请求。 .ajaxComplete() 当 Ajax...
jQuery Ajax
jQuery.ajax([settings]) type:类型,"POST"或"GET",默认为"GET"url:...
jquery.ajax
jQuery 中， $(document).ready()是什么意思？可以简单理解为页面加载完成后执行 $(do...