jquery——笔记一——$(document).ready()

最新推荐文章于 2025-10-18 09:28:40 发布
原创 最新推荐文章于 2025-10-18 09:28:40 发布 · 530 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #function #javascript #html

本文介绍了如何利用原生JavaScript及jQuery在页面加载完成后为指定元素动态添加CSS类的方法。通过`<body onload>`属性与`$(document).ready()`函数实现，这种方式无需修改HTML结构，仅通过JavaScript即可实现样式更改。

html+javascript:

需要在页面加载后 

onload:

<html>

<title>

<script type="text/javascript">

function addClass(){

/*

* 更改poem-stanza样式

*/

}

</script>

</title>

<body onload="addClass()">

<div id="poem-stanza">poem-stanza</div>

</body>

</html>

Jquery:

<html>

<script type="text/javascript">

$(document).ready(function(){

$(".poem-stanza").addClass("highlight");

});

</script>

<body >

<div class="poem-stanza">poem-stanza</div>

</body>

</html>

$(document).ready() 的结构预定DOM加载完成后(不必等待图片加载完成)触发的函数调用。

且这种技术不用修改html文件，只在javascript内部进行修改。

$(document).ready(function() {

  $('.poem-stanza').addClass('highlight');

});


Jquery中的$(document).ready()详解
寒泉
10-01 2万+
参考：https://blog.csdn.net/beidaol/article/details/81009740 因为html代码顺序执行，所以想要在js操作某个标签元素的时候，要保证这个元素已经被加载出来了，否则会取不到。为了保证元素已经被加载，可以使用$(document).ready()。 window.onload = function(){ alert("welcome"); } ...
jQuery(document).ready(function($) { });的几种表示方法
11-24
在写jquery的时候，因为平时用sublime text快捷键生成jQuery(document).ready(function($) { });，所以忘记了其他的几种表示方法，今天花了几分钟特意记录了一下。
jQuery .ready() 方法完全指南：确保 DOM 安全操作的基石
最新发布
weixin_42107409的博客
10-18 723
本文介绍了jQuery中.ready()方法的核心概念和使用要点。.ready()会在DOM加载完成后立即执行，而无需等待图片等外部资源加载，比window.onload更早触发。文章详细讲解了.ready()的三种语法形式，推荐使用简洁的$(function(){...})写法。通过对比表格明确区分了.ready()和window.onload的关键差异。最后给出了最佳实践建议：所有jQuery代码都应包裹在.ready()中，放在</body>前，使用简写形式。这是确保DOM操作安全可靠的基
jQuery之$(document)
热门推荐
小菜鸟的博客
06-24 2万+
$(document)是一个选择器，选中的是整个html所有元素的集合。     $(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载，并且在页面内容加载之前。     使用 $(document).ready()，你能让你的事件在window加载之前加载或触发。所有你写在这个方法里面的都准备在最早的时刻加载或触发。也就是说，一旦DOM在浏览器中注
使用JS实现JQuery的document.ready功能
Sand_Ant的专栏
09-02 1434
一、说明 我们往往要通过js对页面做一些默认设置，如果使用jquery框架，使用其ready方法很容易，以下是使用纯js模拟的一个ready方法。 此程序为其他博主的作品，我只是在实现基础上做了一点点修改而已，原出处http://qinglangee.iteye.com/blog/761303 二、程序代码 (function() { var ie = !!(window.attac
简单易用的倒计时插件——jQuery.downCount.js.zip
09-21
$(document).ready(function() { $('#countdown').downCount({ date: '2023/12/31 00:00:00', // 设置倒计时的结束时间 offset: GMT+8 // 设置时区，此处为东八区 }, function() { alert('倒计时结束！'); });...
简单好用的jQuery插件——Tdrag.js可以任意拖拽div内容.zip
09-21
$(document).ready(function() { $('.tdrag').tdrag(); }); ``` 在这个例子中，`#draggableDiv`就是我们可以拖动的div元素。`tdrag`类名是`Tdrag.js`插件识别可拖动元素的关键，而`$.fn.tdrag()`则是初始化该功能...
jQuery.flipster——简单好用的立体式banner切换插件.zip
09-22
$(document).ready(function() { $('.flipster').flipster({ // 这里可以设置插件的选项，如：style: 'carousel', navigation: true等 }); }); ``` 通过调整插件的选项，你可以定制轮播的动画样式（如翻转、旋转...
Jquery 学习笔记（一）
12-01
总的来说，这篇学习笔记介绍的jQuery基础知识包括了使用`$(document).ready()`或`$(function() {...})`来处理页面加载事件，理解jQuery对象和DOM对象的区别以及它们之间的转换方法。这些概念构成了进一步学习jQuery...
jQuery的Ajax中dataType选项用于设置返回值类型
胡争辉
09-24 1万+
jQuery的Ajax中dataType选项用于设置返回值类型 [jQuery的Ajax文档] http://docs.jquery.com/Ajax/jQuery.ajax#options [jQuery官方网站] http://jquery.com/ [jQuery下载地址] http://docs.jquery.com/Downloadin
jQuery中的$(doncument).ready()详解
qq_62042780的博客
05-27 1995
window.onload=function(){alert("welcome");} 该语句的作用是希望在页面加载完，自动执行定义JS代码（function）。 $(document).ready(function(){……})这个函数是用来取代页面中的window.onload; $(document).ready()方法是事件模块中最重要的一个函数，可以极大的提高Web应用程序的响应速度。 一、$(document).ready()和onload的区别 1.执行时机 JS(window.on
jQuery中$(document).ready()函数的理解
Allenyhy的博客
10-26 8730
$(document).ready()方法是事件模块中最重要的一个函数，可以极大的提高Web应用程序的响应速度，jQuery就是用$(document).ready()方法来代替传统的JS的window.onload方法的 下面利用对比的方式，可以加深对$(document).ready()的理解 1.执行时机 JS（window.onload）：网页中所有的元素（包括元素的所有关联文件）完...
jQuery事件详解之$(document)
AnitaSun的博客
04-22 1313
执行时机 window.onload是在网页中所有元素加上所有资源完全加载到浏览器后才执行。 而$(document).ready()中绑定的事件是在dom完全就绪时就可以被调用，此时对于jQuery来说都是可以被访问的（关联的资源可能并没有被加载完毕） 举个例子来说，在$(document).ready()中定义了图片的宽高，但由于此时图片还没有被加载完毕，此时的宽高不会生效。要解决这个问题可以使用jQuery中的load()方法。 load()方法会在元素的onload事件中绑定一个处理函数，如果该处
jQuery的$(document) 多种写法
zlzbt
04-19 8147
$(document) 是当前文档，就是你看到的整个网页 $(document.body) =$('body') 两种写法代表的是同一个对象 $("body") 是一个选择器，jQuery 会从 DOM 顶端开始搜索，直到找到标签为 body 的元素。 而 $(document.body) 中的 document.body 已经是一个 DOM 对象，jQuery 可以直接使用此元素。 ...
jQuery中$ $()与$(document) this与$(this)三个的区别
初心不改，事在人为
09-08 1121
$是jquery专用的特殊符号，bai可以说所有dujquery函数的调用都是从$开始的 $()在jquery里面表示一zhi个选择器，括号dao里面填写一定的表达式就可以选中你想要的元素，jquery的选择器除了能很好地遵循css的表达式外，还额外提供了一些更个性化的选择方式，比如$("div li:nth-child(2)")选中的是div中的第2个li元素。 关于选择器的更多用法可以百度一下jquery的api $(document)是一个选择器，选中的是整个html所有元素的集合。 $(functi
jQuery 的 $().ready() 方法到底是干什么的？
长风破浪会有时的博客
01-23 1041
是一个非常有用的 jQuery 方法，它可以确保你的 JavaScript 代码在页面的所有内容都加载完毕后再执行。这有助于避免由于元素尚未加载而导致的操作失败或错误。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值