美文网首页
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

    jQuery动画与ajax jQuery 中, $(document).ready()是什么意思 jQuery的l...

  • Ajax实现登陆验证

    关于jquery与Ajax jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法,能...

  • jQuery动画与ajax

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

  • jQuery动画与ajax

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

  • jQuery动画与Ajax

    jQuery 中, $(document).ready()是什么意思? 必须在DOM元素加载完成后,即DOM树建立...

  • jQuery动画与ajax

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

  • JQuery动画与ajax

    1. jQuery 中, $(document).ready()是什么意思? 当DOM准备就绪时,指定一个函数来执...

  • jQuery动画与ajax

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

  • jQuery动画与ajax

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

  • jQuery动画与ajax

    1、 jQuery 中, $(document).ready()是什么意思? 主要用来加载DOM,替代原生Java...

网友评论

      本文标题:JQuery动画与Ajax

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