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 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
js模糊查询实例分享
Dec 26 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
JS中封装axios来管控api的2种方式
Sep 11 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/01/14 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
老生常谈Python序列化和反序列化
2017/06/28 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
如何利用python读取micaps文件详解
2020/10/18 Python
pandas按条件筛选数据的实现
2021/02/20 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
借条格式范本
2015/05/25 职场文书
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python