对jq插件的理解和认识

2024-10-19

深入理解jQuery插件开发总结（一）

由于这篇文章比较长,所以分了四个阶段讲,从简单的入门级到最后到综合级,有些列子和图片都是转载其他博主的,希望对想写插件对同学会有帮助.这里分享个好久之前写的一个jquery插件(网站的功能引导插件,思路应该有些落伍了,仅供参考): https://github.com/BothEyes1993/pageWalk (入门级) 一.插件的几种写法首先,在具体说明编写插件之前,我们先假定一个使用场景:有一个HTML页面,页面上放置了一个5行3列的表格. <table id="newTable&

JQ插件之imgAreaSelect实现对图片的在线截图功能（java版）

前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下: 一.flash用户上传头像组件 ,地址: http://www.hdfu.net/index.html (但收费) 二.jq插件imgAreaSelect, 地址:http://odyniec.net/projects/imgareaselect/ 注:官网文档为英文的,如果想看中文的这里也有,h

插件的理解$.extend()与$.fn.extend()

插件的理解.$.extend()与$.fn.extend() 插件开发包括两种:1.类级别的插件开发,即$.extend()扩展jquery对象本身:2.对象级别的插件开发,即$.fn.extend()扩展jquery元素集来提供新的方法. 1.类级别的插件开发 1.(function($){ $.extend({ hello:function(){alert("hello world");}

jq插件处女座图片轮播

好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说上代码 (function($) { $.fn.carousel = function(options) { )return false; var opts = $.extend({},$.fn.carousel.defaults,options); function Slide(o){ this.o = o; this.box = o.fin

jq插件第二款来袭图片滚动

这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认为1张,另外提供了连个外接方法, 停止自动滚动$.fn.roll.stop,继续自动滚动$.fn.roll.auto,不多说,上菜! JQ插件代码 (function($){ $.fn.roll = function(options){ if($(this).length == 0) return

个人学习JQ插件编写成果：little酷炫的图片滑动切换效果

工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/detail/gpowdhhk 快要下班了~先把代码放出来~~回家再编辑~ 这里是HTML代码:  <div class="beauty-go-outer" id="my-div"> <u

一个简单而实用的JQ插件——lazyload.js图片延迟加载插件

前言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazyload看名字直译大概就知道意思了: 懒加载,就是懒得加载,你不看到那,它不会给你加载出来的.也就是延迟加载的功能.使用它你可以提高网页加载速度,进而来说一定情况下也能减轻服务器负载下面就来说一下怎么去使用这个朴素而实在的插件要想使用JQ插件,首先要引用jquery.js和lazyload.j

写一个简单的JQ插件(例子)

虽然现在 vue angular react 当道啊但是那 JQ还是有一席之地很多很多的小单位啊.其实还会用到我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信我这个还是蛮实用的话不多说丢代码 JQ插件标准的封装代码如下,首先需要闭包: <scripttype="text/javascript"> (function ($) { //这里放入插件代码 })(jQuery); </script> 这是jQuery官方的插件开发规范,这样写

创建jq插件步骤

无意看了这篇<jQuery插件开发精品教程,让你的jQuery提升一个台阶>文章,现在做一下总结. 一.jQuery插件的创建可以有三种方法 1.通过$.extend()来扩展jQuery 2.通过$.fn 向jQuery添加新的方法 3.通过$.widget()应用jQuery UI的部件工厂方式创建方法1太简单,创建后通过$.myfunction()方式调用,不能对指定元素调用. 方法3相对于方法2太复杂. 方法2就是常用的创建jq插件的方法.可以对指定元素进行操作.例如$('#titl

jq插件和jq

封装一个jq (function(win) { var jQuery = function(selecter) { this.version = '1.0.1'; //版本号 this.selecter = selecter; return this; }; jQuery.prototype.getElement = function() { // 当前只支持取id // 如果是class或者tag,得装在数组里 this.elem = document.getElementById(this.

单元测试地二蛋先弄个两个原生模块1个原始的一个jq插件

放羊测试测完了再测这两个瞎搞的下拉列表组建看看从单元测试模块化的角度组建会写成啥样 1:ajax请求简单文本 2:1个页面多个实例 3:复杂展示+自定义点击+自定义处理函数 4:延迟请求 5 插件封装 jq和reqjs 6:jsonp 支持(还未实现) jq /** * Created by qqloving on 14-3-24. */ (function($) { $.fn.xiala = function(ops) { var url=ops.u

jQ插件--时间线插件和拖拽API

这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接, 那个三角会滚动, 然后左侧的界面也会滚动: 实际的效果如下图,用户点击左侧的按钮或者右侧的input,滚动条都会主动滚动, 这里有个小技巧就是用after和before伪类生成三角形, 用户点击按钮的滚动效果直接用jq的animate方法: 点击查看DEMO:打开 <!-- //设置内容; window.onWebMessage( '{"ty

[fn]焦点图JQ插件版

自己写的焦点图片的插件,使用方法简单说明一下 index.html页面具体结构如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

JQ插件

什么是插件插件(plugin)是JQuery的扩展(Extension),以JQuery的核心代码为基础,是一种遵循一定规范的应用程序接口编写出来的程序. 插件的引入引入jquery.js文件引入插件的js文件引入插件的周边文件,如皮肤,语言包等插件的使用可在jqurey的官网上查看JQ的各种插件:http://plugins.jquery.com/ 在点击进入某一插件后,可看到插件的版本等信息,常用的Try a Demo(运行样式)和Read the Docs(查看使用文档) 自定

JQ插件jquery.fn.extend与jquery.extend

jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现. JavaScript代码 jQuery.fn = jQuery.prototype = { init

JQ插件ajaxFileUpload、php实现图片，数据同时上传

代码结构如下: 1.HTML代码,没必要解释了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src=&

jq插件又来了，模拟select下拉框，支持上下方向键哦

好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (function($){ //模拟下拉框 $.fn.htmlSelect = function(opt){ if($(this).length==0) return false; var opts = $.extend({ defaultsItem : 0, //默认选中的select项 saveInput

jq插件写法

如今做web开发,jQuery 几乎是必不可少的,同时jquery插件也是不断的被大家所熟知,以及运用.最近在搞这个jquery插件,发现它的牛逼之处,所以讲一讲jQuery插件的写法以及使用 (function($){ $.fn.extend({ color:function(options){ var defaults = {color:'blue', size: "30px"}; options = $.extend({},defaults, options); return

JQ插件写法扩展JQ方法

目录: 1.基本JQ扩展插件js的格式 2.对JQ选中元素的方法的扩展,调用类似于$("selector").myMethod(),这里的myMethod是自己扩展的方法,与.click()同理 3.对JQ自身的方法扩展,调用类似于$.ajax(); 一.基本JQ扩展插件的格式一个扩展插件的格式一般是: (function($){.........})(jQuery); 当然,为了防止压缩合并等操作时,它前面的js代码没有结束分号而引起错误,这里可以在前面加个;就是: ;(funct

一个神奇的jq插件----zTree

最近在公司做项目中用到了一个树(ztree)的插件,使用起来非常顺手,便写下这篇博客,用来记录一下,以便后续使用首先先放上ztree官方的地址:http://www.treejs.cn/v3/main.php#_zTreeInfo 开始之前ztree的js和css怎么引用请看这篇博客:https://blog.csdn.net/wangmx1993328/article/details/80075318,我就不再啰嗦,我下面要写的主要是ztree的一些功能 1:实现节点多选 $scope.Se

jq插件的传值

因插件方式写的少,先慢慢记录. 默认的参数值 jQuery.fn.shadow =function(options){ var defaults = { slices : 5, opacity : 0.1, zIndex : -1 }; //options中如果存在defaults中的值,则覆盖defaults中的值 var opts = jQuery.extend(defaults,options); return this.each(function(){ var $originalElem

对jq插件的理解和认识

热门专题