jQuery动画与ajax

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

$(document).ready()是当文档中的所有DOM节点加载完成后，在加载外部图片和资源前，执行ready()里面的操作。

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

• $node.html() 获取元素内容，包括html标签和文本内容
• $node.text() 只获取文本内容

3： $.extend 的作用和用法?

$.extend(obj1,obj2)将obj2的内容拷贝到obj1里面，如果obj1本身含有obj2中的值，则obj2中的值覆盖obj1中的值。

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

使用jQuery方法时，对象方法返回的是对象本身，可以调用对此对象的其他jQuery方法，实现连续调用多个方法。

 var MyJQ = function(){
       }
        MyJQ.prototype = {
            css:function(){
               console.log("设置css样式");
                return this;//返回的是对象本身
            },
           show:function(){
                console.log("将元素显示");
               return this;//返回的是对象本身
            },
           hide:function(){
                console.log("将元素隐藏");
           }
       };

  var myjq = new MyJQ();
  myjq.css().css().show().hide();

5： jQuery 中 data 函数的作用

• jquery data()的作用
  data() 方法向被选元素附加数据，或者从被选元素获取数据。
  通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。
  该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据，请使用 removeData()函数。
• jquery data的使用方式
  1、获取附加的data的值
  $(selector).data(name)
  参数说明
  name：
  可选。规定要取回的数据的名称。
  如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。
  2、用name和value为对象附加数据
  $(selector).data(name,value)
  参数说明
  selector：为需要附加或者获取数据的对象。
  name：参数为数据的名称。
  value：参数为数据的值。
  3、使用对象向元素附加数据
  使用带有名称/值对的对象向被选元素添加数据。
  除了以提供 name 和 value 的方式进行赋值，我们还可以直接传入另一个对象（ “another” ）作为参数。这种情况下，“another” 的属性名称和属性值将被视为多个键值对，从中提取的 “name” 和 “value” 都会被复制到目标对象的缓存中。
  $(selector).data(object)
  参数说明
  object：必需。规定包含名称/值对的对象。

6：写出以下功能对应的 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') $node.attr('src') $node.attr('title')
  • 修改
    $node.attr('id','idname') $node.attr('src','srcname') $node.attr('src','titlename')
• 给$node 添加自定义属性data-src
  $node.data('data-src','dataname')
• 在$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();//包括内容和内边距宽度
  $node.innerHeight();//包括内容和内边距高度
  $node.outerWidth();//包括内容,内边距,边框宽度
  $node.outerHeight();//包括内容,内边距,边框高度
  $node.outerHeight(true);//包括内容,内边距,边框,外边距高度
  $node.outerWidth(true);//包括内容,内边距,边框,外边距宽度
• 获取窗口滚动条垂直滚动距离
  $(window).scrollTop()
• 获取$node 到根节点水平、垂直偏移距离
  $node.offset()
• 修改$node 的样式，字体颜色设置红色，字体大小设置14px
  $node.css({'color':'red','font-size':'14px'})
• 遍历节点，把每个节点里面的文本内容重复一遍
  $node.each(function(){
  console.log( $(this).text());
  })
• 从$ct 里查找 class 为 .item的子元素
  $ct.find('.item')
• 获取$ct 里面的所有孩子
  $ct.children()
• 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
  $node.parents('.ct').find('.panel')
• 获取选择元素的数量
  $node.length()
• 获取当前元素在兄弟中的排行
  $node.index()