jQuery随着版本的不断升级代码量也随之增加,从1.0.0的不到两千行到现在的1.10.2已经突破1万行。
新的API不断增加,但有些在项目中并没有用到。jQuery团队很早就考虑到这一点,按模块来划分,并可以按需定制自己的jQuery。
jQuery从1.9开始构建工具迁移到grunt。grunt是基于node的,因此需要安装node,下面详细介绍。
一、安装node
很简单,这里有入门参考。
二、安装grunt
也很简单,这里有入门参考。
三、去github下载jQuery源码
使用命令: git clone git://github.com/jquery/jquery.git
下载后的目录
可以看到安装了一堆lib,uglify、gzip.js、requirejs等。至此,所有安装都已完毕。
五、编译源码到dest目录
非常简单,cd到jquery目录,敲grunt,如图
此时jquery目录里多了一个dest目录
dest目录有三个文件,未压缩的jquery.js,压缩的jquery.min.js和souremap(jquery.min.map需浏览器支持),这就是最终生产环境用到jquery版本。和你在官网下载的没有任何区别。
注意:
默认编译的是的2.x版本,2.x不支持IE6,7,8,如果想编译1.x的版本,使用git命令 git checkout 命令,如下将切换的 1.10.0
git checkout 1.10.0
所有的tag可通过命令 git tag 查看
六、定制你自己的jQuery
上面编译的是完整版的jQuery,如果想定制自己的jQuery,比如你不需要动画模块,或者不需要ajax模块等。
查看jquery目录下的src目录,可以看到jQuery自身是分模块开发的,各个模块在独立的目录或文件里,如下图
除了 核心模块(core)和 选择器(selector),其它模块都可以定制(包含或排除)。
比如你的项目中没有用到ajax模块,那么通过以下命令编译的jquery.js将不包含$.ajax, $.get, $.getJSON等。
cd到jquery目录,输入 grunt custom:-ajax
时查看dest目录下的jquery.js会发现代码只有7千多行,少了许多。这个版本的jquery版本号也很特殊,如下
不想包含多个模块,以逗号分隔即可,如
不包含ajax和动画:grunt custom:-ajax,-effects
不包含css、位置、包裹:grunt custom:-css,-offset,-wrap
七、修改jQuery的AMD模块名
我们知道jQuery可以做为AMD的一个模块存在,它默认的模块名是 "jquery"。
如果不想使用该名称,通过命令 grunt custom --amd="my-jquery" 即可完成修改
这时jquery的模块名称就变为 "my-jquery" 了,jquery.js源码中体现如下
if ( typeof define === "function" && define.amd ) { define( "my-jquery", [], function() { return jQuery; }); }
此时当你的模块require时,需要改为 require('my-jquery'),通过define传递依赖时也需要改下。
特殊情况下你可能要使用一个匿名模块,使用命令 grunt custom --amd="",关于AMD及模块化请猛击 Modular JS。
相关推荐
jQuery UI 支持通过 ThemeRoller 工具创建和定制主题,使得开发者可以根据自己的需求和品牌风格调整界面的视觉效果。中文定制版可能提供了更加友好的中文版 ThemeRoller 或相关指南,帮助用户更便捷地设计符合中国...
这表明开发者不仅构建了论坛的基础框架,还可能对Jquery进行了深度定制,创建了适用于特定论坛场景的交互功能或特效。 【标签】列举了五个关键词:“C#”,“Jquery”,“论坛”,“源码”,“插件”。这些标签帮助...
通过以上步骤,你可以定制一份符合自己需求的jQuery参考文档,不仅可以作为学习资料,也可以在实际工作中快速查找API用法,提高开发效率。同时,这也是一个很好的实践项目,可以帮助你深入理解XML、XSLT以及文件处理...
标题中的“可定制jquery写的div下拉框”指的是使用JavaScript库jQuery实现的一种交互式下拉菜单,它允许用户根据需求自定义下拉内容和样式。这种下拉框通常用于网页表单、导航菜单等场景,提供更丰富的用户体验。 ...
此外,jQuery UI支持Themeroller工具,允许开发者轻松创建和定制自己的主题。 接着,`jquery-ui.js`是jQuery UI的核心JavaScript库,它包含了所有UI组件的实现。这个文件包含了实现交互性和动态效果的代码,如拖放...
通过深入理解和学习这个“自定制主机jQuery滑块”特效,开发者可以提升其前端技能,掌握如何创建具有专业水准的网页滑块,同时也可以借鉴其中的设计思路,将其应用到自己的项目中,提升用户体验。
2. **扩展jQuery**:然后,使用`.fn`(即`jQuery.fn`)来扩展jQuery的原型,这样你的函数就能作为jQuery的一个方法被调用。例如: ```javascript (function($) { $.fn.myPlugin = function(options) { // 插件...
【标题】可定制高度画廊jquery插件是一个用于创建灵活且可自定义高度的图片展示画廊的jQuery插件。这种插件在网页设计中非常常见,尤其适用于那些需要展示大量图片并希望保持布局整洁、视觉效果吸引人的场景。通过...
jQuery Multiselect是由Luis Almeida开发的一个开源插件,它基于jQuery库,可以将传统的多选`<select>`元素转换为一个可定制、交互性强的多选下拉框。通过这个插件,你可以轻松地实现分组、搜索、排序等高级功能,...
通过阅读代码和官方文档,了解其架构和API,结合示例进行实践,逐渐掌握如何在自己的项目中集成和定制jQuery Desktop。 总之,jQuery Desktop是一个创新的前端解决方案,它利用JavaScript和jQuery的力量,为Web应用...
jQuery UI 是一个扩展了 jQuery 功能的开源库,提供了一系列可定制的用户界面组件,如对话框(Dialog)、日历(Datepicker)、拖放(Draggable)和排序(Sortable)。它还包括主题生成器,允许开发者自定义外观,以...
1. `jquery-ui.css` 和 `jquery-ui-1.7.2.custom.css`:这是jQuery UI库的样式文件,jQuery UI是一个扩展了jQuery功能的库,提供了许多可交互的UI组件,包括可定制的多选框。这里可能包含自定义的多选框样式。 2. `...
它依赖于jQuery,提供了丰富的样式和定制选项。 3. **消息框(Message Box)**:消息框是一种常见的用户界面元素,用于向用户显示信息、警告、确认或询问。jQuery UI Messager允许开发者自定义消息框的样式、内容和...
cal.js可能是一个定制的日期时间选择器,包含了与jQuery时间控件相关的逻辑和样式。 在实际应用中,使用jQuery时间控件通常涉及到以下几个步骤: 1. 引入jQuery库和时间控件插件:首先,你需要在HTML页面中引入...
jQuery Alert插件则提供了一种更加灵活和可定制的方式来创建提示框。它允许开发者自定义提示框的外观、内容、按钮布局等,增强了用户体验。通过使用jQuery的DOM操作和事件处理功能,我们可以轻松地调用这些自定义...
jquery.goup.js的优点在于简洁易用,兼容性好,但缺点可能在于功能相对简单,对于有特殊需求的项目,可能需要额外的定制工作。 总结,jquery.goup.js作为一款实用的jQuery插件,以其简洁的代码、灵活的配置和良好的...
`jquery-confirm.js`是一个功能丰富的提示框插件,它替代了浏览器原生的确认对话框,提供了更美观且可定制化的提示方式。这个插件通常用于在用户进行删除、确认操作或其他重要决策时显示警告或确认消息。通过使用`...
总结起来,"jquery时间控件时分秒"是基于jQuery的Timepicker插件,它提供了一个方便的、可定制的时间选择界面,使得用户能够轻松地输入或选择时间。通过理解和掌握这个插件的使用,开发者可以为自己的网站或应用增添...
要开始使用jQuery UI,你需要熟悉jQuery的基本语法,然后可以查阅官方文档了解各个组件的API和示例。在实际项目中,可以通过引入所需的组件,减少不必要的文件加载,优化页面性能。 总之,jQuery UI是前端开发中的...