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 相关文章推荐
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
详解vue axios用post提交的数据格式
Aug 07 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
群众路线班子对照检查材料
2014/09/25 职场文书
芙蓉镇观后感
2015/06/10 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
mysql自增长id用完了该怎么办
2022/02/12 MySQL
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS