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 相关文章推荐
PHP中CURL的几个经典应用实例
Jan 23 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
js实现简单音乐播放器
Jun 30 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 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
ThinkPHP实现附件上传功能
2017/04/27 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
js中replace的用法总结
2013/12/27 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Python Cookie 读取和保存方法
2018/12/28 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
降低python版本的操作方法
2020/09/11 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
同事离别感言
2015/08/04 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
Pytest之测试命名规则的使用
2021/04/16 Python
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers