web前端-js小记(15)-jQuery动画与ajax

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

1. $(document).ready()表示页面的dom元素已经加载完毕，这是为了防止在页面加载元素加载完之前对dom元素进行操作。原生js中我们可以使用window.onload来达到这个效果，不过两者还是有区别，onload是所有元素、图片、外部资源都加载完，而$(document).ready()只需要元素加载完成。所以onload比$().ready()要慢

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

1. $node.html()返回node中的html内容，$node.text()返回node中的文本内容。
2. 当包含参数的时候，html(str)为替换html内容为参数值，text(str)为替换文本内容为参数值。

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

1. $.each：
   $.each()函数和$(selector).each()是不一样的，$(selector).each()是专门遍历一个jQuery对象的，$.each()函数可用于迭代任何集合，无论是“名/值”对象（JavaScript对象）或数组。在迭代数组的情况下，回调函数每次传递一个数组索引和相应的数组值作为参数。该方法返回其第一个参数，就是迭代的对象。

//$.each()
var str=$.each([52, 97],function(index,value){
  console.log(index+":"+value);
});
var  obj=$.each({"a":10,"b":"jon"},function(index,value){
  console.log(index+":"+value);
});
//$(selector).each()
<ul class="list">
  <li>1</li><li>2</li>
</ul>
$("ul.list li").each(function(){
  var num=$(this).text()*2;
  $(this).text(num);
});

2. $.extend：
   当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（第一个参数）。
   只有一个参数提供给$.extend()，意味着目标参数被省略。jQuery对象被默认为目标对象。这时可以在jQuery的命名空间下添加新的功能。对于插件开发者希望向 jQuery 中添加新函数时是很有用的。
   在默认情况下，通过$.extend()合并，如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。然而，如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并。

//默认情况下合并是重写一个属性
var object1 = {
  apple: 0,  banana: { weight: 52, price: 100 },  cherry: 97
};
var object2 = {
  banana: { price: 200 },  durian: 100
};
$.extend( object1, object2 );    //object1={apple: 0,  banana: { price: 200 }, cherry: 97,durian: 100}，banaba被替换了，而不是合并
//第一个参数为true时
var object1 = {
  apple: 0,  banana: { weight: 52, price: 100 },  cherry: 97
};
var object2 = {
  banana: { price: 200 },  durian: 100
};
$.extend( true, object1, object2 );    //object1={apple: 0,  banana: { weight:52,price: 200 },  cherry: 97,durian: 100}，banaba被合并
//不改变第一个参数，生成新对象
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend( {}, defaults, options );   //settings={validate: true, limit: 5, name: "bar"}

题目4：jQuery 的链式调用是什么？

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

题目5：jQuery 中 data 函数的作用

.data() 方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。

//我们可以在一个元素上设置不同的值，之后获取这些值：
$("body").data("foo", 52); 
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
$("body").data();   //{ foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
//获取值，若无则返回undefined
alert( $("body").data("hint")); //undefined
alert( $("body").data("foo")); //52
//删除值
$("body").removeData("foo");
console.log($("body").data("foo"));    //undefined

  <div>
  The values stored were<span></span>and<span></span>
</div>
<script>var div = $("div")[0];
   $("div").data("test", { first: 16, last: "pizza!" });
   $("span:first").text($("div").data("test").first);    //第一个span里面加16
   $("span:last").text($("div").data("test").last);    //第二个span里面加pizza!
</script>
//从jQuery 1.4.3起，HTML 5 data- 属性将自动被引用到jQuery的数据对象中。
<div data-role="page" data-last-value="43" data-hidden="true"></div>
$("div").data("role")==="page"
$("div").data("lastValue")===43
$("div").data("hidden")===true

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

1. 增删class
   给元素 $node 添加 class active,给元素 $noed 删除 class active

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

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

$(node).show();  $("node").hide();    //2个参数，1.动画运行时间;2.完成时执行的函数；

3. 获取/修改属性
   获取元素$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");

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

$("node").data("src","value");

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

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

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

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

7. 删除元素
   删除$node

$("node").remove(); 
$("node1").remove($("node")); //删除node1里的node

8. 清空元素里的内容
   把$ct里内容清空

$("ct").empty();

9. 设置html
   在$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();    //返回的对象包含top 和 left, 此方法只对可见元素有效

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

 $node.css({
    color: 'red',
    'font-size': '14px'                //中间有短线的必须用引号，因为js只支持下划线
  });

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

$('#items li').each(function(){
    var text = $(this).text()
    $(this).text(text + 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() //自1.8版本废弃，请使用.length代替

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

$node.index();

题目7：用jQuery实现以下操作

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

$(".wrap").on("click",".btn",function(e){
  e.preventDefault();
  var $this=$(this);
  $(this).css("background-color","red");
  setTimeout(function(){
    $this.css("background-color","blue");
    console.log($this);
  },800);
});

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

$(window).on("scroll",function(){
  $(".getHeight").find("span").text($(window).scrollTop());
});

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

$(".wrap").on("mouseenter",".line .b",function(){
  $(this).css("background-color","red");
});
$(".wrap").on("mouseleave",".line .b",function(){
  $(this).css("background-color","#fff");
});

4. 当鼠标激活 input 输入框时让输入框边框变为蓝色

$(".wrap").on("focus",".line input[type=text]",function(){
  $(this).css("border-color","blue");
});

5. 当输入框内容改变时把输入框里的文字小写变为大写

$(".wrap").on("focusout",".line input[type=text]",function(){
  console.log($(this).val());
});

6. 当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字

$(".wrap").on("input",".line input[type=text]",function(){
  $(this).val($(this).val().toUpperCase());
});

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

$(".wrap").on("change","select",function(){
  $(this).parent().find(".right").text($(this).find("option:selected").text());
});

代码

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

代码

题目9(选做)：** 实现一个天气预报页面，UI 如下图所示(可自由发挥)。数据接口:

获取当前用户所在城市接口：//jirenguapi.applinzi.com/city.php
服务端支持 CORS 跨域调用，前端可直接使用 ajax 获取数据

获取某城市对应的天气接口：//jirenguapi.applinzi.com/weather.php?city=北京
服务端支持 CORS 跨域调用，前端可直接使用 ajax 获取数据, 如果不传递参数默认获取当前用户所在城市的天气
代码

(mission 15)