急！！关于鼠标的移动事件 mouse_leave事件

edisongao 2008-07-06 03:56:28

鼠标移动到一个控件上，弹出一个窗体，这个我用mouse_enter事件，没什么问题。但是我怎么用mouse_leave事件，来使这个弹出的窗体释放资源，消失掉

...全文

254 4 打赏收藏转发到动态举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

anshandz 2008-07-06

打赏
举报

回复

并没有触发mouse_leave事件

anshandz 2008-07-06

打赏
举报

回复

应该是当你执行弹出窗体的事件的时候，焦点被定位在弹出的窗体上了，把焦点重新定位在那个控件上试试

edisongao 2008-07-06

打赏
举报

回复

我试过了，好象没用，而且是窗体一直在闪的那种

Deathsign 2008-07-06

打赏
举报

回复

void mouse_leave(object sender,EventArg xxx0
{
topFrm.Hide();
}

本文实例讲述了JQuery中的常用事件、对象属性与使用方法。分享给大家供大家参考，具体如下： JQuery中的常用事件 .click() 鼠标单击触发事件，参数可选（data，function） .dblclick() 双击触发，同上 .mousedown()/up() 鼠标按下/弹起触发事件 .mousemove() 鼠标移动事件 .mouseover()/out() 鼠标移入/移出触发事件 .mouseenter()/leave() 鼠标进入/离开触发事件* .hover(func1,func2) 鼠标移

这份文档中用到的所有程序已经被打包并压缩成一个tar.gz文件。以下是这个压缩包解压缩后的目录结构： ncurses | |----> JustForFun -- just for fun 部分的程序 |----> basics -- 一些基础部分的程序 |----> demo -- make 之后的程序 | | | |----> exe -- 一些已编译的可执行示例程序 |----> forms -- 和form 库相关的程序 |----> menus -- 和menus 库相关的程序 |----> panels -- 和 panels 库相关的程序 |----> Makefile -- 一级目录的下的 Makefile |----> README -- 一级目录下的 README 文件包含程序说明。 |----> COPYING -- 程序版权信息文档。这些目录下包扩以下的文件： JustForFun | |----> hanoi.c -- 汉诺塔示例 |----> life.c -- 生命游戏 |----> magic.c -- 数字幻方 |----> queens.c -- 皇后问题 |----> shuffle.c -- 智力拼图 |----> tt.c -- 一个非常简单的打字练习程序 basics | |----> acs_vars.c -- 可选字符（ACS）变量示例 |----> hello_world.c -- 简单的“Hello, World!”程序 |----> init_func_example.c -- 初始化函数示例 |----> key_code.c -- 显示键盘字符代码的程序 |----> mouse_menu.c -- 一个可以使用鼠标访问的菜单 |----> other_border.c -- 展示与box()函数不同的显示边框的其它函数 |----> printw_example.c -- 一个非常简单的使用printw()函数的例子 |----> scanw_example.c -- 一个非常简单的使用getstr()函数的例子 |----> simple_attr.c -- 一个在屏幕上打印C源程序注释的例子 |----> simple_color.c -- 一个简单的演示颜色的例子 |----> simple_key.c -- 一个可以用方向键访问的菜单的例子 |----> temp_leave.c -- 一个演示临时离开CURSES模式的例子 |----> win_border.c -- 展示窗口和边框的例子 |----> with_chgat.c -- chgat()函数使用的例子 forms | |----> form_attrib.c -- 展示field属性的用法 |----> form_options.c -- 展示field选项的用法 |----> form_simple.c -- 一个简单的表单例子 |----> form_win.c -- 一个简单的窗口和表单联合使用的例子 menus | |----> menu_attrib.c -- 展示菜单属性的用法 |----> menu_item_data.c -- 展示 item_name() 等等函数的用法 |----> menu_multi_column.c -- 建立多列菜单 |----> menu_scroll.c -- 展示菜单滚动的示例 |----> menu_simple.c -- 一个用方向键控制菜单的例子 |----> menu_toggle.c -- 建立多值菜单和解释 REQ_TOGGLE_ITEM |----> menu_userptr.c -- 用户指针的用法 |----> menu_win.c -- 菜单和窗口结合的演示例子 panels | |----> panel_browse.c -- 通过 tab 浏览展示用户指针的用法 |----> panel_hide.c -- 隐藏和取消隐藏面板的例子 |----> panel_resize.c -- 移动和改变面板大小的例子 |----> panel_simple.c -- 一个简单的面板使用例子 perl |---->01-10.pl --前10个例子的perl语言版 Makefile包含在一级主目录里。它将会把所有的程序编译成可执行的文件。并把这些文件存在demo/exec目录下面。你也可以选择将其编译到别的目录下。每个目录下都有一个README文件详细描述了每个目录下的C源程序的内容。对于每一个示例，我都给出了这些程序调用NCURSES目录下相关文件的路径名。

对整threeJS体系进行全面剖析。整理出全面的教学大纲，涵盖内容面非常广。此教学版本为threeJS107版本。关于版本不建议大家使用低于90的版本学习。以下是课程目录1-ThreeJS概览（基本图形简介，什么是点线面如何绘制点线面，什么是材质，什么是几何体，什么是相机，什么是渲染器，什么是场景）2-相机和渲染器（详解相机类型，渲染器如何使用，针对不同场景怎么用，怎么调效果，怎么渲染，怎么输出画布，如何解决透明问题等等）3-创建平面几何（常见的几何体如何使用，如何使用简单的几何体绘制出自定义自己想要的几何体，关于几何体的性能剖析，如何解决性能，几何体的渲染原理）4-高级图形算法常见库（求直线的斜率计算线段与圆的交点计算线段的长度判断折线是否在多边形内等等）5-sprite精灵(怎么让一个图标永远朝向屏幕，精灵的属性，精灵材质原理等，广告提示框必用)6-骨骼游戏动画（什么是模型动画，常见游戏案例，如何让人头进行各种攻击动作）7-3d模型加载（常见模型格式，如何渲染不同格式，不同格式的特点，什么格式性能优越，模型渲染异常，贴图不显示等问题详解）8-高阶动态纹理（你所不知道的纹理用法，我说你不知道，你肯定不知道）9-漫游轨迹以及其动画路径（怎么绘制贝塞尔曲线，如何使用曲线上的路径，跟随路径移动的原理，相机如何运动，物体如何运动）10-着色器（什么是着色器。初识着色器基础，着色器材质怎么用，怎么使用着色器库）11-常见渲染以及透明度问题12-对象拾取以及拖拽（3d世界里面如何拖拽物体，拖拽的原理，mousemove mouseon等的事件效果）13-世界坐标以及组的问题（什么是相对坐标，什么是世界坐标，什么是当前坐标，怎么转化父子坐标系，组的优化，为什么用组，组的优势）14-指定对象旋转中心（什么是物体的几何体中心，如何改变中心，如何绕轴转动）15-层级对象渲染（多个场景一键切换，切换的优势，针对大项目的用法）16-拓展了解系列（不定期不断更新案例，各种酷炫效果bloom,halo等，以及各种3d图表，粒子案例等,不断构建你的3d实践能力）

HGE 系列教材（1） --- 简介 HGE 是一个硬件加速（Hardware accelerated）的2D 游戏引擎（Game Engine）， HGE 是一个富有特性的中间件，可以用于开发任何类型的2D 游戏。HGE 封装性良好，以至于你仅仅需要关系游戏逻辑（Game Logic），而不需要在意DirectX，Windows 消息循环等。 HGE 架构在DirectX 8.0 之上，能够跑在大多数的Windows 系统上。 1. 选用HGE 的理由： 1）专业化--- 专注于2D 领域 2）简单化--- 非常容易使用 3）技术优势--- 基于Direct3D API 有较好的性能和特性 4）免费--- 对于个人或者商业用户都免费，遵循zlib/libpng license 5）代码高度的一致性--- 代码是否具有一致性，是衡量代码质量的标准之一（《Co de Reading: The Open Source Perspective》） 2. 体系结构： HGE 有3 个抽象层（layers of abstraction）： 1）核心函数（Core Functions）处于核心的函数和例程（routines），被整个系统所依赖。 2）辅助类（Helper Classes）游戏对象相关的类，架构于HGE Core Functions 层之上，辅助用户进行游戏开发。 3）创作工具（Authoring Tools）用于游戏开发的一组工具。从上图可以看见： 1）用于代码只需要架构在HGE Helper Classes 之上 2）通常游戏资源（Game Resources）需要使用HGE 创作工具来产生 3. 体系结构概述： 1）Core Functions 层 <1> 图形格式支持：支持BMP, JPG, PNG, TGA, DDS, DIB 文件格式 <2> 支持窗口模式和全屏模式 <3> 音频支持和音乐回放（music playback）：支持WAV, MP3, MP2, MP1 an d OGG 音频文件格式（audio file formats），支持MO3, IT, XM, S3M, MTM, MO D and UMX 音乐文件格式（music file formats），支持压缩流的回放。声音大小和声道的控制 <4> 输入设备支持：鼠标和键盘 <5> 资源：读取硬盘上的资源，支持ZIP 打包的文件格式 <6> 日志支持 2）Helper Classes 层 <1> 精灵（Sprites）和动画（Animations）对于所有硬件设备特性的直接支持：锚点（anchor）支持，伸展、缩放、旋转的支持，不同的回放模式的支持 <2> 字体读取和渲染（render）位图字体，多种字体排列方式，旋转和缩放字体，字符串宽度计算等 <3> 粒子系统（particle systems）和网格变形（distortion mesh）高效的粒子系统，可用于创建烟雾、爆炸、魔法效果等，提供粒子系统的管理，支持定界盒（bounding box）计算和冲突检测（collision detection） <4> 资源管理：通过简单的函数调用，来创建复杂的对象，自动的内存管理。对于资源组（resource groups）采用预先缓存和特殊的清除处理（这是一种通过控制对象分配和释放来提高效率的方法） <5> GUI：强大而灵活的GUI 管理，支持动画式的GUI <6> 矢量（Vectors），对于2D 矢量的完全支持 3）Authoring Tools 层 <1> 资源的打包（pack）：HGE 使用ZIP 格式的资源包，你可以使用任何的打包工具，甚至还可以给资源包加密 <2> 纹理（Texture）工具 <3> 粒子系统编辑器：能够设定粒子的速度，方向，生命周期，轨迹，颜色，透明等 <4> 位图字体编辑器：运行通过系统中已经安装的字体来创建位图字体，你可以使用图形编辑器来为位图字体添加额外的效果 HGE 系列教材（2） --- 安装 HGE 在HGE 的文档中有详细谈到如何安装的问题，这里讲一下VC6 平台的安装问题： 1. 下载完HGE 之后，需要使用到lib\vc 文件夹下的库文件以及include 目录下的头文件 2. 打开 Tools->Options->Directories 如上两图，添加路径 3. 在游戏开发中使用HGE 首先建立一个空的Win32 工程，然后选择Project->Settings...->Link 按图所示，输入hge.lib 和hgehelp.lib 当然，也可以使用预编译器指令pragram 来打到同样的目的。 HGE 系列教材（3） --- 初试 HGE 当HGE 安装完成之后，就可以使用了，关于HGE 的安装，可以参考《HGE 系列教材（2） --- 安装HGE》现在使用HGE 开发一个极小的程序： 1. 包含hge.h 文件，并且定义一个HGE 的指针，通过这个指针，我们可以访问HGE Core Functions 层的函数。 #include HGE *pHge = 0; 使用完HGE 指针之后，需要释放这个指针，pHGE->Release(); 2. 帧函数（Frame Function）是一个用户定义的函数，每一帧时间，它会被HGE Engi ne 调用一次，函数返回true，则调用停止： bool FrameFunc() { if (hge->Input_GetKeyState(HGEK_ESCAPE)) { return true; } return false; } 3. 建立一个WinMain 函数，WinMain 函数是标准的Windows 应用程序入口，这里，我们首先初始化HGE 指针： int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nShowCmd) { pHge = hgeCreate(HGE_VERSION); // ... pHge->Release(); return 0; } 通过HGE 指针，我们才可以访问HGE Engine 的接口。调用了hgeCreate 函数之后，不要忘记了使用Release 函数释放资源。 4. 初始化操作: 有一些初始化操作需要完成，使得程序能够跑起来： // 设置帧函数 pHge->System_SetState(HGE_FRAMEFUNC, FrameFunc); // 设置窗口模式 pHge->System_SetState(HGE_WINDOWED, true); // 设置不使用声音 pHge->System_SetState(HGE_USESOUND, false); // 设置标题为"Minimal HGE" pHge->System_SetState(HGE_TITLE, "Minimal HGE"); 最后需要调用函数System_Initiate 来完成初始化操作，这个函数返回值是一个bool 类型的变量，如果是true 那么表示初始化成功，如果是false 表示出错，这时候可以通过System_GetErrorMessage 函数来获取错误消息： if (pHge->System_Initiate()) { pHge->System_Start(); } else { MessageBox(NULL, pHge->System_GetErrorMessage(), "Error", MB_O K | MB_ICONERROR | MB_APPLMODAL); } 再程序结束的时候，需要释放资源： pHge->System_Shutdown(); pHge->Release(); 5. 整个完整的程序如下： #include HGE* pHge = 0; bool FrameFunc() { if (pHge->Input_GetKeyState(HGEK_ESCAPE)) { return true; } return false; } int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nShowCmd) { pHge = hgeCreate(HGE_VERSION); pHge->System_SetState(HGE_FRAMEFUNC, FrameFunc); pHge->System_SetState(HGE_WINDOWED, true); pHge->System_SetState(HGE_USESOUND, false); pHge->System_SetState(HGE_TITLE, "HGE 小程序"); if (pHge->System_Initiate()) { pHge->System_Start(); } else { MessageBox(NULL, pHge->System_GetErrorMessage(), "Error", MB_O K | MB_ICONERROR | MB_APPLMODAL); } pHge->System_Shutdown(); pHge->Release(); return 0; } 注意，程序运行之后，一直调用函数FrameFunc 直到用户按下ESC，那么跳到pHge- HGE 系列教材（4） --- 初探 HGE Core Functions 层 HGE Core Functions 层中的函数需要通过HGE 指针来访问，就如《HGE 系列教材（3） --- 初试HGE》所谈到的一样，通过调用hgeCreate 函数来初始化HGE 指针， HGE Core Functions 层中的函数，大致分层一下几类： 1. 接口函数（Interface functions）： hgeCreate --- 初始化HGE 指针，这是一个全局函数，除了这个函数，HGE Cor e Funtions 中所有的函数都需要通过HGE 指针调用。 Release --- 释放HGE 接口，调用了hgeCreate 就应该调用Release 释放。 2. 系统函数（System functions）：这类函数都是以System_ 开头，后面加上表示函数意义的单词（不出现下划线），之后介绍的函数也将使用这种命名方式，即类型前缀+ 有意义的单词： System_Initiate 初始化相关软件和硬件 System_Shutdown 恢复声音模式并且释放资源 System_Start 开始运行用户定义的帧函数 System_SetState 设置系统内部状态 System_GetState 返回内部状态的值 System_GetErrorMessage 返回最后出错的HGE 错误描述符 System_Log 在日志文件中书写格式化消息 System_Launch 运行一个URL 或者外部的可执行文件或数据文件 System_Snapshot 截屏并保存到一个文件 3. 资源函数（Resource functions）： Resource_Load 从硬盘上读取资源到内存中 Resource_Free 从内存中删除读取的资源 Resource_AttachPack 附加一个资源包 Resource_RemovePack 移除一个资源包 Resource_RemoveAllPacks 移除之前关联的所有资源包 Resource_MakePath 建立一个绝对文件路径 Resource_EnumFiles 通过通配符来枚举文件 4. 初始化文件函数（initialization file functions） Ini_SetInt 在初始化文件中写入一个整数值 Ini_GetInt 从初始化文件中读取一个整数值 Ini_SetFloat 在初始化文件中写入一个浮点值（float） Ini_GetFloat 从初始化文件中读取一个浮点值（float） Ini_SetString 在初始化文件中写入一个字符串 Ini_GetString 从初始化文件中读取一个字符串 5. 随机数参数函数（Random number generation functions） Random_Seed 设置随机数产生器的种子 Random_Int 产生int 类型的随机数 Random_Float 产生float 类型的随机数 6. 计时函数（Timer functions） Timer_GetTime 返回从调用System_Initiate 函数到现在所用的时间（单位为秒） Timer_GetDelta 返回上一次调用帧函数到现在所用的时间（单位为秒） Timer_GetFPS 返回当前FPS 的值 7. 声效函数（Sound effect functions） Effect_Load 载入从硬盘载入声音到内存 Effect_Free 从内存中删除载入的音效和相关的资源 Effect_Play 开始播放音效 Effect_PlayEx 开始播放音效，这个函数含有更多的参数 8. 更多查看HGE 的文档 HGE 系列教材（5） --- 输入、声音和渲染建议读者对应HGE 的官方的例子：Tutorial 02 - Using input, sound and renderi ng 来阅读本文渲染：在HGE 中，四边形是一种图元，对应了结构体hgeQuad，另外还有三角形图元，对应 hgeTriple，为了渲染，我们现在需要使用hgeQuad 结构体，这个结构体如下： struct hgeQuad { hgeVertex v[4]; // 顶点描述了这个四边形 HTEXTURE tex; // 纹理的句柄或者为0 int blend; // 混合模式（blending mode） }; HGE 中图元对应的结构体总含有这3 个部分：顶点，纹理句柄，混合模式 struct hgeVertex { float x, y; // 屏幕的x，y 坐标 float z; // Z-order，范围[0, 1] DWORD col; // 顶点的颜色 float tx, ty; // 纹理的 x，y 坐标（赋值前需要规格化坐标间隔，使得 tx，ty 取值范围在[0,1]） }; 规格化坐标间隔在后面的例子中会谈到 1. 颜色的表示：颜色使用32 位表示，从左开始，8 位为Alpha 通道，8 位红色，8 位绿色，8 位蓝色对于后24 位，如果全部为0，表示黑色，如果全部为1，表示白色 2. 定义颜色的运算：我们把颜色看成一个四维向量，即alpha 通道，红色，绿色，蓝色这四个分量 <1> 颜色是可以相乘的颜色的相乘是对应的四个分量分别相乘的结果，即：alpha 通道的值与alpha 通道的值相乘，红色的值与红色的值相乘，绿色的值与绿色的值相乘，蓝色的值与蓝色的值相乘。 <2> 颜色是可以相加的同上，对应分量相加。颜色的每个分量使用浮点数表示，范围是[0-1]，相加操作可能导致溢出，一种处理的方式就是，如果溢出，则设定值为1。 3. 混合模式： 1）BLEND_COLORADD 表示顶点的颜色与纹理的纹元（texel）颜色相加，这使得纹理变亮，可见顶点颜色为0x0 0000000 将不造成任何影响。 2）BLEND_COLORMUL 表示顶点的颜色与纹理的纹元颜色相乘，这使得纹理变暗，可见顶点颜色为0xFFFFFFFF 将不造成任何影响。注意：必须在1），2）中做一个选择，且只能选择1），2）中的一个。处理的对象是纹理颜色和顶点颜色。这里有一个技巧：如果我们需要在程序中显示一个气球，这个气球的颜色不断变化，这时候我们并不需要准备多张不同颜色的气球纹理，而只需要一张白色的气球纹理，设置blend 为BLEND_COL ORMUL，白色的R,G,B 值被表示成1.0，也就是说，纹理颜色和顶点颜色相乘的结果是顶点的颜色，那么就可以通过修改顶点颜色，得到任意颜色的气球了。 3）BLEND_ALPHABLEND 渲染时，将对象的像素颜色（而非顶点的颜色）与当前屏幕的对应像素颜色进行alpha 混合。alpha 混合使用到alpha 通道，对于两个像素颜色进行如下操作，得到一个颜色： R(C)=alpha*R(B)+(1-alpha)*R(A) G(C)=alpha*G(B)+(1-alpha)*G(A) B(C)=alpha*B(B)+(1-alpha)*B(A) 这里的BLEND_ALPHABLEND 使用的是对象像素的颜色的alpha 通道。可见如果对象像素颜色alpha 通道为0，那么结果就是只有当前屏幕的像素颜色，也就是常常说的100 % 透明，因此，我们可以理解alpha 混合就是一个是图像透明的操作，0 表示完全透明， 255 表示完全不透明。 4）BLEND_ALPHAADD 渲染时，将对象的像素颜色与当前屏幕的对应像素颜色相加，结果是有了变亮的效果。注意：这里的3），4）必选其一，且只能选其一。处理的对象是对象像素颜色和屏幕像素颜色。 5）BLEND_ZWRITE 渲染时，写像素的Z-order 到Z-buffer 6）BLEND_NOZWRITE 渲染时，不写像素的Z-order 到Z-buffer 这里一样是二者选一设置举例： quad.blend=BLEND_ALPHAADD | BLEND_COLORMUL | BLEND_ZWRITE; // quad 为hgeQuad 变量 4. HGE 渲染 1）定义和初始化hgeQuad 结构体： hgeQuad quad; // 定义四边形 2）初始化hgeQuad 变量： // 设置混合模式 quad.blend=BLEND_ALPHAADD | BLEND_COLORMUL | BLEND_ZWRITE; // 加载纹理 quad.tex = pHGE->Texture_Load("particles.png"); 注意，读取硬盘上资源的时候，可能会失败，因此通常都需要检查，例如： if (!quad.tex) { MessageBox(NULL, "Load particles.png", "Error", 0); } // 初始化顶点 for(int i=0;i<4;i++) { // 设置顶点的z 坐标 quad.v[i].z=0.5f; // 设置顶点的颜色，颜色的格式为0xAARRGGBB quad.v[i].col=0xFFFFA000; } // 这里假定载入的纹理大小为128*128，现在截取由点（96，64），（128，64），（128，96），（96，96）这四个点围成的图形。 quad.v[0].tx=96.0/128.0; quad.v[0].ty=64.0/128.0; // 规格化坐标间隔 quad.v[1].tx=128.0/128.0; quad.v[1].ty=64.0/128.0; quad.v[2].tx=128.0/128.0; quad.v[2].ty=96.0/128.0; quad.v[3].tx=96.0/128.0; quad.v[3].ty=96.0/128.0; 注意，对于hgeQuad 结构体，顶点quad.v[0] 表示左上那个点，quad.v[1] 表示右上的点，quad.v[2] 表示右下的点，quad.v[3] 表示左下的点。 // 设置hgeQuad 在屏幕中的位置 float x=100.0f, y=100.0f; quad.v[0].x=x-16; quad.v[0].y=y-16; quad.v[1].x=x+16; quad.v[1].y=y-16; quad.v[2].x=x+16; quad.v[2].y=y+16; quad.v[3].x=x-16; quad.v[3].y=y+16; System_SetState(HGE_RENDERFUNC,RenderFunc); RenderFunc 原型和帧函数一样： bool RenderFunc(); 4）编写RenderFunc 函数： bool RenderFunc() { pHGE->Gfx_BeginScene(); // 在如何渲染之前，必须调用这个函数 pHGE->Gfx_Clear(0); // 清屏，使用黑色，即颜色为0 pHGE->Gfx_RenderQuad(&quad); // 渲染 pHGE->Gfx_EndScene(); // 结束渲染，并且更新窗口 return false; // 必须返回false } 补充：Load 函数是和Free 函数成对出现的，即在硬盘上加载了资源之后，需要Free 它们，例如： quad.tex = pHGE->Texture_Load("particles"); // ... pHGE->Texture_Free(quad.tex); 音效：使用音效是很简单的 1. 载入音效： HEFFECT hEffect = pHGE->Effect_Load("sound.mp3"); 2. 播放： pHGE->Effect_PlayEx(hEffect); 或者pHGE->Effect_Play(hEffect); 1）Effect_Play 函数只接受一个参数就是音效的句柄HEFFECT xx; 2）Effect_PlayEx 函数较为强大，一共有四个参数： HCHANNEL Effect_PlayEx( HEFFECT effect, // 音效的句柄 int volume = 100, // 音量，100 为最大，范围是[0, 100] int pan = 0, // 范围是[-100, 100]，-100 表示只使用左声道， 100 表示只使用右声道 float pitch = 1.0, // 播放速度，1.0 表示正常速度，值越大播放速度越快，值越小播放越慢。这个值要大于0 才有效（不可以等于0） bool loop = false // 是否循环播放，false 表示不循环 ); 输入：仅仅需要调用函数pHGE->Input_GetKeyState(HGEK_xxx); 来判断输入，应该在帧函数中调用它，例如： bool FrameFunc() { if (pHGE->Input_GetKeyState(HGEK_LBUTTOM)) // ... if (pHGE->Input_GetKeyState(HGEK_UP)) // ... } HGE 系列教材（6） --- 程序流程与细节 HGE 的一些细节，通过源码可以更加清楚的了解，通过读源码，可以更加高效的使用HG E Engine。必要的第一步： Help Classes 层建立于Core Functions 层之上，这并不意味着用户只需要关心Help Classes 而忽略Core Functions，因此我们需要获得一个HGE 指针，来使用Core F unctions 的函数： <1> 获取HGE 指针： HGE* pHGE = pgeCreate(HGE_VERSION); <2> 释放HGE 指针：使用之后，需要释放HGE 指针。 pHGE->Release(); Create 和Release 过程使用了引用计数，也就是说，一般来看，除了第一次的Create 调用之外几乎不消耗CPU 时间和资源，每调用一次Create 函数，引用计数器就加一，只有在第一次调用的时候才会真正的分配空间，调用Release 会使得引用计数器减一，当它为0 的时候，才真正是释放资源。因此以下代码是可用的： while(true) { HGE* pHGE = pgeCreate(HGE_VERSION); // 确保不是第一次调用pgeCre ate 函数，因为如果是第一次调用，会分配内存。 // ... do something pHGE->Release(); } 此外，要成对的调用pgeCreate 和Release 函数，每次调用Release 之后，调用它的指针将被赋值为0，例如： HGE* pHGE = hgeCreate(HGE_VERSION); pHGE->Release(); pHGE->Release(); // ERROR: pHGE == 0 另外，pHGE->Release 会调用pHGE->System_Shutdown(); 必要的第二步：初始化： pHGE->System_Initiate(); 初始化语句放在Windows 入口函数中，这个函数将按顺序完成 1）窗口类的注册 2）创建窗口 3）初始化子系统 4）显示一个HGE 的LOGO（这个东西在HGE 里面被称之为HGE splash）一般使用System_Initiate() 都会是这样的： if (pHGE->System_Initiate()) { pHGE->System_Start(); } else { MessageBox(NULL, pHGE->System_GetErrorMessage(), "Error", MB_O K | MB_ICONERROR | MB_APPLMODAL); } 必要的第三步：调用： pHGE->System_Start(); 调用了System_Start 的目的是开始消息循环，见必要的第二步代码 pHGE->System_Start 和pHGE->System_Shutdown 是成对出现的，处于某些原因，即使我们知道pHGE->Release 会调用System_Shutdown 函数，我们还是应该去显示的调用System_Shutdown 函数。System_Shutdown 相比Release 要安全，我们可以这样调用，而不会出错： pHGE->System_Start(); // ... Something pHGE->System_Shutdown(); pHGE->System_Shutdown(); // OK 不论如何，Create 和Release 成对调用，Start 和Shutdown 成对调用，那么就不会有问题出现。还有什么是需要的？ System_SetState 函数常常需要设置窗口大小或者是设置为全屏模式，需要设置是否使用声音等，这一系列操作被称之为设置系统状态，统一通过调用pHGE->System_SetState 函数来完成，最为关键的是设置帧函数，调用了pHGE->System_Start 之后，会在绘制每帧图像时调用帧函数。 pHGE->System_SetState(XXX, XXX) 通常可以在如何地方，如何情况下调用，不要认为它们只能在pHGE->System_Initiate 之前调用 System_SetState 函数的第一个参数表示状态，在内部实现时，它是FSM 的状态，而第二个参数表示值，通过这个函数，可以绑定状态和相关的值补充一下，帧函数必须是一个全局函数，而不能是一个类的成员函数，并且帧函数的原型必须是： bool FunName(void); 惯用法：我们通常会在程序初始化之前设置状态，即在System_Initiate 调用之前，例如： int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nShowCmd) { pHGE->System_SetState(HGE_FRAMEFUNC, FrameFunc); pHGE->System_SetState(HGE_WINDOWED, true); pHGE->System_SetState(HGE_USESOUND, false); pHGE->System_SetState(HGE_TITLE, "HGE"); pHGE->System_SetState(HGE_SHOWSPLASH, false); // 用于去除 L OGO if (pHGE->System_Initiate()) { pHGE->System_Start(); } { MessageBox(NULL, pHGE->System_GetErrorMessage(), "Error", MB_O K | MB_ICONERROR | MB_APPLMODAL); } pHGE->System_Shutdown(); pHGE->Release(); return 0; } HGE 系列教材（7） --- 使用 Helper Classes 字体的使用： 1. 头文件 #include 2. 载入字体 hgeFont* pFont; pFont = new hgeFont("font1.fnt"); // 不要忘记delete fnt 文件是一个字体描述文件（font description file），可以通过创作工具产生 3. 打印字体 pFont->printf(5, 5, HGETEXT_LEFT, "dt:%.3f\nFPS:%d (constant)", // 使用中文将出现“??” pHGE->Timer_GetDelta(), pHGE->Timer_GetFPS() ); 在渲染函数中打印文字，HGE 到目前版本1.81 依然不支持中文，只能使用第三方支持。建议使用微妙的平衡(BOGY)提供的解决方案。粒子系统的使用： 1. 建立一个hgeSprite 对象，hgeSprite 类的构造函数如下： hgeSprite( HTEXTURE tex, // 纹理的句柄 float x, // sprite 对应的纹理的x 坐标 float y, // sprite 对应的纹理的y 坐标（区别于顶点中的纹理坐标，这里无需规格化坐标间隔） float w, // sprite 的宽 float h // sprite 的高 ); 注意，sprite 对应的纹理的坐标，是sprite 的左上的坐标。由此可见，一个精灵对应了纹理中的一个四边形区域，实际的源码中，sprite 类含有一个hgeQuad 成员变量。如果tex 为0，那么就使用白色作为纹理的数据（texture data） hgeSprite* pSpt = new hgeSprite(tex, 32, 32, 32, 32); 2. 设置混合模式，根据情况设置混合模式，后面详细讨论： pSpt->SetBlendMode(BLEND_COLORMUL | BLEND_ALPHAADD | BLEND_N OZWRITE); // 建议使用BLEND_ALPHAADD，这样看起来效果会好很多（增亮）。 3. 设置锚点（似乎和函数名字有点不符） void SetHotSpot( float x, // 锚点的x 坐标 float y // 锚点的y 坐标 ); 锚点是这样的一个点：进行一些操作的中心点。例如进行旋转操作的中心点，即旋转操作依赖于这个点。通常设置sprite 的中心点为锚点。 4. 关联hgeParticleSystem pPar = new hgeParticleSystem("trail.psi", m_pSpt); // 关联hgeParticleSys tem psi 文件被称之为粒子系统描述文件（particle system description file），这个文件是 hgeParticleSystemInfo 结构对象的硬盘镜像，这里不做详细介绍。 5. 粒子系统中的基本参数介绍：系统生命周期（System lifetime）：粒子系统的生命周期，在这个周期内会产生新粒子 Emission：每秒产生多少个新的粒子粒子生命周期（Particle lifetime）：特定的某个粒子的生命周期 6. 设定Emission： pPar->info.nEmission=10; 7. 调用Fire 函数 pPar->Fire() 函数会重启粒子系统，但它不会影响当前活跃粒子 pPar->Render(); 9. MoveTo 函数 pPar->MoveTo(x, y); 用于移动粒子系统到（x，y）处 10. Update 函数 pPar->Update(m_pHGE->Timer_GetDelta()); 在帧函数中应该调用Update 且使用参数为m_pHGE->Timer_GetDelta() 使用 hgeSprite 渲染：前面说了为了渲染，使用了hgeQuad，那样做是复杂的，我们完全可以使用sprite 来实现，而不需要使用到过多的Core Functions 层的函数。 1. 创建sprite pSpt = new hgeSprite(tex, 96, 64, 32, 32); 2. 设置颜色 pSpr->SetColor(0xFFFFA000); SetColor 函数将为sprite 添加颜色，添加的方式由混合模式决定，设置混合模式，通过调用函数pSpr->SetBlendMode 实现。注意，这里设置的颜色是sprite 中hgeQuad 对象的顶点的颜色，四个顶点颜色将设为相同，而混合模式设置的是sprite 中的hgeQuad 对象的blend 值。 pSpr->SetBlendMode(BLEND_COLORMUL | BLEND_ALPHAADD | BLEND_NO ZWRITE); // 这里使用的纹理是alpha 通道渐变，颜色为白色的纹理，因此会使用到B LEND_COLORMUL，这点在《HGE 系列教材（5） --- 输入、声音和渲染》做了详细的说明 3. 设置锚点： pSpr->SetHotSpot(16, 16); 4. 渲染在渲染函数中，调用pSpr->Render(x, y); 方可 HGE 系列教材（8） --- hgeResourceManager helper class（本文未完成） hgeResourceManager 是一个资源管理类 1. 构造函数 hgeResourceManager( const char* scriptname = 0 ); scriptname 表示资源脚本文件名（Resource script filename），如果此参数为0，表示不使用Resource script file 现在来介绍一下资源脚本：资源脚本是一个文本文件，用于定义资源。资源文件由多个（或一个）命令（command）组成，格式如下： Command ResourceName : BaseResourceName { Parameter1=Value1 ; 这里是注释 Parameter2=Value2 ... ParameterN=ValueN } 我们来看一个例子： Resource level1 { filename=levels\level1.dat resgroup=1 } 这里只有一个命令：Resource，Resource 命令定义了一个原生资源（raw resource）注意，资源文件是大小写敏感的，资源文件中可以有注释，使用“;”开头。资源文件的参数（parameter）是没有顺序限制的。同种类型的资源，不可以使用相同的资源名（Resource Name）。在定义资源名或者文件路径时，出现空格或者特殊字符，需要把整个字符串用双引号引起来。 BaseResourceName 是可选的，如果被指定，那么就表示对BaseResourceName 对应的参数（Parameters）的拷贝，例如： Sprite wizard { texture=characters rect=0,0,32,32 hotspot=16,16 blendmode=COLORMUL,ALPHABLEND,NOZWRITE resgroup=1 } Sprite orc : wizard { rect=0,64,32,32 ; 设定新值 color=FF808000 ; 设定新值 } 这里orc 除了rect 和color 两个参数以外，其他参数值都和wizard 一样。 hgeResourceManager 是可以容错的，如果脚本出现错误，不会导致程序的终止，错误信息将被写入日志文件。 1）Command（命令） Command 表明了资源的含义，含有以下几种： Include，Resource，Texture，Sound，Music，Stream，Target，Sprite，Animat ion，Font，Particle，Distortion，StringTable <1> Include 命令：Include 命令用于导入其他的资源脚本文件，例如： Include level2.res ; level2.res 是一个资源脚本文件注意，自引用和循环引用是可行的，它们会被检查出来，并报告在日志文件中，例如： <2> Resource 命令：定义原生资源（raw resource）参数： filename，resgroup。例如： Resource level1 { filename=levels\level1.dat ; 可以使用绝对或者相对路径，相对路径是相对于应用程序所在的文件夹或者是相对于资源包的根目录，特别应该注意的是，如果它是一个相对路径，相对的是应用程序或者资源包的根目录而不是脚本文件 resgroup=1 ; 资源组（resource group）标识符，0 表示没有特定的组 } <3> Texture 命令：定义一个纹理参数：filename，mipmap，resgroup。例如： Texture background { filename=images\bg.jpg resgroup=1 } 由于没有设定mipmap 参数的值，因此它取默认值。 <4> Sound 命令：定义一个音效参数：filename，resgroup。例如： Sound explosion1 { filename=sounds\expl1.ogg resgroup=1 } <5> Music 命令 HGE 系列教材（9） --- GUI（本文未完成） 1. hge 中GUI 对象和控件 hge 中GUI 对象被看作是一个控件的容器，hge 提供了创建GUI 对象的类hgeGUI 类 2. hgeGUI 类 1）AddCtrl 函数 void AddCtrl( hgeGUIObject *ctrl // hgeGUIObject 对象的指针 ); 我们通常可以有这样的写法： gui->AddCtrl(new hgeGUIMenuItem(1,fnt,snd,400,200,0.0f,"Play")); 这里hgeGUIMenuItem 是一个控件，继承于hgeGUIObject 类，注意，我们创建了 hgeGUIObject 对象，但是却没有去销毁它，因为hgeGUI 类的析构函数会去处理这些问题。 2）SetNavMode 设置GUI 导航模式（Navigate mode）： void SetNavMode( int navmode ); HGEGUI_NONAVKEYS - 无键盘导航 HGEGUI_LEFTRIGHT - 左右按键导航 HGEGUI_UPDOWN - 上下按键导航 HGEGUI_CYCLED - 循环默认情况下，navmode 被设置为HGEGUI_NONAVKEYS，对于一个菜单，我们可以这样设置： SetNavMode(HGEGUI_UPDOWN | HGEGUI_CYCLED); 使用上下键导航，并且循环。设置光标sprite： void SetCursor( hgeSprite *sprite ); 设置光标对应的sprite，如果为0，表示不显示光标，默认情况为0。注意，光标不受G UI 对象的管理，也就是用户必须自己释放光标资源。 4）SetFocus void SetFocus( int id ); 每个控件都有一个对应的ID 号，这个ID 号被称之为控件的标识符，这里通过控件标识符来设置焦点。键盘事件只会被分发到成为焦点的控件上。 5）Enter 开始GUI Enter 动画 3. hgeGUIObject hgeGUIObject 是一个抽象类，它有一个纯虚函数Render hgeGUIObject 类的子类的对象并不是GUI 对象，而是GUI 控件，这一点应该清楚 1）hgeGUIObject 的成员变量 hgeGUIObject 的成员变量都为public： // 必须在构造函数中初始化的变量 int id; // 控件标识符 bool bStatic; // 如果为true 控件无法成为焦点也不会接受键盘事件，同时它将被 navigate 例程忽略（前面已谈到设置navigate） bool bVisible; // 控件是否可见，如果为false，控件将不被渲染 bool bEnabled; // false 时，控件对用户的输入不作出任何回应，但是控件是可以接受到用户的通知（区别于bStatic） hgeRect rect; // 控件有界框（bounding box）在屏幕上的区域 DWORD color; // 控件颜色 // 不需要在构造函数中初始化的变量 hgeGUI *gui; // GUI 对象指针 hgeGUIObject *prev; // 连接GUI 对象中的所有控件，子类不需要改变它 // hge 指针 static HGE *hge; 2）void Render(void) 渲染控件到屏幕 3）void Update(float fDt) fDt 上次调用Update 函数到现在所用的时间（单位是秒） 4）void Enter(void) 控件出现在屏幕上的时候被调用，用于播放控件出现时的动画 5）void Leave(void) 控件离开屏幕的时候被调用，用于播放控件离开屏幕的动画 6）bool IsDone(void) 判断控件出现动画和控件离开动画是否播放完毕 7）void Focus(bool bFocused) 控件获得焦点，bFocused 为true，反之为false 8）bool MouseMove(float x, float y) 以控件左上为原点，鼠标指针的坐标。如果控件状态改变，需要通知调用者，那么返回tr ue，否则返回false 9）bool MouseLButton( bool bDown) bDown 如果为true，表示按下鼠标左键，如果bDown 为false，表示松开鼠标左键 10）bool KeyClick( int key, int chr) key 表示按键的虚拟代码（Virtual code of the pressed key），见下表： HGEK_LBUTTON Left mouse button HGEK_RBUTTON Right mouse button HGEK_MBUTTON Middle mouse button (wheel button) HGEK_BACKSPACE BACKSPACE key HGEK_TAB TAB key HGEK_ENTER Any of the two ENTER keys HGEK_SPACE SPACE key HGEK_SHIFT Any of the two SHIFT keys HGEK_CTRL Any of the two CTRL keys HGEK_ALT Any of the two ALT keys HGEK_LWIN Left WINDOWS key HGEK_RWIN Right WINDOWS key HGEK_APPS APPLICATIONS key HGEK_PAUSE PAUSE key HGEK_CAPSLOCK CAPS LOCK key HGEK_NUMLOCK NUM LOCK key HGEK_SCROLLLOCK SCROLL LOCK key HGEK_PGUP PAGE UP key HGEK_PGDN PAGE DOWN key HGEK_HOME HOME key HGEK_END END key HGEK_INSERT INSERT key HGEK_DELETE DELETE key HGEK_LEFT LEFT ARROW key HGEK_UP UP ARROW key HGEK_RIGHT RIGHT ARROW key HGEK_DOWN DOWN ARROW key HGEK_0 Main keyboard '0' key HGEK_1 Main keyboard '1' key HGEK_2 Main keyboard '2' key HGEK_3 Main keyboard '3' key HGEK_4 Main keyboard '4' key HGEK_5 Main keyboard '5' key HGEK_6 Main keyboard '6' key HGEK_7 Main keyboard '7' key HGEK_8 Main keyboard '8' key HGEK_9 Main keyboard '9' key HGEK_A 'A' key HGEK_B 'B' key HGEK_C 'C' key HGEK_D 'D' key HGEK_E 'E' key HGEK_F 'F' key HGEK_G 'G' key HGEK_H 'H' key HGEK_I 'I' key HGEK_J 'J' key HGEK_K 'K' key HGEK_L 'L' key HGEK_M 'M' key HGEK_N 'N' key HGEK_O 'O' key HGEK_P 'P' key HGEK_Q 'Q' key HGEK_R 'R' key HGEK_S 'S' key HGEK_T 'T' key HGEK_U 'U' key HGEK_V 'V' key HGEK_W 'W' key HGEK_X 'X' key HGEK_Y 'Y' key HGEK_Z 'Z' key HGEK_GRAVE Grave accent (`) HGEK_MINUS Main keyboard MINUS key (-) HGEK_EQUALS Main keyboard EQUALS key (=) HGEK_BACKSLASH BACK SLASH key (\) HGEK_LBRACKET Left square bracket ([) HGEK_RBRACKET Right square bracket (]) HGEK_SEMICOLON Semicolon (;) HGEK_APOSTROPHE Apostrophe (') HGEK_COMMA Comma (,) HGEK_PERIOD Main keyboard PERIOD key (.) HGEK_SLASH Main keyboard SLASH key (/) HGEK_NUMPAD0 Numeric keyboard '0' key HGEK_NUMPAD1 Numeric keyboard '1' key HGEK_NUMPAD2 Numeric keyboard '2' key HGEK_NUMPAD3 Numeric keyboard '3' key HGEK_NUMPAD4 Numeric keyboard '4' key HGEK_NUMPAD5 Numeric keyboard '5' key HGEK_NUMPAD6 Numeric keyboard '6' key HGEK_NUMPAD7 Numeric keyboard '7' key HGEK_NUMPAD8 Numeric keyboard '8' key HGEK_NUMPAD9 Numeric keyboard '9' key HGEK_MULTIPLY Numeric keyboard MULTIPLY key (*) HGEK_DIVIDE Numeric keyboard DIVIDE key (/) HGEK_ADD Numeric keyboard ADD key (+) HGEK_SUBTRACT Numeric keyboard SUBTRACT key (-) HGEK_DECIMAL Numeric keyboard DECIMAL key (.) HGEK_F1 F1 key HGEK_F2 F2 key HGEK_F3 F3 key HGEK_F4 F4 key HGEK_F5 F5 key HGEK_F6 F6 key HGEK_F7 F7 key HGEK_F8 F8 key HGEK_F9 F9 key HGEK_F10 F10 key HGEK_F11 F11 key HGEK_F12 F12 key 如果控件状态修改了，希望通知调用者，那么返回true，否则为false

jQuery详细教程，讲解很透彻，一. jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数，隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数，隐藏 id="test" 的元素。 $("p").hide() 演示 jQuery hide() 函数，隐藏所有元素。 $(".test").hide() 演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。 jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action() • 美元符号定义 jQuery • 选择符（selector）“查询”和“查找” HTML 元素 • jQuery 的 action() 执行对元素的操作示例 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() - 隐藏所有 class="test" 的段落 $("#test").hide() - 隐藏所有 id="test" 的元素提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。文档就绪函数您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中： $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。二. jQuery 选择器在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。 jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。选择器允许您对 HTML 元素组或单个元素进行操作。在 HTML DOM 术语中：选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。 jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取元素。 $("p.intro") 选取所有 class="intro" 的元素。 $("p#demo") 选取 id="demo" 的第一个元素。 jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。 jQuery CSS 选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。下面的例子把所有 p 元素的背景颜色更改为红色：实例 $("p").css("background-color","red"); 更多的选择器实例语法描述 $(this) 当前 HTML 元素 $("p") 所有元素 $("p.intro") 所有 class="intro" 的元素 $(".intro") 所有 class="intro" 的元素 $("#intro") id="intro" 的第一个元素 $("ul li:first") 每个的第一个元素 $("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性 $("div#intro .head") id="intro" 的元素中的所有 class="head" 的元素三. jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。通常会把 jQuery 代码放到部分的事件处理方法中：实例 $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); This is a heading This is a paragraph. This is another paragraph. Click me 亲自试一试在上面的例子中，当按钮的点击事件被触发时会调用一个函数： $("button").click(function() {..some code... } ) 该方法隐藏所有元素： $("p").hide(); 单独文件中的函数如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。当我们在教程中演示 jQuery 时，会将函数直接添加到部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：实例 jQuery 名称冲突 jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。亲自试一试结论由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护： • 把所有 jQuery 代码置于事件处理函数中 • 把所有事件处理函数置于文档就绪事件处理器中 • 把 jQuery 代码置于单独的 .js 文件中 • 如果存在名称冲突，则重命名 jQuery 库 jQuery 事件下面是 jQuery 中事件方法的一些例子： Event 函数绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时） $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件 $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件四. jQuery实例 jQuery hide() 演示简单的 jQuery hide() 函数。 $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); If you click on me, I will disappear. jQuery hide() 另一个 hide() 演示。如何隐藏部分文本。 $(document).ready(function(){ $(".ex .hide").click(function(){ $(this).parents(".ex").hide("slow"); }); }); div.ex { background-color:#e5eecc; padding:7px; border:solid 1px #c3c3c3; } Island Trading Hide me Contact: Helen Bennett Garden House Crowther Way London Paris Trading Hide me Contact: Marie Bertrand 265, Boulevard Charonne Paris jQuery slideToggle() 演示简单的 slide panel 效果 $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } W3School - 领先的 Web 技术教程站点在 W3School，你可以找到你所需要的所有网站建设教程。请点击这里 jQuery fadeTo() 演示简单的 jQuery fadeTo() 函数。 $(document).ready(function(){ $("button").click(function(){ $("div").fadeTo("slow",0.25); }); }); 点击这里查看淡出效果 jQuery animate() 演示简单的 jQuery animate() 函数。 $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); }); }); Start Animation jQuery 隐藏和显示通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示：实例 $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); 亲自试一试 $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); 如果点击“隐藏”按钮，我就会消失。隐藏显示 hide() 和 show() 都可以设置两个可选参数：speed 和 callback。语法： $(selector).hide(speed,callback) $(selector).show(speed,callback) speed 参数规定显示或隐藏的速度。可以设置这些值："slow", "fast", "normal" 或毫秒。 callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。实例 $("button").click(function(){ $("p").hide(1000); }); 亲自试一试 $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); }); }); 隐藏 This is a paragraph with little content. This is another small paragraph. jQuery 切换 jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。隐藏显示的元素，显示隐藏的元素。语法： $(selector).toggle(speed,callback) speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。实例 $("button").click(function(){ $("p").toggle(); }); 亲自试一试 $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); 切换 This is a paragraph with little content. This is another small paragraph. callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。 jQuery 滑动函数 - slideDown, slideUp, slideToggle jQuery 拥有以下滑动函数： $(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback) speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。 callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。 slideDown() 实例 $(".flip").click(function(){ $(".panel").slideDown(); }); 亲自试一试 $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow"); }); }); div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } W3School - 领先的 Web 技术教程站点在 W3School，你可以找到你所需要的所有网站建设教程。请点击这里 slideUp() 实例 $(".flip").click(function(){ $(".panel").slideUp() }) 亲自试一试 $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideUp("slow"); }); }); div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; } W3School - 领先的 Web 技术教程站点在 W3School，你可以找到你所需要的所有网站建设教程。请点击这里 slideToggle() 实例 $(".flip").click(function(){ $(".panel").slideToggle(); }); 亲自试一试 $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } W3School - 领先的 Web 技术教程站点在 W3School，你可以找到你所需要的所有网站建设教程。请点击这里 jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo() jQuery 拥有以下 fade 函数： $(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback) speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。 fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。 callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。 fadeTo() 实例 $("button").click(function(){ $("div").fadeTo("slow",0.25); }); 亲自试一试 $(document).ready(function(){ $("button").click(function(){ $("div").fadeTo("slow",0.25); }); }); 点击这里查看淡出效果 fadeOut() 实例 $("button").click(function(){ $("div").fadeOut(4000); }); 亲自试一试 $(document).ready(function(){ $("#test").click(function(){ $(this).fadeOut(4000); }); }); CLICK ME AWAY! 如果您点击上面的框，它会淡出直到消失为止。 jQuery 自定义动画 jQuery 函数创建自定义动画的语法： $(selector).animate({params},[duration],[easing],[callback]) 关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性： animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"}); 第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是："slow", "fast", "normal" 或毫秒。实例 1 $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); }); }); 亲自试一试 $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); }); }); Start Animation 实例 2 $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({left:"100px"},"slow"); $("#box").animate({fontSize:"3em"},"slow"); }); }); 亲自试一试 $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({left:"100px"},"slow"); $("#box").animate({fontSize:"3em"},"slow"); }); }); Start Animation HELLO HTML 元素默认是静态定位，且无法移动。如需使元素可以移动，请把 CSS 的 position 设置为 relative 或 absolute。 jQuery 效果 - 来自本页函数描述 $(selector).hide() 隐藏被选元素 $(selector).show() 显示被选元素 $(selector).toggle() 切换（在隐藏与显示之间）被选元素 $(selector).slideDown() 向下滑动（显示）被选元素 $(selector).slideUp() 向上滑动（隐藏）被选元素 $(selector).slideToggle() 对被选元素切换向上滑动和向下滑动 $(selector).fadeIn() 淡入被选元素 $(selector).fadeOut() 淡出被选元素 $(selector).fadeTo() 把被选元素淡出为给定的不透明度 $(selector).animate() 对被选元素执行自定义动画五. JQuery Callback 函数 jQuery 动画的问题许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。例子：$("p").hide("slow") speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。实例 $("button").click(function(){ $("p").hide(1000); }); 亲自试一试 $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); }); }); 隐藏 This is a paragraph with little content. This is another small paragraph. 由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。为了避免这个情况，您可以以参数的形式添加 Callback 函数。 jQuery Callback 函数当动画 100% 完成后，即调用 Callback 函数。典型的语法： $(selector).hide(speed,callback) callback 参数是一个在 hide 操作完成后被执行的函数。错误（没有 callback） $("p").hide(1000); alert("The paragraph is now hidden"); 亲自试一试 $(document).ready(function(){ $("button").click(function(){ $("p").hide(2000); alert("The paragraph is now hidden"); }); }); Hide This is a paragraph with little content. 正确（有 callback） $("p").hide(1000,function(){ alert("The paragraph is now hidden"); }); 亲自试一试 $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000,function(){ alert("The paragraph is now hidden"); }); }); }); Hide This is a paragraph with little content. 六. jQuery 包含很多供改变和操作 HTML 的强大函数。改变 HTML 内容语法 $(selector).html(content) html() 函数改变所匹配的 HTML 元素的内容（innerHTML）。实例 $("p").html("W3School"); 亲自试一试 $(document).ready(function(){ $("button").click(function(){ $("p").html("W3School"); }); }); This is a heading This is a paragraph. This is another paragraph. 请点击这里添加 HTML 内容语法 $(selector).append(content) append() 函数向所匹配的 HTML 元素内部追加内容。语法 $(selector).prepend(content) prepend() 函数向所匹配的 HTML 元素内部预置（Prepend）内容。实例 $("p").append(" W3School"); 亲自试一试 $(document).ready(function(){ $("button").click(function(){ $("p").append(" W3School."); }); }); This is a heading This is a paragraph. This is another paragraph. 请点击这里语法 $(selector).after(content) after() 函数在所有匹配的元素之后插入 HTML 内容。语法 $(selector).before(content) before() 函数在所有匹配的元素之前插入 HTML 内容。实例 $("p").after(" W3School."); 亲自试一试 $(document).ready(function(){ $("button").click(function(){ $("p").after(" W3School."); }); }); This is a heading This is a paragraph. This is another paragraph. 请点击这里 jQuery HTML 操作 - 来自本页函数描述 $(selector).html(content) 改变被选元素的（内部）HTML $(selector).append(content) 向被选元素的（内部）HTML 追加内容 $(selector).prepend(content) 向被选元素的（内部）HTML “预置”（Prepend）内容 $(selector).after(content) 在被选元素之后添加 HTML $(selector).before(content) 在被选元素之前添加 HTML 七. jQuery CSS 操作 jQuery 拥有三种用于 CSS 操作的重要函数： • $(selector).css(name,value) • $(selector).css({properties}) • $(selector).css(name) CSS 操作实例函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值：实例 $(selector).css(name,value) $("p").css("background-color","red"); 亲自试一试 $(document).ready(function(){ $("button").click(function(){ $("p").css("background-color","red"); }); }); This is a heading This is a paragraph. This is another paragraph. Click me 函数 css({properties}) 同时为所有匹配元素的一系列 CSS 属性设置值：实例 $(selector).css({properties}) $("p").css({"background-color":"red","font-size":"200%"}); 亲自试一试 $(document).ready(function(){ $("button").click(function(){ $("p").css({"background-color":"red","font-size":"200%"}); }); }); This is a heading This is a paragraph. This is another paragraph. Click me 函数 css(name) 返回指定的 CSS 属性的值：实例 $(selector).css(name) $(this).css("background-color"); 亲自试一试 $(document).ready(function(){ $("div").click(function(){ $("#result").html($(this).css("background-color")); }); }); Click in the box jQuery Size 操作 jQuery 拥有两种用于尺寸操作的重要函数： • $(selector).height(value) • $(selector).width(value) Size 操作实例函数 height(value) 设置所有匹配元素的高度：实例 $(selector).height(value) $("#id100").height("200px"); 亲自试一试 $(document).ready(function(){ $("button").click(function(){ $("#id100").height("200px"); }); }); HELLO W3SCHOOL 请点击这里函数 width(value) 设置所有匹配元素的宽度：实例 $(selector).width(value) $("#id200").width("300px"); 亲自试一试 $(document).ready(function(){ $("button").click(function(){ $("#id200").width("300px"); }); }); HELLO W3SCHOOL 请点击这里 jQuery CSS 函数 - 来自本页 CSS 属性描述 $(selector).css(name,value) 为匹配元素设置样式属性的值 $(selector).css({properties}) 为匹配元素设置多个样式属性 $(selector).css(name) 获得第一个匹配元素的样式属性值 $(selector).height(value) 设置匹配元素的高度 $(selector).width(value) 设置匹配元素的宽度八. jQuery 参考手册 @ jQuery 选择器选择器实例选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有元素 .class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素 :first $("p:first") 第一个元素 :last $("p:last") 最后一个元素 :even $("tr:even") 所有偶数元素 :odd $("tr:odd") 所有奇数元素 :eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始） :gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素 :lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素 :not(selector) $("input:not(:empty)") 所有不为空的 input 元素 :header $(":header") 所有标题元素 - :animated 所有动画元素 :contains(text) $(":contains('W3School')") 包含指定字符串的所有元素 :empty $(":empty") 无子（元素）节点的所有元素 :hidden $("p:hidden") 所有隐藏的元素 :visible $("table:visible") 所有可见的表格 s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素 [attribute] $("[href]") 所有带有 href 属性的元素 [attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素 [attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素 [attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含 ".jpg" 的元素 :input $(":input") 所有元素 :text $(":text") 所有 type="text" 的元素 :password $(":password") 所有 type="password" 的元素 :radio $(":radio") 所有 type="radio" 的元素 :checkbox $(":checkbox") 所有 type="checkbox" 的元素 :submit $(":submit") 所有 type="submit" 的元素 :reset $(":reset") 所有 type="reset" 的元素 :button $(":button") 所有 type="button" 的元素 :image $(":image") 所有 type="image" 的元素 :file $(":file") 所有 type="file" 的元素 :enabled $(":enabled") 所有激活的 input 元素 :disabled $(":disabled") 所有禁用的 input 元素 :selected $(":selected") 所有被选取的 input 元素 :checked $(":checked") 所有被选中的 input 元素 @ jQuery 事件方法事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。触发实例： $("button#demo").click() 上面的例子将触发 id="demo" 的 button 元素的 click 事件。绑定实例： $("button#demo").click(function(){$("img").hide()}) 上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。方法描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发、或将函数绑定到指定元素的 blur 事件 change() 触发、或将函数绑定到指定元素的 change 事件 click() 触发、或将函数绑定到指定元素的 click 事件 dblclick() 触发、或将函数绑定到指定元素的 double click 事件 delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 die() 移除所有通过 live() 函数添加的事件处理程序。 error() 触发、或将函数绑定到指定元素的 error 事件 event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。 event.pageX 相对于文档左边缘的鼠标位置。 event.pageY 相对于文档上边缘的鼠标位置。 event.preventDefault() 阻止事件的默认动作。 event.result 包含由被指定事件触发的事件处理器返回的最后一个值。 event.target 触发事件的 DOM 元素。 event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 event.type 描述事件的类型。 event.which 指示按了哪个键或按钮。 focus() 触发、或将函数绑定到指定元素的 focus 事件 keydown() 触发、或将函数绑定到指定元素的 key down 事件 keypress() 触发、或将函数绑定到指定元素的 key press 事件 keyup() 触发、或将函数绑定到指定元素的 key up 事件 live() 触发、或将函数绑定到指定元素的 load 事件 load() 触发、或将函数绑定到指定元素的 load 事件 mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件 mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件 mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件 mousemove() 触发、或将函数绑定到指定元素的 mouse move 事件 mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件 mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件 mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件 one() 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 ready() 文档就绪事件（当 HTML 文档就绪可用时） resize() 触发、或将函数绑定到指定元素的 resize 事件 scroll() 触发、或将函数绑定到指定元素的 scroll 事件 select() 触发、或将函数绑定到指定元素的 select 事件 submit() 触发、或将函数绑定到指定元素的 submit 事件 toggle() 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。 trigger() 所有匹配元素的指定事件 triggerHandler() 第一个被匹配元素的指定事件 unbind() 从匹配元素移除一个被添加的事件处理器 undelegate() 从匹配元素移除一个被添加的事件处理器，现在或将来 unload() 触发、或将函数绑定到指定元素的 unload 事件 @ jQuery 效果函数方法描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数（仍未运行的） delay() 对被选元素的所有排队函数（仍未运行）设置延迟 dequeue() 运行被选元素的下一个排队函数 fadeIn() 淡入被选元素至完全不透明 fadeOut() 淡出被选元素至完全不透明 fadeTo() 把被选元素减弱至给定的不透明度 hide() 隐藏被选的元素 queue() 显示被选元素的排队函数 show() 显示被选的元素 slideDown() 通过调整高度来滑动显示被选元素 slideToggle() 对被选元素进行滑动隐藏和滑动显示的切换 slideUp() 通过调整高度来滑动隐藏被选元素 stop() 停止在被选元素上运行动画 toggle() 对被选元素进行隐藏和显示的切换 @ jQuery 文档操作方法这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。方法描述 addClass() 向匹配的元素添加指定的类名。 after() 在匹配的元素之后插入内容。 append() 向匹配的元素内部追加内容。 appendTo() 向匹配的元素内部追加内容。 attr() 设置或返回匹配元素的属性和值。 before() 在每个匹配的元素之前插入内容。 clone() 创建匹配元素集合的副本。 detach() 从 DOM 中移除匹配元素集合。 empty() 删除匹配的元素集合中所有的子节点。 hasClass() 检查匹配的元素是否拥有指定的类。 html() 设置或返回匹配的元素集合中的 HTML 内容。 insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面。 insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面。 prepend() 向每个匹配的元素内部前置内容。 prependTo() 向每个匹配的元素内部前置内容。 remove() 移除所有匹配的元素。 removeAttr() 从所有匹配的元素中移除指定的属性。 removeClass() 从所有匹配的元素中删除全部或者指定的类。 replaceAll() 用匹配的元素替换所有匹配到的元素。 replaceWith() 用新内容替换匹配的元素。 text() 设置或返回匹配元素的内容。 toggleClass() 从匹配的元素中添加或删除一个类。 unwrap() 移除并替换指定元素的父元素。 val() 设置或返回匹配元素的值。 wrap() 把匹配的元素用指定的内容或元素包裹起来。 wrapAll() 把所有匹配的元素用指定的内容或元素包裹起来。 wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。 @ jQuery 属性操作方法下面列出的这些方法获得或设置元素的 DOM 属性。这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。方法描述 addClass() 向匹配的元素添加指定的类名。 attr() 设置或返回匹配元素的属性和值。 hasClass() 检查匹配的元素是否拥有指定的类。 html() 设置或返回匹配的元素集合中的 HTML 内容。 removeAttr() 从所有匹配的元素中移除指定的属性。 removeClass() 从所有匹配的元素中删除全部或者指定的类。 toggleClass() 从匹配的元素中添加或删除一个类。 val() 设置或返回匹配元素的值。 @ jQuery CSS 操作函数下面列出的这些方法设置或返回元素的 CSS 相关属性。 CSS 属性描述 css() 设置或返回匹配元素的样式属性。 height() 设置或返回匹配元素的高度。 offset() 返回第一个匹配元素相对于文档的位置。 offsetParent() 返回最近的定位祖先元素。 position() 返回第一个匹配元素相对于父元素的位置。 scrollLeft() 设置或返回匹配元素相对滚动条顶部的偏移。 scrollTop() 设置或返回匹配元素相对滚动条左侧的偏移。 width() 设置或返回匹配元素的宽度。 @jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。函数描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求。 .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 .ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。 .ajaxSend() 在 Ajax 请求发送之前显示一条消息。 jQuery.ajaxSetup() 设置将来的 Ajax 请求的默认值。 .ajaxStart() 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。 .ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 .ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。 jQuery.get() 使用 HTTP GET 请求从服务器加载数据。 jQuery.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码数据。 jQuery.getScript() 使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。 .load() 从服务器加载数据，然后把返回到 HTML 放入匹配元素。 jQuery.param() 创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。 jQuery.post() 使用 HTTP POST 请求从服务器加载数据。 .serialize() 将表单内容序列化为字符串。 .serializeArray() 序列化表单元素，返回 JSON 数据结构数据。 @ jQuery 遍历函数 jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。函数描述 .add() 将元素添加到匹配元素的集合中。 .andSelf() 把堆栈中之前的元素集添加到当前集合中。 .children() 获得匹配元素集合中每个元素的所有子元素。 .closest() 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。 .contents() 获得匹配元素集合中每个元素的子元素，包括文本和注释节点。 .each() 对 jQuery 对象进行迭代，为每个匹配元素执行函数。 .end() 结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。 .eq() 将匹配元素集合缩减为位于指定索引的新元素。 .filter() 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。 .find() 获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。 .first() 将匹配元素集合缩减为集合中的第一个元素。 .has() 将匹配元素集合缩减为包含特定元素的后代的集合。 .is() 根据选择器检查当前的匹配元素集合，如果存在至少一个匹配元素，则返回 true。 .last() 将匹配元素集合缩减为集合中的最后一个元素。 .map() 把当前匹配集合中的每个元素传递给一个函数，产生包含返回值的新的 jQuery 对象。 .next() 获得匹配元素集合中每个元素紧邻的同辈元素。 .nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。 .nextUntil() 获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。 .not() 从匹配元素集合中删除元素。 .offsetParent() 获得用于定位的第一个父元素。 .parent() 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。 .parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。 .prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。 .prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。 .prevUntil() 获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。 .siblings() 获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。 .slice() 将匹配元素集合缩减为指定范围的子集。 @ jQuery 数据存储函数这些方法允许我们将指定的 DOM 元素与任意数据相关联。函数描述 .data() 存储与匹配元素相关的任意数据。 jQuery.data() 存储与指定元素相关的任意数据。 .removeData() 移除之前存放的数据。 jQuery.removeData() 移除之前存放的数据。 @ jQuery 队列控制函数函数描述 .clearQueue() 从队列中删除所有未运行的项目。 .dequeue() 从队列最前端移除一个队列函数，并执行它。 jQuery.dequeue() 从队列最前端移除一个队列函数，并执行它。 .queue() 显示或操作匹配元素所执行函数的队列。 jQuery.queue() 显示或操作匹配元素所执行函数的队列。九. jQuery 核心函数函数描述 jQuery() 接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器。实例找出所有属于 div 元素的子元素的 p 元素，然后设置其边框属性： $("div > p").css("border", "1px solid gray"); 亲自试一试定义和用法 jQuery() 方法接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器。 jQuery() 函数有三种语法：语法 1 接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器： jQuery(selector, [context]) 详细用法语法 2 使用原始 HTML 的字符串来创建 DOM 元素： jQuery(html,[ownerDocument]) 详细用法语法 3 绑定一个在 DOM 文档载入完成后执行的函数： jQuery( callback ) 详细用法 jQuery( selector, [ context ] ) 该语法有以下几种用法：用法 1 ：设置选择器环境语法 jQuery(selector, [context]) 默认情况下，选择器从文档根部对 DOM 进行搜索。不过，可以为 $() 设置可选的 context 参数。例如，如果我们希望在一个 callback 中搜索一个元素，可以限定下面的搜索：实例 $("div.foo").click(function() { $("span", this).addClass("bar"); }); 由于我们已经将 span 选择器限定到 this 这个环境中，只有被点击元素中的 span 会得到附加的 class。在内部，选择器环境是通过 .find() 方法实现的，因此 $("span", this) 等价于 $(this).find("span")。 jQuery 的核心功能都是通过这个函数实现的。jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。默认情况下, 如果没有指定 context 参数，$() 将在当前的 HTML document 中查找 DOM 元素；如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。在 jQuery 1.3.2 以后，其返回的元素顺序等同于在 context 中出现的先后顺序。用法 2 ：使用 DOM 元素语法 jQuery(element) 该函数允许我们通过使用以其他方式找到的 DOM 元素来创建 jQuery 对象。该功能通常的用法是，对已经通过 this 关键字传递到 callback 函数的元素调用 jQuery 的方法：实例 $("div.foo").click(function() { $(this).slideUp(); }); 此例会在元素被点击时使用滑动动画对其进行隐藏。由于处理程序接受的 this 关键词中的被点击项目是纯的 DOM 元素，因此在对其调用 jQuery 的方法之前，必须用 jQuery 对象包装该元素。这个函数也可以接收 XML 文档和 Window 对象（虽然它们不是 DOM 元素）作为有效的参数。当 XML 数据从 Ajax 调用中返回后，我们可以使用 $() 函数通过 jQuery 对象包装该数据。一旦完成，我们就可以使用 .find() 和其他 DOM 遍历方法来取回 XML 结构中单个元素。用法 3 ：克隆 jQuery 对象语法 jQuery(jQuery object) 当以参数的形式向 $() 函数传递 jQuery 对象后，会创建一个该对象的副本。与初始对象一样，新的 jQuery 对象引用相同的 DOM 元素。用法 4 ：返回空的集合语法 jQuery() 对于 jQuery 1.4，调用无参数的 jQuery() 方法会返回空的 jQuery 集合。在之前版本的 jQuery 中，这样会返回包含 document 节点的集合。 jQuery( html, [ ownerDocument ] ) 该语法有以下几种用法：用法 1 ：创建新的元素语法 jQuery(html,[ownerDocument]) 你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制，可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址)，还有反斜杠。当你创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个 span ，可以用 $("") 或 $("") ，但不推荐 $("")。在 jQuery 中，这个语法等同于 $(document.createElement("span"))。如果以参数的形式将字符串传递给 $()，jQuery 会检查字符串是否是 HTML （比如，字符串某些位置存在标签）。如果不是，则把字符串解释为选择器表达式，请见上面的讲解。但如果字符串是 HTML 片段，则 jQuery 试图创建由该 HTML 片段描述的 DOM 元素。然后会创建并返回一个引用这些 DOM 元素的 jQuery 对象：实例 $("My new text").appendTo("body"); 如果 HTML 片段比不含属性的简单标签更复杂，如同上面例子中的 HTML，那么元素实际的创建过程是由浏览器的 innerHTML 机制完成的。具体地讲，jQuery 会创建新的元素，然后为传入的 HTML 片段设置元素的 innerHTML 属性。当参数只是简单的标签，比如$("") 或 $("")，jQuery 会通过内生的 JavaScript createElement() 函数来创建元素。要确保跨平台兼容性，片段的结构必须良好。能够包含其他元素的标签必须成对出现（带有关闭标签）： $(""); 不过，jQuery 也允许类似 XML 的标签语法： $(""); 无法包含其他元素的标签可以关闭，也可以不关闭： $(""); $(""); 用法 2 ：设置属性和事件语法 jQuery(html,props) 对于 jQuery 1.4，我们可以向第二个参数传递一个属性映射。该参数接受能够传递给 .attr() 方法的属性的超集。此外，可以传递任意的事件类型，并可以调用下面的 jQuery 方法：val, css, html, text, data, width, height, or offset. 注意，Internet Explorer 不允许你创建 input 元素并改变其类型；您必须使用例如 "" 来规定类型。实例创建一个元素，同时设定 type 属性、属性值，以及一些事件。 $("", { type: "text", val: "Test", focusin: function() { $(this).addClass("active"); }, focusout: function() { $(this).removeClass("active"); } }).appendTo("form"); jQuery( callback ) 允许你绑定一个在 DOM 文档载入完成后执行的函数。该函数的作用如同 $(document).ready() 一样，只不过用这个函数时，需要把页面中所有需要在 DOM 加载完成时执行的其他 $() 操作符都包装到其中来。尽管从技术上来说，这个函数是可链接的，但真正以这种方式链接的情况并不多。例子当DOM加载完成后，执行其中的函数： $(function(){ // 文档就绪 }); 函数描述 jQuery.noConflict() 运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库。定义和用法 noConflict() 方法让渡变量 $ 的 jQuery 控制权。语法 jQuery.noConflict([removeAll]) 参数描述 removeAll 布尔值。指示是否允许彻底将 jQuery 变量还原。说明许多 JavaScript 库使用 $ 作为函数或变量名，jQuery 也一样。在 jQuery 中，$ 仅仅是 jQuery 的别名，因此即使不使用 $ 也能保证所有功能性。假如我们需要使用 jQuery 之外的另一 JavaScript 库，我们可以通过调用 $.noConflict() 向该库返回控制权： $.noConflict(); // 使用另一个库的 $ 的代码可以与 .ready() 方法结合起来使用，来为 jQuery 对象起别名，这项技术非常有效： $.noConflict(); jQuery(document).ready(function($) { // 使用 jQuery $ 的代码 }); // 使用其他库的 $ 的代码此外，通过向该方法传递参数 true，我们可以将 $ 和 jQuery 的控制权都交还给原来的库。用之前请考虑清楚！这是相对于简单的 noConflict 方法更极端的版本，因为这将完全重新定义 jQuery。这通常用于一种极端的情况，比如你想要将 jQuery 嵌入一个高度冲突的环境。注意：调用此方法后极有可能导致插件失效。实例例子 1 将 $ 引用的对象映射回原始的对象： jQuery.noConflict(); jQuery("div p").hide(); // 使用 jQuery $("content").style.display = "none"; // 使用其他库的 $() 例子 2 恢复使用别名 $，然后创建并执行一个函数，在这个函数的作用域中仍然将 $ 作为 jQuery 的别名来使用。在这个函数中，原来的 $ 对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效： jQuery.noConflict(); (function($) { $(function() { // 使用 $ 作为 jQuery 别名的代码 }); })(jQuery); ... // 其他用 $ 作为别名的库的代码例子 3 可以将 jQuery.noConflict() 与简写的 ready 结合，使代码更紧凑： jQuery.noConflict()(function(){ // 使用 jQuery 的代码 }); ... // 其他库使用 $ 做别名的代码例子 4 创建一个新的别名用以在接下来的库中使用 jQuery 对象： var j = jQuery.noConflict(); j("div p").hide(); // 基于 jQuery 的代码 $("content").style.display = "none"; // 基于其他库的 $() 代码例子 5 完全将 jQuery 移到一个新的命名空间： var dom = {}; dom.query = jQuery.noConflict(true); 结果: dom.query("div p").hide(); // 新 jQuery 的代码 $("content").style.display = "none"; // 另一个库 $() 的代码 jQuery("div > p").hide(); // 另一个版本 jQuery 的代码

110,008

社区成员

642,611

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

让您成为最强悍的C#开发者

试试用AI创作助手写篇文章吧

+ 用AI写文章