java前端页面插件_【Java技术】Bootstrap开发漂亮前端界面之插件开发.doc

[摘要]什么是jQuery插件？ 首先，来看看我们一般是如何使用jQuery，第一种方式：$.trim " hello world " ，直接使用jQuery中方法，第二种方式：$ "#myinput" .val ，获取页面中的元素，然后使用jQuery对象中方法。两种的区别在于，第一种方式调用方法一般不涉及DOM，而第二种方式需要先获取页面中元素，然后再进行方法调用，方法的执行围绕着DOM元素。trim、val方法都是jQuery原生提供的，其实我们也可以编写自己的方法，而我们自己写的方法一般被称为jQuery的插件。 现在我们先编写两个入门的插件: 需求一：获取字符串路径的中文件名；需求不涉及到任何的DOM，所以我们可以采用方式一模式来编写我们的插件。 $本来一个函数，在javascript中一切皆对象，所以$也是一个对象，那么向jquery对象中添加新的方法也是可以行的。 复制代码 script type "text/javascript" //jQuery对象添加自定义方法 $.getFileName function path if !path return; //使用正则表达式获取路径中的文件名部分 return / ?!.*\/ .*/.exec path+"" [0]; //调用自定义插件 var fileName $.getFileName "f:/abc/源代码教育绝密资料.txt" ; console.debug fileName ; 第一个简单插件就应经完成了，当然如果你的需求很复杂，你的代码可能会更多。 需求二:获取页面中元素的元素的名字;需求中需要先有DOM元素，然后才能获取DOM元素的名字。 首先通过$ 选择器 获取页面中元素对象，其实$ 选择器 函数的返回值返回的就是一个jQuery实例对象，JS中每个对象都有自己的原型对象，jQuery实例对象的原型对象为jQtotype或者$.fn，如果不知道”原型对象“是什么的童鞋自己百度一下，这个JS高手必备的知识。(你可以尝试执行： $.fn ;然后再去调用jquery对象的方法，你会发现都无法使用了) 复制代码 //jQuery 实例对象的原型对象添加自定义方法 $.fn.tagName function return this[0].nodeName; ; $ function //调用自定义插件 console.debug $ "#mydiv" .tagName ; ; 第二个插件的功能主要涉及到了DOM元素的访问； 右键菜单插件开发，本插件是以《Bootstrap开发漂亮前端界面之自定义右键菜单》为基础，所以右键菜单的细节，不会在本文中描述。 仔细比对插件代码与非插件代码细微的差别，其实就是把以前写死的东西使用this进行替换； $ function //调用代码 $ "#contextMenu" .contextmenu ; ; 源代码教育，专注IT教育培训