Jqyery中同等与js中windows.onload的应用


Posted in Javascript onMay 10, 2011
$(function(){//脚本}) 
Jquery(function(){//脚本}) 
Jquery(document).ready(function(){//脚本})

以上三个代码执行同一个动作,由于书写方便,所以Jquery比其他应用程序更受欢迎,但是当与其他js程序库一起使用的时候,特别是prototype.js同时使用时,不能使用$方法,因为他们也有该方法,可以用如下方法回避这种冲突:

jQuery(function($){//脚本})

他们都是当Dom加载完后执行的操作,所以放在html的任何位置都可以,但是有些情况,比如上一节提到的加载事件的方法

<div id="divInfo">Hello,Word!</div> 
<input id="btnShow" type="button" value="显示" /> 
<input id="btnHid" type="button" value="隐藏" /> 
<input id="btnChange" type="button" value="修改为:hello" /> 
<script type="text/javascript"> 
$("#btnShow").bind("click",function(event){$("#divInfo").show()}); 
$("#btnHid").bind("click",function(event){$("#divInfo").hide();}); 
$("#btnChange").bind("click",function(event){$("#divInfo").html("hello");}); 
</script>

这里面则是在加载的过程中执行的,就是必须加载完相关元素才可以执行,如果把他们放到上面的代码中就灵活的多了
<div id="divInfo">Hello,Word!</div> 
<input id="btnShow" type="button" value="显示" /> 
<input id="btnHid" type="button" value="隐藏" /> 
<input id="btnChange" type="button" value="修改为:hello" /> 
<script type="text/javascript"> 
jQuery(function($){$("#btnShow").bind("click",function(event){$("#divInfo").show()}); 
$("#btnHid").bind("click",function(event){$("#divInfo").hide();}); 
$("#btnChange").bind("click",function(event){$("#divInfo").html("hello");}) 
}) 
</script>

那么这个加载事件可以放在任何位置了...
Javascript 相关文章推荐
javascript 对象定义方法 简单易学
Mar 22 Javascript
基于JQUERY的多级联动代码
Jan 24 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
js图片自动切换效果处理代码
May 07 Javascript
javascript动画算法实例分析
Jul 31 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 #Javascript
JavaScript中为元素加上name属性的方法
May 09 #Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 #Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 #Javascript
关于JavaScript的with 语句的使用方法
May 09 #Javascript
JavaScript的parseInt 取整使用
May 09 #Javascript
实现变速回到顶部的JavaScript代码
May 09 #Javascript
You might like
php实现的Cookies操作类实例
2014/09/24 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
使用console进行性能测试
2015/04/27 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
Python入门篇之对象类型
2014/10/17 Python
python常规方法实现数组的全排列
2015/03/17 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
金属材料工程个人求职的自我评价
2013/12/04 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
商业街策划方案
2014/05/31 职场文书
技术经济专业求职信
2014/09/03 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题