jquery 指南/入门基础


Posted in Javascript onNovember 30, 2007

指南/基础

        这是一个基础指南,旨在帮助你开始使用jquery。jquery给予你常见问题的解决方法。如果你尚未建立你的测试页面,我建议你创建一个含有下列内容的HTML页: 
程序代码  

<html>  
<head>  
<script type="text/javascript"  
src="link/to/jquery.js"></script>  
<script type="text/javascript">  
   // Your code goes here  
</script>  
</head>  
<body>  
<a href="http://jquery.com/">jQuery</a>  
</body>  
</html>  
      修改script标签的src属性指向到你的jquery.js。例如,如果你的jQuery.js与你的HTML文件在同一目录,你可以这样: 
程序代码 
<script type="text/javascript" src="jquery.js"></script> 
文档载入时运行代码
     首先, 大多数JavaScript程序员会用类似代码:  
程序代码 
window.onload = function(){ ... } . 

     访问HTML文档的元素,必须先载入文档对象模型(DOM)。当window.onload函数执行的时候,说明所有东西已经载入,包括图像和横幅等等。要知道较大的图片下载速度会比较慢,因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果,这样就花费了很长的等待时间,这不是我们想要的。

        对于此,jquery提供了一个"ready"事件,你可以使用以下的代码片段:  
程序代码 
$(document).ready(function(){
// 你的代码
}); 
       $(document)意思是说,获取文档对象(类似的于window.document),$(document).ready意思就是说,获取文档对象就绪的时候。 
       上面这段代码的意思是检查文档对象直到它能够允许被操作(译者注:这样做比window.onload()函数要快的多,因为只要文档对象载入完成就能够执行代码了,而不需要等待页面中的图片下载是否已经完成)---这是我们想要的。因此将上面的代码片段粘贴到你测试页面的脚本区吧!

鼠标点击时的触发
       首先,我们尝试鼠标点击超链接时触发某些行为。在ready函数里加入以下代码: 
程序代码 
$("a").click(function(){
alert("谢谢你的来临!");
});

       保存HTML文件,然后刷新一下页面。点击某个超链接,页面将弹出警告对话框。

增加 CSS Class
       另外一个事情就是,一个共同的任务:增加或移除元素的css class,例如: 
程序代码 
$("a").addClass("test"); 
$("a").removeClass("test"); 

    如果你已经在页面头部加入了:  
程序代码 
<style>a{text-weight:bolder}</style> 
    那么当你调用了addClass函数后,所有超链接的字体将变成粗体。

特效
    Effects Module(效果模块)提供了一系列好用的特效。

    加上下面代码: 
程序代码 
$("a").click(function(){
    $(this).hide("slow");
    return false;
}); 
    现在,只要你点击超链接,超链接就会慢慢的消失。“return false"表示保留默认行为,因此页面不会跳转。

回调

    所谓回调就是父函数执行完成后,自身能够作为返回值传递到另一个函数的函数。回调功能的特别之处在于,出现在“父函数"后面的函数可以在回调函数执行前执行。 
    另外一个重点是要知道如何正确运用回调,我就常常忘记了正确语法。

    一个不带参数的回调应该这样写: 
程序代码 
$.get('myhtmlpage.html', myCallBack); 
    注意第二个参数是一个简单的函数名(它不是字符,也没有带括号)

    那么带参数的回调该怎么写呢?
    错误的写法,下面这样写是不行的(或者不会执行): 
程序代码 
$.get('myhtmlpage.html', myCallBack(param1,param2)); 
    正确的写法: 
程序代码
$.get('myhtmlpage.html', function(){
    myCallBack(param1,param2);
}); 
    这样就实现了回调一个带参函数的功能。
后记
      到这里,也许你应该去看看其余的文档了。里面包括更多的指南-它很全面,涵盖了jquery各个方面。如果大家有问题,请放心的给我发Email。
    当然,你也可以看看利用jQuery做的多种DEMO

Javascript 相关文章推荐
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
详解vue微信网页授权最终解决方案
Jun 16 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
JS异步宏队列微队列原理详解
Sep 09 Javascript
Prototype1.6 JS 官方下载地址
Nov 30 #Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 #Javascript
jQuery 研究心得 取得属性的值
Nov 30 #Javascript
XRegExp 0.2: Now With Named Capture
Nov 30 #Javascript
javascript数组组合成字符串的脚本
Jan 06 #Javascript
比较简单的一个符合web标准的JS调用flash方法
Nov 29 #Javascript
css图片自适应大小
Nov 28 #Javascript
You might like
解析PHP无限级分类方法及代码
2013/06/21 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
js格式化时间的方法
2015/12/18 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
Python中的__slots__示例详解
2017/07/06 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
基于Python中的yield表达式介绍
2019/11/19 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
初中女生自我鉴定
2013/12/19 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
护士检查书
2014/01/17 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
大学校务公开实施方案
2014/03/31 职场文书
会议主持词结束语
2015/07/03 职场文书
消防演习感想
2015/08/10 职场文书
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB