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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
React key值的作用和使用详解
Aug 23 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
Javascript的promise,async和await的区别详解
Mar 24 Javascript
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+js实现百度地图多点标注的方法
2016/11/30 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
django2 快速安装指南分享
2018/01/05 Python
python实现图片横向和纵向拼接
2020/03/05 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
暑期社会实践方案
2014/02/05 职场文书
自主招生教师推荐信
2014/05/10 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
婚庆司仪开场白
2015/05/29 职场文书
纪录片信仰观后感
2015/06/08 职场文书
党员读书活动心得体会
2016/01/14 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python
Python实现socket库网络通信套接字
2021/06/04 Python
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android