任务15

题目1： jQuery 中， $(document).ready()是什么意思？
当DOM准备就绪时，指定一个函数来执行里面的代码。
题目2： $node.html()和$node.text()的区别?
$node.html()：选取的是指定节点的html内容包括文本内容和标签
$node.text()：选取的是指定节点的text内容只有文本内容
题目3： $.extend 的作用和用法?
作用：将两个或更多对象的内容合并到第一个对象。
用法：jQuery.extend( target [, object1 ] [, objectN ] )
会改变target的值，重复的属性会覆盖
target
类型: Object
一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间。
object1
类型: Object
一个对象，它包含额外的属性合并到第一个参数
objectN
类型: Object
包含额外的属性合并到第一个参数N
题目4： jQuery 的链式调用是什么？
用一行代码，对一个对象按顺序调用多种方法，比如：

$("#Test").css('color','red').show(200).removeClass('style');

$('#Test')对象连续调用的三种方法，代码由右至左执行，$("#Test").css('color','red')执行完毕之后返回的还是$("#Test")，只不过改对象css发生了一下改变，后面的代码也是如此所以可以这样操作
为什么要用链式操作呢？原因有两个：
代码更精简。链式操作能大大精简代码量，多项操作一行代码一气呵成，搞定；

优化性能。使用链式操作，所有操作代码共享一个jQuery对象，省去了逐步查询DOM元素的性能损耗。
题目5： jQuery 中 data 函数的作用
data:在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

 <li>1</li>
 <li class="a">2</li>
 <li class="b">3</li>
 <li class="c">4</li>
$('li').data('xxx','111')
$('.a').data('xxx','222')
$('.b').data('xxx','333')
$('.b').data('xxx','444')

如上，jquery选择器可以调用data(key,value)函数,当传入两个参数时，设置key和value并存储在该对象的data中，当传入一个参数时，返回的是该参数对应的value值，上面有四个Li元素，两个.b元素，发现当jquery对象相同时（通过元素选择器或者类选择，不是节点相同），设置同key属性值会覆盖，而且只对返回匹配的元素集合中的第一个元素的有效，$('li')和$('.a')并不会覆盖

$('li').data()
Object {xxx: "111"}
$('li').data('xxx')
"111"
$('li').data('xx')
undefined
$('.b').data('xxx')
"444"

题目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（atrribute，value）方法

传入一个参数，返回对应属性名的值
$node.attr('id')//返回id值
$node.attr('src')//返回src值
$node.attr('title')//返回title值
传入两个参数
$node.attr('id'，value)//设置id值
$node.attr('src',value)//设置src值
$node.attr('title',value)//设置title值

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

$('li').data('data-src','我是一只猪')
$('li').data()
"我是一只猪"

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

content可以是html内容，可以是node对象
//向头部添加内容
$( content ).prependTo( jquery );//把content添加到jquery对象的头部
$( jquery ).prepend( content );//向jQuery对象的头部添加contenT
$( ".inner" ).prepend($node );
$( ".inner" ).prepend( "<p>Test</p>" );
$( "<p>Test</p>" ).prependTo( ".inner" );

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

content可以是html内容，可以是node对象
//在尾部添加内容
$( content ).appendTo( jquery );//把content添加到jquery对象的尾部
$( jquery ).apend( content );//向jQuery对象的尾部添加contenT
$( ".inner" ).apend($node );
$( ".inner" ).apend( "<p>Test</p>" );
$( "<p>Test</p>" ).prependTo( ".inner" );

删除$node
通过该对象调用$node.remove( ) 或者$node.detach( )

var xxx=$('.a').detach()
//undefined
$('body').append(xxx)
//[body, prevObject: init(1), context: document, selector: "body"]

区别是:detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。\

<li class='a'>1</li>
<li class="a">2</li>
<li class="b">3</li>
<li class="b">4</li>
$('.a').on('click',function(){$(this).css('background','green')})
$('.b').on('click',function(){$(this).css('background','yellow')})

