• jQuery 常用核心方法


    jQuery 常用核心方法

    .each()

    遍历一个jQuery对象,为每个匹配元素执行一个函数

    $('p').each(function(idx,node){
      $(node).text(idx + ':' + 'hello')
    })
    

    $.extend()

    jQuery.extend([deep,] target [, object1 ] [, objectN ] )
    把多个对象进行合并,把所有的属性添加到第一个对象上

    • 当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target参数)。

    • 如果只有一个参数提供给$.extend(),这意味着目标参数被省略。在这种情况下,jQuery对象本身被默认为目标对象。这样,我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。即{}为默认属性,用户向里面设置属性,覆盖掉默认的属性,没有设置的即使用默认属性。

    var object = $.extend({}, object1, object2)
    
    var object1 = {
      apple: 0,
      banana: { weight: 52, price: 100 },
      cherry: 97
    }
    var object2 = {
      banana: { price: 200 },
      durian: 100
    }
    
    // 将obj2合并到obj1上的案例
    $.extend( object1, object2 )
    

    .clone()

    .clone()方法深度复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。
    通常我们将页面上一个元素插入到DOM里另一个地方,它会被从老地方移走,类似剪切的效果。

    例如:

    <div class="container">
        <div class="hello">Hello</div>
        <div class="world">World</div>
    </div>
    
    $('.hello').appendTo('.world');
    
    <div class="container">
      <div class="world">
        World
        <div class="hello">Hello</div>
      </div>
    </div>
    

    如果需要的是复制而不是剪切,可以像下面这样写代码:

    $('.hello').clone().appendTo('.world')
    

    .index()

    从给定集合中查找特定元素 index下标

    • 没参数返回第一个元素index
    • 如果参数是 DOM对象 或者 jQuery对象 ,则返回参数在集合中的index
    • 如果参数是选择器,返回第一个匹配元素index,没有找到返回-1
    $('p').eq(2).index()  //2
    $('.ok').index('div')  //获取div标签中的.ok的下标
    

    .ready()

    相当于原生JS的document.onDOMContentLoaded
    当DOM准备就绪时,指定一个函数来执行。

    例如执行的代码需要在元素被加载之后才能使用时,(例如,取得图片的大小需要在图片被加载完后才行),就需要将这样的代码放到 load 事件中。

    下面两种写法都是等同的

    $(document).ready(function(){
    })
    
    $(function(){
    })
    

    示例

    $(function(){
        console.log('ready')
    })
    

    window.onload 和 $(document).ready

    开发中我们经常需要给一些元素的事件绑定处理函数。但问题是,如果那个元素还没有被加载到页面上,但是绑定事件已经执行完了,是没有效果的。这两个事件大致就是用来避免这样一种情况,将绑定的函数放在这两个事件的回调中,保证能在页面的某些元素加载完毕之后再绑定事件的函数。那window.onload 和 $(document).ready 有什么区别?document.onDOMContentLoaded 呢?

    window.onload 和 $(document).ready 有什么区别?

    1. 执行时间不同

    window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
    $(document).ready()是 DOM结构 绘制完毕后就执行,不必等到所有页面元素加载完毕。

    1. 两个方法重复执行的不同

    window.onload不能同时编写多个,如果有多个window.onload方法,只会执行最后一个
    $(document).ready()可以同时编写多个,并且都可以得到执行。
    如果两个方法都写了,那么$(document).ready()是比window.onload要先执行的。

    1. 简化写法

    window.onload没有简化写法
    $(document).ready(function(){})可以简写成$(function(){})

    document.onDOMContentLoaded 呢?

    document.onDOMContentLoaded相当于 jQuery 当中的.ready()。当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完成加载。

    jQuery文档介绍 中有一段解释这两个不是同一个功能

     

    翻译

    ready()方法提供了一种方法,可以在页面的DOM文档对象模型变得可以安全操作时立即运行JavaScript代码。这通常是在用户查看或与页面交互之前执行所需任务的好时机,例如添加事件处理程序和初始化插件。当通过对该方法的连续调用添加多个函数时,它们在DOM准备好并按照添加顺序运行。在jQuery 3.0中,jQuery确保在一个处理程序中发生异常不会阻止随后添加的处理程序执行。

    大多数浏览器以 DOMContentLoaded 事件的形式提供了类似的功能。然而,jQuery的 .ready() 方法有一个重要而有用的不同之处:如果DOM准备好了,浏览器在代码调用 .ready(handler) 之前就加载了 DOMContentLoaded ,那么函数处理程序仍然会被执行。相反,在事件触发后添加的DOMContentLoaded 事件侦听器从未执行。

    所以document.onDOMContentLoaded并不等同于jQuery中的.ready(),只能说是一种类似的方法。

  • 相关阅读:
    设计模式一 Simple Factory, Factory Method, Abstract Factory以及Builder模式简述
    SQL Server中对XML操作
    开发常用小工具介绍
    强制休息程序 EyeGuardian 眼睛守护者 Beta测试版
    定时计划任务方案比较以及通过脚本创建计划任务(SchTasks命令)
    在Myeclipse中配置Maven
    Jena的环境配置
    0x01_go代码简单示例
    0x00_go语言安装
    信息收集工具
  • 原文地址:https://www.cnblogs.com/evenyao/p/9462717.html
Copyright © 2020-2023  润新知