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 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
JavaScript面象对象设计
Apr 28 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
生产制造追溯系统之在线打印功能
Jun 03 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实现点击超链接执行删除确认操作
2014/10/31 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
PHP代码加密的方法总结
2020/03/13 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
python脚本实现查找webshell的方法
2014/07/31 Python
Python线程的两种编程方式
2015/04/14 Python
简单实现python进度条脚本
2017/12/18 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
pandas实现导出数据的四种方式
2020/12/13 Python
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
无私奉献演讲稿
2014/09/04 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
2015年售票员工作总结
2015/04/29 职场文书
实验室安全管理制度
2015/08/05 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书