JQuery动画与ajax

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

当DOM准备就绪时，指定一个函数来执行里面的代码。
与load事件要在页面所有内容加载完后才执行不同，read事件只要在DOM结构完全加载后，就可以执行。

$(document).ready(function(){
});
可简写为:
$(function(){
})

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

$node.html()：选取的是指定节点的html内容包括文本内容和标签
$node.text()：选取的是指定节点的text内容只有文本内容

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

作用：

  1. 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
  2. 如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的

用法：

//目标对象（第一个参数）将被修改，并且将通过$.extend()返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：
var object = $.extend({}, object1, object2);

//如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。
//如果将 true作为该函数的第一个参数，那么会在对象上进行递归的合并。
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};  
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );

4. jQuery 的链式调用是什么？

jQuery链式调用：在对象上一次性调动多个方法
$(this).addClass("active").siblings().removeClass("active")
$(#ct).css('color','blue').show(400).hide();
因为大部分对象方法的最后是return this，所以有了链式调用，简易代码。

5. jQuery 中 data 函数的作用

data函数可以读取html标签中的data-xxx自定义属性,并且为标签对象储存各种自定义属性

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
//获取属性
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";

//设置属性
$( "div" ).data( "role","newPage" )

6. 写出以下功能对应的 jQuery 方法：

给元素 $node 添加 class active，给元素 $node 删除 class active

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

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

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

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

$node.attr('id');
$node.sttr('src');
$node.sttr('title');

$node.attr('id','1');
$node.sttr('src','2');
$node.sttr('title','3');

给$node 添加自定义属性data-src

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

在$ct 内部最开头添加元素$node

  $ct.prepend('node');

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

  $ct.append('node');

删除$node

$node.remove();

把$ct里内容清空

$ct.html('');

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

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

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

//不包括内边距
$node.height();              //读取高度
$node.width();               //读取宽度
$node.height('50px');     //设置高度
$node.width('50px');      //设置宽度

//包括内边距
$node.innerHeight();    //读取高度
$node.innerWidth();      //读取宽度
$node.innerHeight( '50px' );    //设置高度
$node.innerHeight( '50px' );    //设置高度

 //包括边框
$node.outerHeight();    //读取高度
$node.outerwidth();    //读取宽度
$node.outerHeight('50px');    //设置高度
$node.outerwidth('50px');    //设置宽度

//包括外边距
$node.outerHeight(true);    //读取高度
$node.outerwidth(true);    //读取宽度

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

$node..scrollTop();

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

  $node.offset();

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

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

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

  $element.each(function(){
      var $this = $(this);
      $this.text($this.text()+$this.text());
  });

从$ct 里查找 class 为 .item的子元素

$ct.children('.item');

获取$ct 里面的所有孩子

$ct.children();

对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子

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

获取选择元素的数量

$('div').length;

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

$node.index();

7. 用jQuery实现以下操作

当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色

var $btn = $('.btn');
$btn.on('click',function(){
    $btn.css("background":"red");
    setTimeout(function(){
        $btn.css("background":"blue");
},1000);
});

当窗口滚动时，获取垂直滚动距离

$(document).on('scroll',function(){
    var distance = $(document).scrollTop();
    console.log(distance);
});

当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色

var $div = $('div');
$div.on('mouseover',function(){
    $div.css("background":"red");
});
$div.on('mouseleave',function(){
    $div.css("background":"white");
});

当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字

<style>
    .border{
        border-color:blue;
}
</style>
<input type="text" id="int">
<script>
    var $int = $('#int');
    $int.on('focus',function(){
        $(this).addClass("border");
}).on('keyup',function(){
        $(this).val($(this).val().toUppercase());
}).on('blur',function(){
        $(this).removeClass("border");
        console.log($(this).val());
})
</script>

当选择 select 后，获取用户选择的内容

var $select = $('#select');
$select.on('change',function(){
    console.log($(this).val());
})

8 用 jQuery ajax 实现如下效果。当点击加载更多会加载数据展示到页面

客户端：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery任务二</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>内容1</li>
      <li>内容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>'+"内容"+info.array[0]+'</li>',
        html += '<li>'+"内容"+info.array[1]+'</li>',
        html += '<li>'+"内容"+info.array[2]+'</li>',
        $('.cot').append(html);
      }
    })
    </script>
  </body>
</html>
服务端
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
    });
});
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容