美文网首页
JQuery动画与Ajax

JQuery动画与Ajax

作者: hellowade | 来源:发表于2017-07-28 19:37 被阅读0次

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

     当DOM已加载完毕后,执行ready()内容。
    

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

    <body>
    <div class="test">
      <p>这是一段测试</p>
    </div>
      <script>
        console.log($('.test').html())    //输出结果:<p>这是一段测试</p>
        console.log($('.test').text())     //输出结果:这是一段测试
      </script>
    </body>
    

    $node.html()获取对象的Html结构
    $node.text()获取对象的text

    3. $.extend 的作用和用法?

    用法:jQuery.extend( target [, object1 ] [, objectN ] ),将两个或更多对象的内容合并到第一个对象,也可用于深拷贝。

      <script>
        var target = {} 
        $.extend(target,{a:1, b:2},{c:3})
        console.log(target) //{ a: 1, b: 2, c: 3}   
      </script>  
    

    4. jQuery 的链式调用是什么?

        jQuery调用相关api之后会返回一个该方法处理过后的jQuery对象(回调),这样可以在一条语句中调用多种API。
    

    5. jQuery 中 data 函数的作用

    在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值

      <div class="test">
        <p>这是一段<span>测试</span>测试</p>
      </div>
      <script>
    $(".test").data("add", "测试");
    $(".test").data("addMath", { time: "7.28"});
    console.log($(".test").data());   //{add: "测试", addMath: {time: "7.28"}}
    console.log($(".test").data("add"))  //"测试
    

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

      <style>
        .active{
          color: red;
        }
      </style>
    </head>
    <body>
      <div id="test">
        <h2>这是一个测试</h2>
        ![image](https://img.haomeiwen.com/i6470442/dbbb2c3b010bc4ad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      </div>
      <script>
        $('div>h2').addClass('active')  //增加active样式
        $('div>h2').removeClass('active')  //删除acvtive样式
        $('div>img').css('display','block')  //显示隐藏元素
        $('div>img').css('display','none')  //隐藏元素
        $('div').attr('id')   //获取id属性
        $('div>img').attr('src') //获取src属性
        $('div>img').attr('title')  //获取title属性
        $('div').attr('id','task')
        console.log($('div').attr('id')) //修改id值,输出id值为'task',src、title同理
        $('div').attr('data-src','')  //添加自定义属性
        $('div').prepend('<p>放在内部的最开头</p>')  //开头插入
        $('div').append('<p>放在内部的最末尾</p>')     //末尾插入
        $('div>h2').remove()  //删除元素
        $('div').empty()  //清空元素
        $('div').html('<div class="btn">这是设置的html元素</div>')  //设置html元素
        $('div').height()   //获取不包含内边距的高度;.width()获取不包含内边距的宽度
        $('div').height('40px')  //设置高度;.width('40px')同理
        $('div').innerHeight()  //获取包含内边距的高度
        $('div').outerHeight()  //获取包含边框的高度
        $('div').outerHeight(true)  //获取包含外边距的高度
        $(window).scrollTop()  //获取窗口滚动条垂直滚动距离
        $('div').offset()   //获取$node 到根节点水平、垂直偏移距离
        $('div').css({'color': 'red','font-size':'14px'})
        $('div').each(function(index,node){
          var str = $(node).text() + $(node).text()
          $(node).text(str)
        })  //遍历节点,把每个节点里面的文本内容重复一遍
        $('div').find('.item') //查找 class 为 .item的子元素
        $('div').children()  //获取$ct 里面的所有孩子
        $node.parents('.ct').find('.panel') //向上找到 class 为'.ct'的父亲,在从该父亲找到'.panel'的孩子
        $node.length  //获取选择元素的数量
        $node.index()  //获取当前元素在兄弟中的排行
    

    题目7代码
    题目8前端代码

    后台代码
    app.get('/loadMore', function(req, res){
        var curIdx = req.query.index
        var len = req.query.length
        var data = []
        for(var i = 0; i < len; i++){
            data.push('内容' + (parseInt(curIdx) + i))
        }
        res.send(data)
    })
    

    相关文章

      网友评论

          本文标题:JQuery动画与Ajax

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