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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
js单例模式的两种方案
Oct 22 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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中的字符编码转换函数用法示例
2014/10/20 PHP
yii数据库的查询方法
2015/12/28 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
PHP实现简单的计算器
2020/08/28 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python元字符的用法实例解析
2018/01/17 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
举例讲解Python装饰器
2020/12/24 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
办公室文书岗位职责
2013/12/16 职场文书
董事长助理工作职责
2014/06/08 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
golang 语言中错误处理机制
2021/08/30 Golang