Jquery中$(document).ready(function(){ })函数的使用详解

Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).ready(function(){});

使用jQuery的好处是它包装了各种浏览器版本对DOM对象(javascript的DOM对象你应该知道吧,就是它了)的操作.

比如jquery写法:

1 $("div p"); // (1)
2 $("div.container"); // (2)
3 $("div #msg"); // (3)
4 $("table a",context); // (4)
5 $("#myId"); //(5)

 第一行代码得到所有<div>标签下的<p>元素。

第二行代码得到class 为container的<div>元素,

第三行代码得到<div>标签下面id为msg的元素。

第四行代码得到context为 上下文的table里面所有的连接元素。

第五行代码得到id为myid的所有元素

如果你熟悉CSS,你会觉得这些写法很眼熟!对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。

现在回答你的具体问题吧

$(document).ready(function(){
alert("hello");
});(1)

html

1 <body οnlοad="alert('hello');">(2)

上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会冲突。基本上Jquery的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起 来,在初始化时不会发生冲突。

如果我们在

$(document).ready(function(){
加入内容A
});

内容A:

$(".btn-slide").click(function(){alert("你单击了a标签中class等于btn-slide的连接");
});

 则表示当我们单击class=btn-slide的超级连接时弹出“你单击了a标签中class等于btn-slide的连接”对话框.

如此方便易用,因此使用jquery是一个不错的选择。

$(document).ready()使用小结

window.onload = function(){ alert("welcome"); }

这样的写法作用是希望在页面加载完,自动执行定义js代码(function)。

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

这个函数是用来取代页面中的window.onload;

document.ready()和传统的方法<body οnlοad=”load()”> 相似

不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载,因此,使用 document.ready() 方法的执行速度比onload()的方法要快。

 Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作,

jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。比如:

<script type="text/javascript">
$(document).ready(function () {
alert("我的第一个jQuery代码!");
});
</script>

这段代码的意思是:当Dom Tree加载完成后,显示警告信息。

最后要注意两点:

确保在 <body> 元素的onload事件中没有注册函数,否则可能不会触发$(document).ready()事件。(我尝试用下面的例子来演示这个情况,但是没有成功,所以我想这种情况只是可能发生。)

 1 <html>
 2     <head>
 3         <title>
 4             My second jQuery
 5         </title>
 6         <script type="text/javascript" src="/js/jquery.js">
 7         </script>
 8         <script type="text/javascript">
 9             //下面是load的函数含有jquery注册函数$
10             function load() {
11                 $("p").append("<b>Hello</b>");
12             }
13             //下面是jQuery的代码
14             $(document).ready(function() {
15                 $("p").append("我的第一个jQuery代码!");
16                 $("p").append("<b>Hello</b>");
17             });
18         </script>
19     </head>
20     <body onload="load()">
21         <h2>
22             jQuery 简单例子2
23         </h2>
24         <p>
25             I would like to say:
26         </p>
27     </body>
28 
29 </html>

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/454631.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

爬虫数据executemany插入_金融数据的获取——一个爬虫的简单例子

对量化投资策略进行研究&#xff0c;第一步就是获取我们需要的数据。使用历史数据能够对策略进行回测&#xff0c;以验证策略的有效性和可信性。另一方面&#xff0c;量化投资本身也是一种对数据的研究&#xff0c;因此它也必须遵循数据分析的相关步骤。作为一个业余的量化投资…

洛谷 P1736 创意吃鱼法

P1736 创意吃鱼法 题目描述 回到家中的猫猫把三桶鱼全部转移到了她那长方形大池子中&#xff0c;然后开始思考&#xff1a;到底要以何种方法吃鱼呢&#xff08;猫猫就是这么可爱&#xff0c;吃鱼也要想好吃法 ^_*&#xff09;。她发现&#xff0c;把大池子视为01矩阵&#xff0…

程序员面试中遇到问题

面试时候经常会问的一些问题(不断补充中) 面试必备基础题目(虽然不一定常用, 仅用于面试, 面试就是把人搞的都不会然后砍价, 当然您可以讲我可以查资料完成, 但是面试的时候就是没道理的, 起码我是经常看到这些题). 如何把一段逗号分割的字符串转换成一个数组? request.getAtt…

linux检查swap配置,Linux环境下swap配置方法

8种机械键盘轴体对比本人程序员&#xff0c;要买一个写代码的键盘&#xff0c;请问红轴和茶轴怎么选&#xff1f;前言安装Linux系统之后&#xff0c;默认是没有swap分区&#xff0c;那么我们怎样增加和删除swap分区。配置swap步骤1) 内存占用情况1free -hSwap: 0B 0B 0B2) 通过…

react学习系列1 修改create-react-app配置支持stylus

注&#xff1a;由于前端更新非常快&#xff0c;写这篇文章时 create-react-app 使用的版本是1.4.1 最新的使用流程请参照官方文档。create-react-app 是facebook推出的快速创建react项目的命令行工具。 他和 vue-cli 类似。开箱即用&#xff0c;不用改一行配置就可以开发出针对…

Python 内置模块之 时间模块 datetime

概述 datatime模块重新封装了time模块&#xff0c;提供更多接口&#xff0c;datetime库定义了2个常量和5个类。 2个常量分别是&#xff1a; MINYEAR1MAXYEAR9999 5个类分别是&#xff1a; date类&#xff1a;表示日期的类time类&#xff1a;表示时间的类datetime类&#xf…

python自学网站需要多长时间-怎么自学python,大概要多久?

