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 相关文章推荐
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
jquery操作angularjs对象
Jun 26 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 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+mysql)
2007/11/23 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
Bootstrap表单布局
2016/07/19 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python复制目录结构脚本代码分享
2015/03/06 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
python图像处理入门(一)
2019/04/04 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
幼儿园教师获奖感言
2014/03/11 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
面试通知单大全
2015/04/20 职场文书
军训新闻稿范文
2015/07/17 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang