美文网首页
jQuery动画与ajax

jQuery动画与ajax

作者: 萧雪圣 | 来源:发表于2017-05-04 17:58 被阅读7次

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

    $(document).ready() 方法是为了防止在文档完全加载之前运行方法内代码,因为如果文档没有完全加载就运行代码可能会造成操作失败。
    所以一般js代码都放在body标签尾部,使用ready事件,作用相当于把js写到body末尾。

    $(document).ready(function (){
    
    });
    可以简写成:
    $(function (){
    
    });
    

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

    • $node.html(),返回所选择元素内的html内容,包含html标签和文本内容
    • $node.text(),返回所选择元素内的文本内容,不包含html标签,只包含文本内容

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

    $.extend( [deep ], target, object1 [, objectN ] )

    $.extend()将多个对象合并到一起,可以传入多个参数。$.extend([deep,] target,…)[deep,]为布尔值默认情况不是深拷贝,可设置true为深拷贝

    //定义一个对象
    var obj={
        name:'lulu',
        age:27,
        sex:'woman'
    };
    //定义一个新对象
    var newObj={
        name:'李四',
        age:20
    };
    //extend方法接受多个参数,并且第一个对象被覆盖
    $.extend(obj,newObj,{
        name:'张三',
        age:25,
        like:'eat'
    });
    console.log(obj);
    //object{
    //age:25,
    //like:"eat",
    //name:"张三",
    //sex:"woman"
    //
    }
    

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

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

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

    作用:data方法允许在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。
    语法:$(“selector”).data(key, value)。

    题目6:写出以下功能对应的 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', valuse)
    $node.attr('src', valuse);
    $node.attr('title', valuse);
    

    给$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.detach();   //保留内部数据
    $node.remove(); //不保留内部数据
    

    把$ct里内容清空

    $ct.empty();
    

    在$ct 里设置 html <div class="btn"></div>

    $ct.html('<div class="btn"></div>');
    

    获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

    $node.width();
    $node.hight();
    // 获取宽高,输入参数则是设置宽高
    
    $node.innerWidth();
    $node.innerHeight();
    // 获取包括内边距的宽高,输入参数则是设置宽高
    
    $node.outerWidth();
    $node.outerHeight();
    // 获取包括内边距、边框的宽高,输入参数则是设置宽高
    
    $node.outerWidth();
    $node.outerHeight();
    // 获取包括内边距、边框、外边距的宽高,不支持设置宽高
    

    获取窗口滚动条垂直滚动距离

    $(window).scrollTop() || $(document).scrollTop();
    

    获取$node 到根节点水平、垂直偏移距离

    $node.offset(); // 获取到根节点水平、垂直偏移距离
    $node.offset({ top: 200, left: 50}); // 设置 $node 到根节点水平、垂直偏移距离
    

    修改$node 的样式,字体颜色设置红色,字体大小设置14px

    $node.css({
            color: 'red',
            fontSize: '14px'
    });
    

    遍历节点,把每个节点里面的文本内容重复一遍

    $(document).each(function () {
       var $this = $(this),
             $text = $this.text();
       $this.text($text + $text);
    });
    

    从$ct 里查找 class 为 .item的子元素

    $ct.find('.item');
    

    获取$ct 里面的所有孩子

    $ct.children();
    

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

    $node.parsents('.ct').find('.panel');
    

    获取选择元素的数量

    $node.length;
    

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

    $node.index();
    

    题目7:

    • 用jQuery实现以下操作
    • 当点击$btn 时,让 $btn 的背景色变为红色再变为蓝色
    • 当窗口滚动时,获取垂直滚动距离
    • 当鼠标放置到$div 上,把$div 背景色改为红色,移出鼠标背景色变为白色
    • 当鼠标激活 input 输入框时让输入框边框变为蓝色,当输入框内容改变时把输入框里的文字小写变为大写,
    • 当输入框失去焦点时去掉边框蓝色,控制台展示输入框里的文字
    • 当选择 select 后,获取用户选择的内容

    实现代码

    题目8: 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览142

    Github代码地址

    本地实现效果.png image.png

    相关文章

      网友评论

          本文标题:jQuery动画与ajax

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