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 相关文章推荐
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
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框架codeigniter中如何使用框架的session
2013/06/24 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python切片工具pillow用法示例
2018/03/30 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
new修饰符是起什么作用
2015/06/28 面试题
数控加工专业毕业生自荐信
2013/09/27 职场文书
电子商务专业推荐信范文
2013/12/02 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
MySql数据库触发器使用教程
2022/06/01 MySQL