jQuery动画与ajax

题目1.Jquery中， $(document).ready()是什么意思？和window.onload 的区别？还有其他什么写法或者替代方法？

$(document).ready()方法：为防止文档在完全加载之前运行Jquery代码,若在文档未完全加载前就运行函数,操作可能失败.必须在文档加载完后执行操作,可使用ready事件,作用相当于把js写到body末尾.
$(document).ready(function(){ });
可简写为:
$(function(){ })
window.onload：必须等网页中所有的元素全部加载完毕才能执行.不能同时写多个，否则后面覆盖前面.

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

$node.html()，返回所选择元素内的html内容，包含html标签和文本内容
$node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容

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

$.extend()将多个对象合并到一起，可以传入多个参数。$.extend([deep,] target,…)。[deep,]为布尔值默认情况不是深拷贝，可设置true为深拷贝

//定义一个对象
var obj={
    name:'gaoyang',
    age:25,
    sex:'man'
};
//定义一个新对象
var newObj={
    name:'jirengu',
    age:30
};
//extend方法接受多个参数,并且第一个对象被覆盖
$.extend(obj,newObj,{
    name:'gg',
    age:25,
    like:'eat'
});
console.log(obj);
//object{
//age:25,
//like:"eat",
//name:"gg",
//sex:"man"
//
}

题目4.JQuery 的链式调用是什么？

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

题目5.jquery 中 data 函数的作用?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task26</title>
</head>
<body>
<div id="k-box"></div>
<div id="v-box"></div>
<script src="../js/jquery-1.11.1.min.js"></script>
<script>
    console.log($("#k-box").data("bkk")); //undefined
    $("#k-box").data("bkk","word"); //设置bkk为word
    console.log($("#k-box").data("bkk")); //word
    $("#k-box").removeData("bkk"); //移除bkk设置的值
    console.log($("#k-box").data("bkk")); //undefined

    $("#v-box").data("test",{first:0,last:28}); //给存储名为test的对象存储内容{first:0,last:28}
    console.log($("#v-box").data("test").first); //0
    console.log($("#v-box").data("test").last); //28
    console.log($("#v-box").data("test")); //{first: 0, last: 28}
    $("#v-box").removeData("test"); //移除test设置的内容
    console.log($("#v-box").data("test")); //undefined
</script>
</body>
</html>

题目6写出以下功能对应的 Jq 方法：

$node.addClass('active');//添加一个class
$node.removeClass('active');//删除一个class

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

$node.show();//展示
$node.hide();//隐藏

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

$node.attr('id');//获取
$node.attr('id’,'值'); //修改
$node.attr('src');//获取
$node.attr('src’,'值');//修改
$node.attr('title');//获取
$node.attr('title’,'值');//修改

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

$node.attr("data-src",'str')

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

$(".ct").prepend($node);

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

$(".ct").append($node);

7.删除$node

$(node).remove();

8.把$ct里内容清空

$node.empty();

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

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

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

$node.width();//不包括内边距宽度,仅包括内容
$node.height();//不包括内边距高度,仅包括内容
$node.innerWidth();//包括内容和内边距宽度
$node.innerHeight();//包括内容和内边距高度
$node.outerWidth();//包括内容,内边距,边框宽度
$node.outerHeight();//包括内容,内边距,边框高度
$node.outerHeight(true);//包括内容,内边距,边框,外边距高度
$node.outerWidth(true);//包括内容,内边距,边框,外边距宽度

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

$(window).scrollTop()

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

$node.offset()

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

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

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

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

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

$(".ct").find(".item")

16.获取$ct 里面的所有孩子

$(".ct").children()

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

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

18.获取选择元素的数量

$node.length;
$node.size();

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

$node.index();

题目7

1.用jQuery实现以下操作当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色

$('.btn').on('click',function(){
    setTimeout(function(){
      $('.btn').css('background-color','red')
    },0)
    setTimeout(function(){
      $('.btn').css('background-color','blue')
    },500)
    setTimeout(function(){
      $('.btn').css('background-color','red')
    },1000)
  })

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

$(window).scrollTop()

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

$('div').on('mouseleave',function(){
      $(this).removeClass('active')
  })
  $('div').on('mouseenter',function(){
      $(this).addClass('active')
  })

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

<style>
  .active {
    border-color: blue;
  }
  input {
    outline: none;
  }
  </style>
var $input = $('input');
  $input.focus(function(){
    $(this).addClass('active')
  })
  $input.blur(function(){
    $(this).removeClass('active')
    console.log($(this).val())
  })
  $input.keyup(function(){
    $(this).val( $(this).val().toUpperCase())
  })

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

<body>
 <select name="gaoyang" id="">
   <option value="gaoyang" >gaoyang</option>
   <option value="gao" selected='selected'>gao</option>
   <option value="yang">yang</option>
 </select>
<script src='./jquery.js'></script>
<script>
  var $select = $('select');
  $select.on('change',function(){
    console.log($select.val())
  })
</script>
</body>

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

//router.js
app.get('/getNews', function(req, res) {
    var page = parseInt(req.query.page);
    var len = parseInt(req.query.len);
    var arr = [];
    for(var i =  page*len;i<page*len+len;i++){
      arr.push('数据'+i);
    }
  res.send(arr);
});

//index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>gaoyang</title>
  <style>
    .box {
      list-style: none;
      padding: 0;
      width: 600px;
    }
    .box>li {
      border: 1px solid #ccc;
      margin: 10px;
    }
     .box>li>a:hover {
      background-color: blue;
      color: #fff;
    }
    .box>li>a {
      display: block;
      text-decoration: none;
      padding: 10px;
      color: #000;
    }
   .btn {
     margin-left: 10px;
   }
    
  </style>
</head>
<body>
  <div class="ct">
    <ul class="box">
      
    </ul>
    <button class="btn">加载数据</button>
  </div>
<script src='./jquery.js'></script>
<script>
  var pageIndex = 0;
  var loading = false;
  var $btn = $('.btn')
  $('.box').on('click','li',function(event){
    event.preventDefault();
  })
  $btn.on('click',function(){
     $btn.text('正在加载');
    if(loading === false){
      $.get('/getNews',{page:pageIndex,len:5}).done(function(ret){
           //拼接显示
            $.each(ret,function(){
              $('.box').append('<li><a href="#">'+this+'</a></li>');
            });
            pageIndex++;
            console.log(ret)
            $btn.text('加载数据');
            loading = false;
              
            }).fail(function(error){
              $btn.text('加载数据');
              loading = false;
              console.log('2')
            })
    }else{
     
    }
    loading = true;
  })

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