jQuery动画与ajax

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

当DOM准备就绪时，指定一个函数来执行。
传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数，因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。
$(document).ready(handler)
$(handler)
两种写法等价

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

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

$.extend 的作用和用法?

作用：合并一个或多个对象的内容到第一个对象
语法：jQuery.extend([deep,] target [, object1 ] [, objectN ] )
用法：

• deep：设置浅拷贝或深拷贝(默认为false浅拷贝，不用写)，若设置深拷贝则为true
• target：目标对象
• object：传递对象，可以有很多个，但是后面的相同参数会覆盖前面的

<script>
   var obj1={
     name:'fang',
     age:'18',
     friends:{
       name:'xiaobai',
       age:'18',
       sex:'male'
     }
   }
   var obj2={
     name:'ruoyu',
     age:'20',
     friends:{
       name:'xiaohei',
       age:'20'
     }
   }
   var obj3=$.extend({},obj1,obj2)
   console.log(obj3)
 </script>

console.log输出值为
Object
  age: "20"
  friends: Object
    age: "20"
    name: "xiaohei"
    __proto__: Object
  name: "ruoyu"
__proto__: Object

jQuery 的链式调用是什么？

当jQuery方法返回值仍为当前对象时可继续调用该对象的方法，形成链式调用

$(this).addClass("active").siblings().removeClass("active")

jQuery 中 data 函数的作用

data函数用于在当前jQuery对象所匹配的所有元素上存取数据。通过data函数存取的数据为临时数据，页面刷新后数据消失。

.data( key, value );
$( "body" ).data( "foo", 52 );

.data( obj );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );

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

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

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

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

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

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

$node.attr('id','xxx')
$node.attr('src','xxx')
$node.attr('title','xxx')

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

$node.attr('data-src','xxx')

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

$ct.prepend('$node')

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

$ct.append('$node')

• 删除$node

$node.remove()

• 把$ct里内容清空

$ct.empty()

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

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

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

$node.width()//仅包括内容
$node.height()//仅包括内容

$node.innerWidth();//包括内容和padding宽度
$node.innerHeight();//包括内容和padding高度

$node.outerWidth();//包括内容,padding,border宽度
$node.outerHeight();//包括内容,padding,border高度

$node.outerHeight(true);//包括内容,padding,border,margin高度
$node.outerWidth(true);//包括内容,padding,border,margin宽度

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

$(window).scrollTop();

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

$node.offset();

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

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

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

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

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

$ct.find('.item')

• 获取$ct 里面的所有孩子

$ct.children()

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

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

• 获取选择元素的数量

$node.length

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

$node.index()