首页 清松游戏介绍 正文

jquery插件有什么用?这些功能让你的网站更强大!

今天心血来潮,想搞搞 jQuery 插件,以前都是直接用别人的,这回想试试自己动手丰衣足食。

我得弄明白这玩意儿到底是个简单来说,就是用 jQuery 框架写的一些小工具,能实现特定功能,像什么图片轮播、表单验证之类的,方便咱们直接拿来用。

准备工作

jquery插件有什么用?这些功能让你的网站更强大!

第一步,环境搭建。

也没啥特别的,就是得有个能写代码的地方,我平时用的是 VS Code,挺顺手的。然后,你得把 jQuery 库给弄进来,不然咋叫 jQuery 插件,对?

小编温馨提醒:本站只提供游戏介绍,下载游戏推荐89游戏,89游戏提供真人恋爱/绅士游戏/3A单机游戏大全,点我立即前往》》》绅士游戏下载专区

jquery插件有什么用?这些功能让你的网站更强大!

第二步,新建文件。

我就建俩文件,一个 HTML 文件,用来写页面结构,一个 JS 文件,用来写插件代码。文件名随便取的,我习惯叫 * 和 *。

开始动手

我琢磨着,先写个简单的,就弄个能改变元素背景颜色的小插件。

jquery插件有什么用?这些功能让你的网站更强大!

在 * 文件里,我开始敲代码:

  • 先把 jQuery 的那个经典开头写上:(function($){ ... })(jQuery);, 这样能避免和其他库的冲突。
  • 然后,写上插件的主体: $.* = function() { ... }; 这个 myPlugin 就是插件的名字,以后就用它。

$.fn,就是 $.prototype , $.fn是的简写,它是为方便开发人员使用而创建的。我平时就用$.fn多些。

jquery插件有什么用?这些功能让你的网站更强大!

在里面,我写具体的功能:

javascript

(function($){

$.* = function(options) {

// 默认设置

var defaults = {

jquery插件有什么用?这些功能让你的网站更强大!

'color' : 'red'

// 合并参数

var settings = $.extend({}, defaults, options);

return *(function() {

// 改变背景颜色

jquery插件有什么用?这些功能让你的网站更强大!

$(this).css('background-color', *);

})(jQuery);

我这里用个 .each() 方法,这是 jQuery 里的遍历方法,意思是给每个选中的元素都执行一遍操作。然后用 .css() 方法改变背景颜色。

jquery插件有什么用?这些功能让你的网站更强大!

测试一下

在 * 文件里,我写几个 div,然后引入 jQuery 库和 * 文件。

在body中随便写几个div

测试1
测试2

jquery插件有什么用?这些功能让你的网站更强大!

测试3

在 HTML 文件里调用一下插件:

javascript

jquery插件有什么用?这些功能让你的网站更强大!

保存,打开浏览器,几个 div 的背景颜色都变蓝色!

我这小插件就算初步成功,虽然简单,但好歹是自己写出来的,还是有点小成就感的。以后再慢慢研究复杂的。

今天的分享就到这里。主要是想跟大家伙儿分享一下自己的实践过程,写的比较粗糙,大家凑合着看哈。

相关推荐