我泼点冷水&#xff1a;建议还是要慎重选择上来新手就自学Python。如果想认认真真打好基础&#xff0c;还是要至少从Java学起。换句话说&#xff0c;先学会Java&#xff0c;然后再学Python不迟。 Python的最大优势是简单明快&#xff0c;最大问题也是简单明快。 我面试过很多用…

[c/c++] programming之路(25)、字符串(六)——memset,Unicode及宽字符,strset

一、memset #include<stdio.h> #include<stdlib.h> #include<memory.h>void *mymemset(void *p, int num, int len) {char *px (char *)p;if (p NULL)return NULL;while (len>0){*px (char)num;px;len--;}return p;//因为上述代码是对px进行操作&#…

linux切换sid,linux – 将sid字段添加到ps -f输出

我正在阅读ps手册页,有一些我不明白的东西.-f does full-format listing. This option can be combined with many otherUNIX-style options to add additional columns. It also causes thecommand arguments to be printed. When used with -L, the NLWP (number ofthreads) …

使用Cross-Page Postback(跨页面提交)在页面间传递数据

页面间传递数据的几种方法 在页面间传递数据时&#xff0c;我们有以下几种选择&#xff1a; 1、Query String 一个很常见的方法&#xff0c;Query String是URL中问号之后的那一部分。其优点在于它是轻量级的&#xff0c;不会给服务器带来任何负担。而它也有几个缺点&#xff1a…

synchronized 和 lock 的区别

lock更灵活&#xff0c;可以自由定义多把锁的加锁解锁顺序&#xff08;synchronized要按照先加的后解顺序&#xff09; 提供多种加锁方案&#xff0c;lock 阻塞式, trylock 无阻塞式, lockInterruptily 可打断式&#xff0c; 还有trylock的带超时时间版本。 本质上和监视器锁&a…

win10怎么设置默认输入法_win10系统输入法失效打不了字怎么办

大家好&#xff0c;今天分享一篇来自小白系统官网(xiaobaixitong.com)的图文教程。最近有用户反映自己电脑上的win10系统出现输入法失效打不了字的问题&#xff0c;想知道有没有解决该问题的方法。小编经过一番查找后给大家整理出了针对该问题的解决方法&#xff0c;下面就让我…

Python 内置模块之 时间模块 time

time模块提供各种时间相关的功能,与时间相关的模块有&#xff1a;time,datetime,calendar 必要说明&#xff1a; 这个模块的功能不是适用于所有的平台 这个模块中定义的大部分函数是调用C平台上的同名函数实现 一些术语和约定的解释&#xff1a; 时间戳(timestamp)的方式,返…

linux找link原路径,readlink命令找出符号链接所指向的位置

1.释义找出符号链接所指向的位置2.系统帮助用法&#xff1a;readlink [选项]... 文件...输出符号链接值或权威文件名。-f, --canonicalize递归跟随给出文件名的所有符号链接以标准化&#xff0c;除最后一个外所有组件必须存在-e, --canonicalize-existing递归跟随给出文件名的所…

国产毫米波雷达领域的领头羊,木牛科技将在明年量产77GHz汽车雷达

国内的汽车毫米波雷达市场风潮起于2015年前后&#xff0c;彼时国内的毫米波雷达企业已经发展很多年&#xff0c;但大都在军工领域。 面对突然出现的汽车毫米波雷达市场热潮&#xff0c;国内很快涌现出了一大批雷达的初创企业&#xff0c;努力挤进这一亦新亦旧的市场。 说是新&a…

面试风云录(02) - 与顶级CTO交手的难忘经验...

大部分面试都是寻找团队伙伴或成员&#xff0c;很少是面试高层&#xff0c;因为职级比我们高的人&#xff0c;自然会有更高层的人面试他们&#xff0c;但这次分享的不是一般面试&#xff0c;而是我跟顶级CTO交手的经验&#xff0c;尽管为了顾虑当事人隐私&#xff0c;我已经隐去…

MySQL 之 performance_schema

背景&#xff1a; 自 MySQL5.5开始&#xff0c;MySQL新增了一个数据库&#xff1a;PERFORMANCE_SCHEMA&#xff0c;主要用于收集数据库服务器性能参数。此库中表的存储引擎均为PERFORMANCE_SCHEMA&#xff08;用户不能创建存储引擎为PERFORMANCE_SCHEMA的表&#xff09;。MySQ…

DNS解析原理与Bind部署DNS服务

DNS是什么&#xff1f; DNS&#xff08;Domain Name System&#xff0c;域名系统&#xff09;是互联网上最核心的带层级的分布式系统&#xff0c;它负责把域名转换为IP地址、反查IP到域名的反向解析以及宣告邮件路由等信息&#xff0c;使得基于域名提供服务称为可能&#xff0c…

qt 获取本机的wifi密码_还在记密码?这款开源免费的账号密码管理神器赶紧收了...

工作中涉及到得账号密码&#xff0c;你是怎么记录得&#xff1f;如果是文档word或者excel记录&#xff0c;那么回非常麻烦&#xff0c;每次还得打开。如果是浏览器自己记录&#xff0c;如果更新密码&#xff0c;又记不得。尴尬&#xff01;今天大卫给大家推荐一款开源免费得账号…

adaptec raid linux,adaptecraid卡管理软件在windows和linux下的安装使用介绍(7页)-原创力文档...

adaptec raid卡管理软件在 windows和linux下的安装使用文档l.adaptec raid卡的管理软件在 windows下安装后的运行界面如下图:adaplecadaplec点击connect后&#xff0c;便可进入管理软件的主界面&#xff0c;如下图:在这个主界面中可以选择要操作的 raid卡&#xff0c;例如本例中…