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"; $( "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

$ct.html('
');

获取、设置$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 输入框时让输入框边框变为蓝色,当输入框内容改变时把输入框里的文字小写变为大写,当输入框失去焦点时去掉边框蓝色,控制台展示输入框里的文字




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

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

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

客户端:


  
    
    jQuery任务二
    
  
  
    
  • 内容1
  • 内容2
加载更多 服务端 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 }); });

你可能感兴趣的:(JQuery动画与ajax)