jQuery动画与ajax

作者: Eazer | 来源:发表于2017-07-03 23:55 被阅读0次

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

    $(document).ready()表示页面的DOM元素已经加载完毕,这是为了防止页面元素加载完之前对DOM元素进行操作。原生JS我们通常使用window.onload来打到这个效果,不过两者还是有区别 ,onload是所有元素、图片、外部资源都加载完,而$(document).ready()只需要元素加载完成。所以onload比$().ready()要慢

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

    .html()获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容。

    .text()得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容

        <div class="test1">
            <p>我是这样输出哒</p>
        </div>
        $('.test1').html() //<p>我是这样输出哒</p>
        $('.test1').text() //我是这样输出哒
    

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

    $.extend的作用是:将两个或更多对象的内容合并到第一个对象。

    拷贝分深拷贝和浅拷贝:

    jQuery.extend()
    • 当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target参数)。
    • 目标对象(第一个参数)将被修改,并且将通过$.extend()返回。然而,如果我们想保留原对象,我们可以通过传递一个空对象作为目标对象:
    var object = $.extend({}, object1, object2);
    
    • 在默认情况下,通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组,那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并

    Example:合并两个对象,并修改第一个对象。

    var object1 = {
      apple: 0,
      banana: { weight: 52, price: 100 },
      cherry: 97
    };
    var object2 = {
      banana: { price: 200 },
      durian: 100
    };
    
    $.extend( object1, object2 );
    $( "#log" ).append( JSON.stringify( object1 ) );
    //{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
    

    Example:采用递归方式合并两个对象,并修改第一个对象。

    var object1 = {
      apple: 0,
      banana: { weight: 52, price: 100 },
      cherry: 97
    };
    var object2 = {
      banana: { price: 200 },
      durian: 100
    };
    
    $.extend( true, object1, object2 );
    $( "#log" ).append( JSON.stringify( object1 ) );
    //{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
    

    Example:合并 defaults 和 options 对象,并且不修改 defaults 对象。这是常用的插件开发模式。

    var defaults = { validate: false, limit: 5, name: "foo" };
    var options = { validate: true, name: "bar" };
    var settings = $.extend( {}, defaults, options );
    $( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
    $( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
    $( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
    //defaults -- {"validate":false,"limit":5,"name":"foo"}
    //options -- {"validate":true,"name":"bar"}
    //settings -- {"validate":true,"limit":5,"name":"bar"}
    

    4. jQuery 的链式调用是什么?

    使用jQuery方法时,对象方法返回的是对象本身,可以调用此对象的其他jQuery方法,实现链条样式的调用。

     $this.addClass('active').siblings().removeClass('active');
    

    5. jQuery 中 data 函数的作用?

    data函数:存储任意数据到指定的元素,返回设置的值。

    jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险

    jQuery.data(element, key, value)
    存储任意数据到指定的元素,返回设置的值。
    
    jQuery.data( element, key )
    返回用jQuery.data(element, name, value)储存在元素上的相应名字的数据,或者元素上完整的数据存储。
    
    $().data(key)、$().data()
    从jQuery对象上读数据。
    

    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('id','newid')
    $node.attr('arc','newsrc')
    $node.attr('title','newtitle')
    

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

    $node.data('data-arc','newsrc')
    

    在$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

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