如何加载jquery

boyanx3个月前技术教程13

加载在线版的 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使用教程:在数据网格中自定义排序

jQuery EasyUI最新试用版免费下载>如果默认排序行为不能满足您的需求,您可以自定义数据网格的排序行为。基本上用户可以在列上定义一个函数名为sorter的排序函数。这个函数将要接受两个值...

jQuery EasyUI使用教程:设置数据网格的冻结列

jQuery EasyUI最新试用版免费下载>本教程演示了如何冻结一些列,当用户在网格上水平移动滚动条时,冻结列不能滚动到视图的外部。想要定义冻结列,首先您应该定义frozenColumns属性...

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

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

Web前端开发和Windows桌面Qt开发哪个前景更好?

在互联网还未出现之前,所有的软件都是CS模式的,即软件界面是客户端程序,也就是类似于Office一样需要在个人电脑上安装,然后通过开始菜单来运行,程序运行后会打开独有的Window窗口。CS软件有一个...

用户界面干货盘点

本周,我们持续更新了Qt、jQuery EasyUI和C1 DataGrid for WPF的基础使用教程,DevExpress跨平台移动Web开发框架DevExtreme在线演示,Component...

jQuery EasyUI使用教程:在数据网格中扩展行显示详细信息

数据网格可以更改它的视图来显示不同的效果。使用详细视图,数据网格可以在数据行的左边显示展开按钮(“+”或“-”)。用户可以展开行来显示附加的详细信息。Step 1:创建数据网格Item IDProdu...

发表评论    

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