这个时候我们分别操作：

var node1=$('.a').eq(0).remove()
var node2=$('.b').eq(0).detach()
$('body').append(node1)
$('body').append(node2)
//结果为node2记录着node2绑定的事件,node1只记录节点本身的信息

把$ct里内容清空

$node.empty()

//清空被选择元素内所有子元素，包括html，text，空白字符

在$ct 里设置 html <div class="btn"></div>
调用html（）方法，$ct.html('<div class="btn"></div>')即可将$ct的html内容设置为<div class="btn"></div>
获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

不包括内边距：
$node.height()//获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。
包括内边距：
$node.inderHeight()
//为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。
$node.outerHeight(boolean)
//获取元素集合中第一个元素的当前计算高度值,包括padding，border和选择性的margin
包括边框：$node.outerHeight(false)//false表示不计算margin
包括外边距：$node.outerHeight(true)//true表示不计算margin

获取窗口滚动条垂直滚动距离
获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置。

$(".demo").scrollTop()//获取该集合中第一个元素的当前垂直滚动条的位置
传入number类型的参数时，可以改该位置，返回的最大值为该窗口的outerheight(false)

获取$node 到根节点水平、垂直偏移距离
$node.offset().left
$node.offset().top
修改$node 的样式，字体颜色设置红色，字体大小设置14px

$('li').css('color','yellow')
$('li').css('font-size',14)

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

//用jquery对象的each方法
$('li').each(function(){ $(this).text( $(this).text()+ $(this).text())})

从$ct 里查找 class 为 .item的子元素
$ct.find('.tem')
获取$ct 里面的所有孩子
$ct.children()
对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$('.ct').parent().find('.panel')
获取选择元素的数量
$('li').length
获取当前元素在兄弟中的排行
$(select).index()

  <ul>
    <li class="panel">panel</li>
    <li class='ct'>ct</li>
    <li class='ct  at'>ct</li>
  </ul>
$('.at').index()
2
$('.at').index('.ct')
1

index()传入参数，则为在该选择器集合中的排行
题目7：
用jQuery实现以下操作当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
当窗口滚动时，获取垂直滚动距离
当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
当选择 select 后，获取用户选择的内容
jscode
题目8： 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览238

<!--html部分-->
<!doctype html>
<html>
<head>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
    li{
        list-style:none;
        margin: 10px;
        height: 50px;
        border: 1px solid pink;
        
        text-align: center;
        vertical-align: middle;
    }

    li:hover{
        background: green;
    }
    div{
        text-align: center;
    }
    button{
        display: inline-block;
        margin: 10px auto;
    }
</style>
</head>
<body>
    <ul class="news">
        <li>内容1</li>
 <li>内容2</li>
    </ul>
 
 <div>
     <button id='myButton'>加载更多</button>
 </div>

  <script>
    var boo=false;//防止多次点击
$('#myButton').on('click',function(){
     if(!boo){
    $.ajax({
    url: 'news',
    method: 'GET',
 
}).done(function(result){
     boo=true;
        setTimeout(function(){
        

    var str=''
for(var i=0;i<result.length;i++){
str+='<li>'+result[i]+'</li>'
}
    $('.news').append(str)
        boo=false;
        },2000)
    
}).fail(function(jqXHR, textStatus){

    console.log(textStatus);

});
    }
})
 
  </script>
  
</body>
</html>
<!--router部分-->
var i=2;
router.get('/news', function(req, res) {
    
    var news=['内容'+(i+1),'内容'+(i+2),'内容'+(i+3),'内容'+(i+4),'内容'+(i+5)]
  res.send(news)  
  // info = require(./db.json)
  // res.send(info)
  i+=5
})

题目9(选做)： 实现一个天气预报页面，UI 如下图所示(可自由发挥)。数据接口:
获取当前用户所在城市接口：//jirenguapi.applinzi.com/city.php
服务端支持 CORS 跨域调用，前端可直接使用 ajax 获取数据

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