美文网首页前端进阶
jQuery动画与ajax

jQuery动画与ajax

作者: 冰滩波纹 | 来源:发表于2017-06-20 22:05 被阅读0次

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

相关文章

  • jQuery动画与ajax

    jQuery动画与ajax jQuery 中, $(document).ready()是什么意思 jQuery的l...

  • Ajax实现登陆验证

    关于jquery与Ajax jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法,能...

  • jQuery动画与ajax

    1:jQuery 中, $(document).ready()是什么意思? $(document).ready()...

  • jQuery动画与ajax

    1、jQuery 中, $(document).ready()是什么意思? $(document).ready()...

  • jQuery动画与Ajax

    jQuery 中, $(document).ready()是什么意思? 必须在DOM元素加载完成后,即DOM树建立...

  • jQuery动画与ajax

    题目1: jQuery 中, $(document).ready()是什么意思? $(document).read...

  • JQuery动画与ajax

    1. jQuery 中, $(document).ready()是什么意思? 当DOM准备就绪时,指定一个函数来执...

  • jQuery动画与ajax

    题目1: jQuery 中, $(document).ready()是什么意思? 题目2: $node.html(...

  • jQuery动画与ajax

    1: jQuery 中, $(document).ready()是什么意思? $(document).ready(...

  • jQuery动画与ajax

    1、 jQuery 中, $(document).ready()是什么意思? 主要用来加载DOM,替代原生Java...

网友评论

    本文标题:jQuery动画与ajax

    本文链接:https://www.haomeiwen.com/subject/hksnqxtx.html