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 相关文章推荐
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
基于JavaScript实现简单抽奖功能代码实例
Oct 20 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备份/还原MySQL数据库的代码
2011/01/06 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
用python代码做configure文件
2014/07/20 Python
举例介绍Python中的25个隐藏特性
2015/03/30 Python
python实现决策树分类算法
2017/12/21 Python
PyQT实现多窗口切换
2018/04/20 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python队列原理及实现方法示例
2019/11/27 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
Django实现简单的分页功能
2021/02/22 Python
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
国贸专业自荐信范文
2014/03/02 职场文书
老师对学生的评语
2014/04/18 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
党员带头倡议书
2015/04/29 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android