美文网首页
jQuery动画与ajax

jQuery动画与ajax

作者: mianmiani | 来源:发表于2017-05-27 15:33 被阅读0次

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

    在文档加载后激活函数:当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。

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

    $node.html:包括节点内的html标签,节点信息。
    $node.text:只包含节点内的文本信息。

    $.extend 的作用和用法?

    jQuery.extend( [deep ], target, object1 [, objectN ] )
    将两个或更多对象的内容合并到第一个对象。
    deep
    类型: Boolean
    如果是true,合并成为递归(又叫做深拷贝)。
    target
    类型:[Object
    对象扩展。这将接收新的属性。
    object1
    类型: Object
    一个对象,它包含额外的属性合并到第一个参数.
    objectN
    类型: Object
    包含额外的属性合并到第一个参数
    jQuery.fn.extend( object )
    一个对象的内容合并到jQuery的原型,以提供新的jQuery实例方法。
    object
    Type: Object
    一个对象,用来合并到jQuery的原型。

    jQuery 的链式调用是什么?

    在一个对象调用一个jquery方法之后可以直接继续调用其他方法如:

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

    他的原理是在调用一个方法之后函数返回这个对象本身。

    jQuery 中 data 函数的作用

    $node.data( key, value )
    在匹配元素上存储任意相关数据
    key
    类型: String
    一个字符串,用户存储数据的名称。(译者注:存储的数据名)
    value
    类型: Object
    新的数据值;它可以是任意的Javascript数据类型,包括Array 或者 Object。
    $node.data( obj )
    obj
    类型: Object
    一个用于更新数据的 键/值对

    $('body').data('aaa','bbb')
    //在body节点上储存名为aaa的数据,数据内容为bbb
    

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

    给元素 $node 添加 class active

    $node.addClass('active')
    

    给元素 $noed 删除 class active

    $node.removeClass('active')
    

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

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

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

    $node.attr('id'[,修改的内容,不填则获取id属性])
    $node.attr('src'[,修改的内容,不填则获取id属性])
    $node.attr('title'[,修改的内容,不填则获取id属性])
    

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

    $node.attr('data-src')
    

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

    $ct.prepend($node)
    $node.prependTo($ct)
    

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

    $ct.append($node)
    $node.appendTo($ct)
    

    删除$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').children('.panel')
    获取选择元素的数量

    $node.length
    

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

    $node.index()
    

    相关文章

      网友评论

          本文标题:jQuery动画与ajax

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