jquery svg封装

基于svg.js实现对图形的拖拽、选择和编辑操作

本文主要记录如何使用 svg.js 实现对图形的拖拽,选择,图像渲染及各类形状的绘制操作. 1.关于SVG SVG 是可缩放的矢量图形,使用XML格式定义图像,可以生成对应的DOM节点,便于对单个图形进行交互操作.比CANVAS更加灵活一点.关于SVG的基础知识,请参考SVG学习地址. 2.SVG.js 今天要说的主角是 SVG.js,它是对SVG本身的一个封装库,提供各种API使对SVG的使用更加方便,相当于JQuery对于JS,它的自我介绍是轻量级,速度快,更具易读性.SVG.js官网介绍

ajax请求原理及jquery $.ajax封装全解析

.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得请求数据.要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解. XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术.简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户.达到无刷新的效果. 所

jQuery + svg/vml

流程设计器jQuery + svg/vml(Demo7 - 设计器与引擎及表单一起应用例子) 去年就完成了流程设计器及流程引擎的开发,本想着把流程设计器好好整理一下,形成一个一步一步的开发案例,结果才整理了一点点,发现写文章比写代码还累,加上有事情要忙,结果就.. 明天要去外包驻场了,现把流程设计器最终实现的效果及应用案例放到网上(Demo),欢迎大家围观,欢迎园友们提出宝贵意见. 1.流程设计器整体外观 2.流程实例名称设置 3.活动审批人设置 4.条件公式设置以上是流程设计器的实现效果

jquery简单封装

