美文网首页
jQuery动画与ajax

jQuery动画与ajax

作者: jamesXiao_ | 来源:发表于2017-06-25 16:56 被阅读0次

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

    • 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
      这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。

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

    • html([val|fn]) 获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容。
    • text([val|fn]) 得到匹配元素集合中每个元素的合并文本,包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。

    $.extend 的作用和用法?

    • 将两个或更多对象的内容合并到第一个对象。
    var object1 = {
      apple: 0,
      banana: {weight: 52, price: 100},
      cherry: 97
    };
    var object2 = {
      banana: {price: 200},
      durian: 100
    };
     
    // merge object2 into object1 
    // 相同的第二个会覆盖第一个  {"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
    $.extend(object1, object2);
    

    jQuery 的链式调用是什么?

    • jQuery链式调用:在对象上一次性调动多个方法
      $(this).addClass("active").siblings().removeClass("active")
    • 因为大部分对象方法的最后是return this,所以有了链式调用,简易代码。

    jQuery 中 data 函数的作用

    • data([key],[value]) 在元素上存放或读取数据,返回jQuery对象。

    写出以下功能对应的 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', 'xxx')
    $node.attr('src', 'xxx')
    $node.attr('title', 'xxx')
    
    
    给$node 添加自定义属性data-src
    $node.attr('data-src', 'xxx')
    
     在$ct 内部最开头添加元素$node
    $ct .prepend($node)
    $node.prependTo($ct)
    
     在$ct 内部最末尾添加元素$node
    $ct.append($node)
    $node.appendTo($ct)
    
    删除$node
    $node.detach();
    
    把$ct里内容清空
    $ct.empty()
    
     在$ct 里设置 html <div class="btn"></div>
    $ct.html('<div class="btn"></div>')
    
     获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
    
    // 不包括内边距、外边距、边框:
    $node.height()   
    $node.width()
    
    // 包括高宽和内边距
    $node.innerWdht()
    $node.innerHeight(); 
    
    // 包括高宽,内边距,边框
    $node.outerHeight() 
    $node.outerWidth() 
    
    // 包括高宽,内边距,边框,外边距
    $node.outerHeight(true) 
    $node.outerWidth(true) 
    
    获取窗口滚动条垂直滚动距离
    $(window).scrollTop();
    
    获取$node 到根节点水平、垂直偏移距离
    $node.offset()
    
    修改$node 的样式,字体颜色设置红色,字体大小设置14px
    $node.css({
    'color': 'red',
     'font-size': '14px'
    })
    
    遍历节点,把每个节点里面的文本内容重复一遍
    $node.forEach(function (value, index) {
      console.log(value);
    })
    
    从$ct 里查找 class 为 .item的子元素
    $ct.find('.item')
    
    获取$ct 里面的所有孩子
    $ct.children()
    
    对于$node,向上找到 class 为'.ct'的父亲,在从该父亲找到'.panel'的孩子
    $node.parents('.ct'),find('.panel')
    
    获取选择元素的数量
    $(element).length
    
    获取当前元素在兄弟中的排行
    $node.index()
    

    相关文章

      网友评论

          本文标题:jQuery动画与ajax

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