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 10 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
javascript对象的创建和访问
Mar 08 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
vue+elementUI实现简单日历功能
Sep 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 header Content-Type类型小结
2011/07/03 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
常用PHP封装分页工具类
2017/01/14 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
Python性能优化技巧
2015/03/09 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
路政管理专业推荐信
2013/11/11 职场文书
测试工程师职业规划书
2014/02/06 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
行政处罚决定书
2015/06/24 职场文书
员工聘用合同范本
2015/09/21 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
Javascript 解构赋值详情
2021/11/17 Javascript