美文网首页
jQuery Animation & Ajax

jQuery Animation & Ajax

作者: 普莱那 | 来源:发表于2017-03-15 23:58 被阅读15次

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

    $(document).ready()是当文档中的DOM节点加载完成后,在加载外部图片和资
    源前,执行ready()里面的操作。
    window.onload是整个页面加载完成(包括图片、CSS、脚本等)后,执行
    onload()中的操作。
    

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

    
    $node.html()获取匹配集合中第一个匹配元素的html内容,或设置所有匹配元素
    的html内容(如果传入参数的话)
    $node.text()获取匹配集合中所有元素的文本内容的结合,包括他们的子元素,
    或设置所有匹配元素的文本内容
    

    题目3: $.extend 的作用和用法?

    将两个或更多的对象的内容合并到目标对象中,如果内容的属性名有重复,后面的属性值会覆盖之前的属性值。
    如果我们要创建新对象targetObj,写法可以是$.extend([deep],targetObj,obj1[,objN])或者也可以是var targetObj = $.extent([deep,]{},obj1[,objN])

    [deep]可选。类型: Boolean。如果是true,合并成为递归(又叫做深拷贝)。不能设置成false。
    object1合并到新的属性的第一个参数。
    objN,可选,合并到新对象的第N个参数
    

    题目4: jQuery 的链式调用是什么?

    链式调用就是分步骤地对jQuery对象实现各种操作。
    它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。
    优点:
    1.代码更精简。链式调用能大大精简代码量,多项操作一行代码一气呵成;
    2.优化性能。使用链式调用,所有操作代码共享一个jQuery对象,省去了逐步查询DOM元素的性能损耗。

    题目5: jQuery 中 data 函数的作用

    .data( key, value )在匹配元素上存储任意相关的数据。
    key存储的数据的名称。
    value数据的值。除了undefined都可以。
    .data( obj )更新数据。

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

    给元素 $node 添加 class active,给元素 $noed 删除 class active
    $node.addClass('className')
    $node.removeClass('className')
    展示元素$node, 隐藏元素$node
    $node.show(during)//during可设置出现过程持续时间
    $node.hide(during)//during可设置隐藏过程持续时间
    获取元素$node 的 属性: id、src、title, 修改以上属性

    $node.arrt('id') //获取
    $node.attr('src') //获取
    $node.attr('title') //获取
    $node.arrt('id','idName') //设置
    $node.attr('src','srcValue')//设置
    $node.attr('title','titleValue')//设置
    

    给$node 添加自定义属性data-src
    $node.arrt('data-src','val')
    在$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 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

    console.log($node.width());  //不包括内边距
    console.log($node.height()); //不包括内边距
    console.log($node.innerWidth()); //包括内边距
    console.log($node.innerHeight()); //包括内边距
    console.log($node.outerWidth()); //包括边框
    console.log($node.outerHeight()); //包括边框
    console.log($node.outerWidth(true)); //包括外边距
    console.log($node.outerHeight(true)); //包括外边距
    

    获取窗口滚动条垂直滚动距离
    $(window).scrollTop()
    获取$node 到根节点水平、垂直偏移距离
    点击预览
    修改$node 的样式,字体颜色设置红色,字体大小设置14px

    $node.css({
      color: 'red',  //属性值必须加引号
      'font-size':'14px' //有中横线的属性必须有引号,或者不加引号,写成camelCase的形式
    })
    

    遍历节点,把每个节点里面的文本内容重复一遍
    点击预览吧
    从$ct 里查找 class 为 .item的子元素

    $ct.find('.item') //$ct里所有的.item元素
    $ct.children('.item') //$ct的直接子元素中的.item元素
    

    获取$ct 里面的所有孩子

    $ct.children()
    

    对于$node,向上找到 class 为'.ct'的父亲,在从该父亲找到'.panel'的孩子

    $node.parents('.ct').find('.panel')
    

    获取选择元素的数量

    $node.length()
    

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

    $node.index()
    

    题目七

    [点我预览吧](https://younger-peng.github.io/blog1/task30.html

    题目八

    jQuery-ajax

    题目九

    Weather API

    相关文章

      网友评论

          本文标题:jQuery Animation & Ajax

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