美文网首页
jquery 常用方法&ajax

jquery 常用方法&ajax

作者: candy252324 | 来源:发表于2017-02-20 17:08 被阅读0次

    问答

    1.Jquery 中, $(document).ready()是什么意思?和window.onload 的区别? 还有其他什么写法或者替代方法?

    (1)$(document).ready()

    • 等页面中所有的节点都加载完后就执行后面的代码(页面中的音频、视频、图片等可能并没有加载完)
    • 可以编写多个
    • 可以简写成$().ready(function(){})$(function(){})

    (2)window.onload

    • 当页面中所有的内容(包括音频、视频、图片等)都加载完成之后再执行后面的代码
    • 不能编写多个,后面的会覆盖前面的

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

    • .html()获取匹配元素集合中第一个元素的Html内容(包括html标签),.html(string)设置每个匹配元素的html内容。
    • .text()获取每个匹配元素(包括它们的后代)文本的合并,text(string)设置每个匹配元素的文本。
    <div>AA
          <p>BB
            <span>CC</span>
          </p>
        </div>
    <div>aa
         <p>bb
            <span>cc</span>
         </p>
    </div>
    <script >
          $("div").html()  // 返回的是第一个div中的html,"AA<p>BB<span>CC</span></p>"
          $("div").text() //返回的是两个div(包括它们的后代)的文本的合集,"AABBCCaabbcc"
          $("div").html("<span>hh</span>")  //[<div><span>hh</span>​​</div>​, <div><span>hh</span></div>​]
          $("div").text("kk") //[<div>​kk​</div>​, <div>​kk​</div>​]
    </script>
    

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

    作用:将两个或更多对象的内容合并到第一个对象。
    语法: $.extend( [bool], target, object1 [, objectN ] )
    [deep]:可选。默认false。如果是true,合并成为递归(又叫做深拷贝)。
    [target]:目标对象。将被修改,如果我们想保留原对象,我们可以通过传递一个空对象作为目标对象。
    [object1]:合并到新的属性的第一个参数。
    [,objectN]:可选。合并到新的属性的第N个参数。
    无deep参数时

    var target={}
          $.extend(
              target, 
              {name:{fruit:"apple",sport:"swim"},age:18},
              {age:20,color:red},
              {name:{fruit:"pear"},age:30}
          )
    console.log(target)   //{age:30, color:"red", name:{ fruit:"pear" }}
    

    参数为true时候

    var target={}
          $.extend(
              true,
              target, 
              {name:{fruit:"apple",sport:"swim"},age:18},
              {age:20,color:"red"},
              {name:{fruit:"pear"},age:30}
          )
    console.log(target)   //{age:30, color:"red", name:{ fruit:"pear", sport:"swim" }}
    

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

    当jQuery的方法的返回值仍为当前对象时可以继续调用该对象的方法就叫做链式调用。

    $(ele).parents().find().addClass().hide();
    

    5.JQuery ajax 中缓存怎样控制?

    • jQuery ajax方法中利用cache参数来控制缓存。
      cache设置为true浏览器将缓存页面(默认为ture,dataType为”script”和”jsonp”时默认为false。)
      设置为false,浏览器将不会缓存页面(比如一些需要实时更新的东西,如天气等)。
    • 在get请求参数中附加一个时间戳={timestamp},由于时间一直在变化,这样发生网络请求时,浏览器会认为这不是同一个页面,因此不会从缓存获取数据,而是重新发送请求获取数据。

    6.jquery 中 data 函数的作用

    作用:在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。通过data()函数存取的数据都是临时数据,页面刷新之后,之前存放的数据都将不在。

    • .data( key, value ) :在匹配元素上存储任意相关数据.
    • .data( key ) :返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
    <div class="box1"></div>
    <div class="box2"></div>
    <script>
    $(".box1").data("fruit","pear")      //存数据
    $(".box2").data("fruit",{apple:"like",cherry:"hate"})      //存数据
    $(".box1").data("fruit")   // "pear",取数据
    $(".box2").data("fruit")  // {apple: "like", cherry: "hate"} ,取数据
    $("div").data("fruit")     //"pear", 返回第一个div上的数据
    </script>
    

    代码

    代码题1
    代码题2
    代码题3

    相关文章

      网友评论

          本文标题:jquery 常用方法&ajax

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