美文网首页
JQuery动画与ajax

JQuery动画与ajax

作者: BAWScipes | 来源:发表于2017-11-25 20:08 被阅读0次
    1.jQuery中,$(document).ready()是什么意思?

    页面DOM结构加载完毕后,脚本就可以运行。传递处理函数给.ready()方法,能保证DOM准备好后就执行这个函数。
    如果执行的代码需要在元素被加载之后才能使用时,(例如,取得图片的大小需要在图片被加载完后才能知道),就需要将这样的代码放到 load 事件中。
    $(document).ready(handler) 等价于 $(handler)

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

    $node.html() 获取元素HTML内容,包括html标签和文本内容
    $node.text() 获取元素文本内容,只包括文本内容,不包括标签

      <div class="wrap">
        <p>Hello World!</p>
      </div>
      console.log($('.wrap').html())  // <p>Hello World!</p>
      console.log($('.wrap').text())  // Hello World!
    
    3.$.extend的作用与用法?
      JQuery.extend([deep,]target[,object1][,objectN])
    

    $.extend()是指将一个或者多个对象的内容合并到第一个对象中,若有重复的内容则会被覆盖。

      var obj1 = { a: '1'}
      var obj2 = { b: '2', c: '3'}
      var obj3 = { b: '3', d: '5'}
      var obj4 = {}
      $.extend(obj1,obj2); //obj1 ={a: '1', b: '2', c: '3'}
      $.extend(obj1,obj2,obj3); //obj1 ={a: '1', b: '3', c: '3', d: '5'}
      $.extend(obj4,obj1,obj2,obj3); //obj4 ={a: '1', b: '3', c: '3', d: '5'}
      var obj5 = $.extend({},obj1,obj2,obj3); //obj5 ={a: '1', b: '3', c: '3', d: '5'}
    
    4.jQuery的链式调用是什么?

    对一个jQuery方法进行多次多种方法的调用,其原理是通过对象上每个方法最后返回本对象--this。因为返回的是同一对象,所以链式操作就能持续下去。

    $('.box').find('p').text('This is a message');
    
    5.jQuery中data函数的作用

    data函数用于在当前jQuery对象所匹配的所有元素上存取数据。
    data() 以对象形式返回之前存储的所有数据
    data(key) 以指定的键名key存取数据
    data(key,value) 以键名key存放值为value的数据
    data(object) 以对象形式同时传入任意多个key-value的数据

    6.写出以下功能对应的jQuery方法
      $node.addClass('active');   //给元素 $node 添加 class active
      $node.removeClass('active')   //给元素 $node 删除 class active
      $node.show()    //展示元素$node
      $node.hide()   //隐藏元素$node
      $node.attr('id')  //获取元素$node 的 属性: id
      $node.attr('src')  //获取元素$node 的 属性: src
      $node.attr('title')  //获取元素$node 的 属性: title
      $node.attr('id','xxx')  //修改元素$node 的 属性: id
      $node.attr('src','xxx')  //修改元素$node 的 属性: src
      $node.attr('title','xxx')  //修改元素$node 的 属性: title
      $node.attr('data-src','xxx') //给$node 添加自定义属性data-src
      $ct.prepend($node) or $node.prependTo($ct) //在$ct 内部最开头添加元素$node
      $ct.append($node) or $node.appendTo($ct) //在$ct 内部最末尾添加元素$node
      $node.remove() //删除$node
      $node.empty() //把$ct里内容清空
      $ct.html('<div class="btn"></div>') //在$ct 里设置 html <div class="btn"></div>
      $node.width()//获取$node 的宽度,不包括内边距
      $node.height()  //获取$node 的高度,不包括内边距
      $node.innerWidth()   //获取$node 的宽度,包括内边距不包括border
      $node.innerHeight()  //获取$node 的高度,包括内边距不包括border
      $node.outerWidth([includeMargin])  //获取$node 的宽度,包括内边距、边框,当includeMargin为true,则包括外边框,否则不包括外边框
      $node.outerHeight([includeMargin])  //获取$node 的高度,包括内边距、边框,当includeMargin为true,则包括外边框,否则不包括外边框
      $node.width('xxx')  //设置$node 的宽度 
      $node.height('xxx')  //设置$node 的高度
      $(wondow).scrollTop() //获取窗口滚动条垂直滚动距离
      $node.offset().left //获取$node 到根节点水平偏移距离
      $node.offset().top  //获取$node 到根节点垂直偏移距离
      $node.css({"color": "red","font-size": "14px"}) //修改$node 的样式,字体颜色设置红色,字体大小设置14px
      $node.each(function(){ console.log($(this).text())}) //遍历节点,把每个节点里面的文本内容重复一遍
      $ct.find('.item') //从$ct 里查找 class 为 .item的子元素
      $ct.children() //获取$ct 里面的所有孩子
      $node.parent('.ct').find('.panel') //对于$node,向上找到 class 为'.ct'的父亲,在从该父亲找到'.panel'的孩子
      $node.length //获取选择元素的数量
      $node.index() //获取当前元素在兄弟中的排行
    
    7.用jQuery实现以下操作

    Demo

    8.用jQuery ajax实现 当点击加载更多会加载数据展示到页面

    代码

    相关文章

      网友评论

          本文标题:JQuery动画与ajax

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