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()

最后编辑于：2017.12.08 04:51:41