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 相关文章推荐
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
node内置调试方法总结
Feb 22 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 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
递归列出所有文件和目录
2006/10/09 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
Vue.use源码分析
2017/04/22 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
详解python单例模式与metaclass
2016/01/15 Python
python如何实现内容写在图片上
2018/03/23 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
对Python3 序列解包详解
2019/02/16 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Keras loss函数剖析
2020/07/06 Python
thinkphp5 路由分发原理
2021/03/18 PHP
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
html粘性页脚的具体使用
2022/01/18 HTML / CSS