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 有什么区别?
- 执行时间不同
window.onload
必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()
是 DOM结构 绘制完毕后就执行,不必等到所有页面元素加载完毕。
- 两个方法重复执行的不同
window.onload
不能同时编写多个,如果有多个window.onload
方法,只会执行最后一个$(document).ready()
可以同时编写多个,并且都可以得到执行。
如果两个方法都写了,那么$(document).ready()
是比window.onload
要先执行的。
- 简化写法
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()
,只能说是一种类似的方法。
jQuery 常用核心方法的更多相关文章
- js与jquery常用数组方法总结
昨天被问数组方法的时候,问到sort()方法是否会改变原来的数组.本来我猜是不会,也是这么说,马上我又觉得,知识这种东西,不确定的时候直接说不确定或不知道就好,只是凭借着不确定的猜测或者是记忆,害人害 ...
- jQuery常用工具方法
前面的话 jQuery提供一些与元素无关的工具方法,不必选中元素,就可以直接使用这些方法.如果理解原生javascript的继承原理,那么就能理解工具方法的实质.它是定义在jQuery构造函数上的方法 ...
- jQuery常用属性方法大全 attr(),val()
@@@@属性篇: 写作本篇文章的意义:jQuery的教程千千万,却没有英文版的API讲的系统.到位,一些话用中文翻译过来味道就变了,所以我将英文版的API的一些常用的方法单独提出来放在这里,并用自己的 ...
- Jquery常用的方法总结
1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom ...
- jquery 常用基础方法
1 jquery常用方法: 2 取得标签元素里面内容与修改: 3 1.text()方法: 4 $(document).ready(function(){ 5 //alert("文档加载完毕& ...
- jQuery常用事件方法详解
目录 jQuery事件 ready(fn)|$(function(){}) jQuery.on() jQuery.click jQuery.data() jQuery.submit() jQuery事 ...
- JQuery常用函数方法全集
Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test ...
- jquery 常用工具方法
inArray(value, array [, fromIndex ])方法类似于原生javascript的indexOf()方法,没有找到匹配元素时它返回-1.如果数组第一个元素匹配参数,那么$.i ...
- jQuery常用的方法
each() 以每一个匹配的元素作为上下文来执行一个函数. size() jQuery 对象中元素的个数.
随机推荐
- Android SQLite案例
重点掌握execSQL()和rawQuery()方法,rawQuery()方法用于执行select语句. SQLiteOpenHelper,实现了onCreate和onUpgrade方法. 第一次创建 ...
- Python爬虫教程-14-爬虫使用filecookiejar保存cookie文件(人人网)
Python爬虫教程-14-爬虫使用filecookiejar保存cookie文件(人人网) 上一篇介绍了利用CookieJar访问人人网,本篇将使用filecookiejar将cookie以文件形式 ...
- idea maven打不了war包
开发的时候打不了war包,原因是 web.xml有问题或者是在idea里面webroot没有作为web引用, 添加之后WebRoot上面有个地球标志 就ok了
- Oracle案例07——ORA-28000: the account is locked
遇到这个错误,一般我们想到的是数据库用户被锁,只需要执行用户解锁即可恢复,但这里之所以写出来是因为比较奇葩的一个问题. 昨天下午接同事信息,说一个用户连接报被锁,经过沟通发现其实连接一个ADG的备库作 ...
- js 获取 网页屏幕高度 窗口高度 元素高度 滚动高度
常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...
- 远程桌面连接无法验证您希望连接的计算机的身份-mac连接远程桌面
在使用Mac(苹果笔记本)连接远程桌面的时候提示:”远程桌面连接无法验证您希望连接的计算机的身份”,具体异常如截图:解决方法如下:1. 登录云服务器.2. 打开运行,然后输入命令gpedit.msc, ...
- Win10安装msi程序报错2503和2502错误解决方案
刚升级了系统到win10,重新搭建开发环境,在安装scala的时候一直报2503.2502错误,如图 试了好几种办法都不好使,现在罗列依次用到的三种方法: 一.命令提示符(管理员)启动 "w ...
- 《SQL必知必会》总结
目录 第1章 了解SQL 第2章 检索数据 第3章 排序检索数据 第4章 过滤数据 第5章 高级数据过滤 第6章 用通配符进行过滤 第7章 创建计算字段 第8章 使用数据处理函数 第9章 汇总数据 ...
- 笔记,记事软件(RedbookNote, lifeopraph)
许多人重视记日记是因为它是一种以天为基础保存个人或商务信息的良好方式:持续跟踪每天的生活和思想上的点点滴滴,组织和巩固记忆.思考.商业交易.电子邮件.账单.未来计划.联系人列表,甚至是秘密信息.Lin ...
- 洛谷 P4321 【随机漫游】
题目大意 给出\(n(n\leq 18)\)个点的无向连通图,\(m(m\leq 10^5)\)次询问.每次询问给出一个点集和一个起点\(s\),询问从\(s\)出发,经过这个点集中的每一个点至少一次 ...