如何加载jquery

boyanx9个月前技术教程68

加载在线版的 jquery 文件地址

<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.slim.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
//......
</script>

注意:加载的jQuery脚本必须放在<script></script>脚本之前, 否则不能生效

ready(fn)

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

jQuery 代码:

$(document).ready(function(){
// 在这里写你的代码...
});

描述:使用 $(document).ready() 的简写,同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何。

jQuery 代码:

$(function($) {
// 你可以在这里继续使用$作为别名...
});

jQuery:简单例子


<script type="text/javascript" src="script/jquery-1.4.2.js"></script>
<script language="JavaScript">
$(document).ready(function(){//等待dom元素加载完毕,类似window.onload;
alert("您好,我是张三丰");
});
</script>

window.onload与ready方法的区别?

ready方法要快于window.onload方法

window.onload:必须等到页面中的所有元素加载完毕后才能触发

ready:只要等到当前要操作的DOM对象加载完毕后就会立即触发,可能资源还没有加载完毕。

ready方法可以有多个, window.onload只能有一个

虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错

约定:如果获取的是 jQuery 对象, 那么要在变量前面加上 $.

var $variable = jQuery 对象

var variable = DOM 对象

对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)

//
//获取DOM对象
var username = document.getElementById("username");
alert(username.value);
//转化为jQuery对象
var $username=$(username);
alert("^^^"+$username.val());

转换后就可以使用 jQuery 中的方法了

标签: 在线jquery

相关文章

用户界面框架jQuery EasyUI示例大全之Accordion

jQuery EasyUI最新试用版免费下载>jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQuery EasyUI提供了基于当下流行的jQuery...

jQuery EasyUI使用教程:在数据网格中添加复选框

本教程为您演示如何放置一个复选框到数据网格中。通过复选框用户将可以选择选中/取消选中网格行数据。想要添加一个复选框列,用户只需要添加一个列的checkbox属性,并将其设置为true。代码如下所示:...

php手把手教你做网站(三十八)jquery 转轮盘抽奖,开盲盒

抽奖和开盲盒性质一样的都是通过ajax读取后台的随机数据。图1 转轮盘抽奖图2 转轮盘抽奖结果1、转轮盘本来是想直接绘图实现轮盘,但是没有找到怎么填充文字,只好把轮盘弄成了背景图,通常用于游戏抽道具,...

jQuery EasyUI使用教程:合并数据网格的单元格

数据网格经常需要合并多个单元格,本教程将教会您在数据网格中如何合并单元格。合并数据网格的单元格,您只需要简单地调用'mergeCells'方法并传入合并信息参数,告诉数据网格如何合并单元格。在合并的单...

jQuery EasyUI使用教程:格式化数据网格列

jQuery EasyUI最新试用版免费下载>下面的示例格式化easyui数据网格中的列,并使用自定义列的格式程序,如果价格小于20那么文本就将变为红色。想要格式化一个数据网格列,我们需要设置f...

用户界面框架jQuery EasyUI示例大全之Layout

jQuery EasyUI最新试用版免费下载>jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQuery EasyUI提供了基于当下流行的jQuery...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。