0

0

jQuery中的方法有哪些?jQuery中常用的方法(附代码)

不言

不言

发布时间:2018-08-13 13:36:49

|

2119人浏览过

|

来源于php中文网

原创

本篇文章给大家带来的内容是关于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里另一个地方,它会被从老地方移走,类似剪切的效果。

例如:

Hello
World
$('.hello').appendTo('.world');
World
Hello

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

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

.index()

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

  • 没参数返回第一个元素index

  • 如果参数是 DOM对象 或者 jQuery对象 ,则返回参数在集合中的index

  • 如果参数是选择器,返回第一个匹配元素index,没有找到返回-1

$('p').eq(2).index()  //2
$('.ok').index('p')  //获取p标签中的.ok的下标

.ready()

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

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

下面两种写法都是等同的

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

$(function(){
})

示例

动感购物HTML
动感购物HTML

修正了V1.10的一些BUG感购物HTML系统是集合目前网络所有购物系统为参考而开发,代码采用DIV编号,不管从速度还是安全我们都努力做到最好,此版虽为免费版但是功能齐全,无任何错误,特点有:专业的、全面的电子商务解决方案,使您可以轻松实现网上销售;自助式开放性的数据平台,为您提供充满个性化的设计空间;功能全面、操作简单的远程管理系统,让您在家中也可实现正常销售管理;严谨实用的全新商品数据库,便于

下载
$(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中图片无序预加载的实现以及使用方法

jQuery对象与原生DOM对象之间的区别及转换

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。

152

2023.09.12

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

313

2023.10.13

jquery删除元素的方法
jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

399

2023.11.10

jQuery hover()方法的使用
jQuery hover()方法的使用

hover()是jQuery中一个常用的方法,它用于绑定两个事件处理函数,这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容,可以阅读本专题下面的文章。

505

2023.12.04

jquery实现分页方法
jquery实现分页方法

在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容,可以阅读本专题下面的文章。

228

2023.12.06

jquery中隐藏元素是什么
jquery中隐藏元素是什么

jquery中隐藏元素是非常重要的一个概念,在使用jquery隐藏元素之前,需要先了解css样式中关于元素隐藏的属性,比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

121

2024.02.23

jquery中什么是高亮显示
jquery中什么是高亮显示

jquery中高亮显示是指对页面搜索关键词时进行高亮显示,其实现办法:1、先获取要高亮显示的行,获取搜索的内容,再遍历整行内容,最后添加高亮颜色;2、使用“jquery highlight”高亮插件。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

177

2024.02.23

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

Golang处理数据库错误教程合集
Golang处理数据库错误教程合集

本专题整合了Golang数据库错误处理方法、技巧、管理策略相关内容,阅读专题下面的文章了解更多详细内容。

2

2026.02.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 5.6万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 10.4万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号