对Raphael画图标的一个jquery简单封装公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封装一下这个功能,就写了一个简单的插件:jquery-pointpainter.js /** * @author Lee<br> * @since 2013-8-19 <br> */ (function($, Raphael) { $.fn.pointpainter = function

jQuery框架-3.jQuery自定义封装插件和第三方插件

一.jQuery的封装扩展 1.jQuery中extend方法使用 (挂在到jQuery和jQuery.fn两对象身上的使用) 1.1.官方文档定义: jQuery.extend Merge the contents of two or more objects together into the first object.把两个或者多个对象合并到第一个对象当中: jQuery.fn.extend Merge the contents of an object onto the jQue

***使用jQuery去封装插件（组件化、模块化的思想），即扩展方法

如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){} ②使用:$.方法(有参数的带参数,没有的为空),实例如下: $.log =function() { console.log(new Date()); } $.log(); //调用完$.log()就可以直接获得系统时间 2.扩展一个普通的jQuery实例对象的方法:①$.fn.方法 = function(参数/空){}

jQuery的封装

封装,最简单的效果就是一个效果你可以重复的去调用本来前端之路时间不是很长,但是对封装还是有一点点自己个人的理解,曾经踩过的坑也不在少数,最后总结出我个人风格的封装,听一位大神指点过,每个人都有属于自己思路的封装,每个人都有自己的思路,别的的思路可以借鉴,但是不能重用,因为那不是你自己的,要走出自己的路线来,最后不才,还是走出了自己的一点点的小路线. 现在上班有空闲的时候我经常会去网上看看别人的封装,感觉每个人的路大多数都不一样,接下去就说说我自己的路线吧!我还是个菜鸟,希望大神勿喷! 第一

jQuery插件封装系列（一）—— 金额录入框

基于jQuery原型封装数值录入框,禁止录入.粘贴非数值字符 (function ($) { // 数值输入框 $.fn.numbox = function (options) { var type = (typeof options); if (type == 'object') { if (options.width) this.width(options.width); if (options.height) this.height(options.height); this.bind("

下拉菜单的jquery组件封装

首先晒出封装好的dropdown.js (function($){ 'use strict';//使用严格模式 //构造函数形式 function Dropdown(elem,options){ //保存到this中才能公用 this.elem=elem; this.options=options; this.timer=null; this.list=this.elem.find(".dropdown-list");//下拉列表是需要动画的部分 this.activeClass=op

对Raphael画图标的一个jquery简单封装

公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封装一下这个功能,就写了一个简单的插件:jquery-pointpainter.js /** * @author Lee<br> * @since 2013-8-19 <br> */ (function($, Raphael) { $.fn.pointpainter = function(options, params) { if (

Ajax_04之jQuery中封装的Ajax函数

1.PHP中json_encode编码规则: PHP索引数组编码为JSON:[...] PHP关联数组编码为JSON:{...}2.jQuery中AJAX封装函数之load: ①使用:$('选择器').load(url,[data],[fn]); $('选择器').load(url); ②含义作用:创建XHR对象,向指定的URL发起异步请求,请求参数为data,如果响应成功,自动调用指定回调函数fn,将响应主体数据(必须是HTML片段),替换为当前选定元素的innerHTML,已有内容会被覆盖

原生js实现jquery库中部分事件的功能（jquery库封装二）

继续昨天的封装,今天的部分继昨天选择器之后实现了css样式的获取和添加,attr的获取和添加和一部分事件的封装:只是我自己的理解,不妥之处欢迎大家在评论中提出,相互学习,共同提高 /** * Created by Jason on 2016/12/31. */ //jquery 的构造函数 function Jquery(arg){ //用来存选出来的元素 this.elemenets=[]; switch(typeof arg){ case 'function' : domReady(arg)

原生js实现jquery库中选择器的功能（jquery库封装一）

今天是2017.1.1,新的一天,新的一年,新的一年里继续夯实基础知识,在工作中多些项目,多思考,多总结,前端是不断更新,在更新的过程中也是发现乐趣和挑战自我的过程,希望年轻的我和年轻的javascript在2017年中一同成长今天又一次封装了一个盒jquery使用方法相同的库,每次写都有新的想法,我想着也是码农的乐趣之一吧, 今天代码只实现了jquery中部分常用选择器的功能,以后部分会继续更新其余部分,所有代码的注释已经写到行间的注释了,这仅仅是我自己的理解,不妥之处希望大家评论到下面,共

模拟jQuery简单封装ajax

/*模拟jQuery的写法 (简单写法)*/ var $={}; /*ajax*/ $.ajax = function (options) { /* * 请求 * 1.请求接口 type get post 默认的是get 决定是否设置请求头 * 2.接口地址 url 不确定字符串如果用户没有传默认的接口地址为当前路径 * 3.是否是异步 async 默认的就是异步 true;false 是同步请求 * 4.提交数据 data 默认的是对象 {name:'XXX',age:'19'} 默认是

jquery插件封装思路整理

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>写插件的栗子</title> </head> <body> <img " alt="神探驾到"> <img "> <img "> </body

(jQuery 插件)封装容器的表单为json对象

下面代码可以把一个页面容器中的表单元素封装成一个json对象. (function($){ $.fn.serializeObject=function(){ var inputs=$(this).find("input,textarea,select"); var o = {}; $.each(inputs,function(i,n){ switch(n.nodeName.toUpperCase()){ case "INPUT": if($(n).is("

jQuery Ajax封装（附带加载提示和请求结果提示模版）

1.创建HTML文件(demo) <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>jQuery Ajax</title> <script type="text/javascript" src="jquery-3.2.0.min.js"></sc

jquery插件封装

HTML <!DOCTYPE html> <html> <head> <title></title> <style> .pageInit { padding: 5px 10px; border: 1px solid #ff9600; text-decoration: none; color: #ff6500; margin-left: 10px; } .pageSelected { padding: 5px 10px; border:

最简单的原生js和jquery插件封装

最近在开发过程中用别人的插件有问题,所以研究了一下,怎么封装自己的插件. 如果是制作jquery插件的话.就将下面的extend方法换成 $.extend 方法,其他都一样. 总结一下实现原理: 将方法体封装在一个自执行的函数体里面,防止变量污染. 默认参数在options设置,extend方法有由for-in遍历得到,使得参数为用户制定参数.this.init是项目初始化,init,extend,event方法都是在demo对象的原型链上面的方法,方便调用.将自己的方法直接卸载event方法

【jQuery】jquery插件封装

扩展jQuery插件开发的基本知识,最佳做法和常见的陷阱. 入门编写一个jQuery插件开始于给jQuery.fn加入新的功能属性,此处添加的对象属性的名称就是你插件的名称: jQuery.fn.myPlugin = function(){ //你自己的插件代码 }; 用户非常喜欢的$符号哪里去了? 它仍然存在,但是,为了避免和其他(function ($) { $.fn.myPlugin = function () { //你自己的插件代码 }; })(jQuery); 在这个封闭程

第208天：jQuery框架封装（一）

一.事件框架 1.DOM2 --事件流事件流 :冒泡捕获 1.1冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象或者body)的顺序触发. 1.1.1浏览器兼容问题处理如何去判断一个浏览器是否支持某个功能其实就是判断对象是否拥有某个方法或者属性 if(dom.addEventListener ){ dom.addEventListener(type, fn, false); }else if(dom.attachEvent){ //如果支持 --IE // do

巴特西