jquery UI 跟随学习笔记——拖拽（Draggable）

引言这周暂时没有任务下达,所以老大给我的任务就是熟悉jquery相关插件,我就先选择了jquery UI插件,以及jquery库学习. 我用了两天的时候熟悉Interactions模块中的Draggable功能,并跟随练习,写这篇博文就是想记录下自己的心得体会. 正文:Draggable(拖拽) 1.默认配置:就是简单的一行代码:$( "#目标元素Id" ).draggable(); <title>jqeruy UI 拖拽练习--默认配置</title> &l…

Angular 学习笔记——拖拽

<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1{ width: 100px;height: 100px;backgro…

JQUERY 拖拽 draggable droppable resizable selectable sortable

今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/javascript" src="ui/jquery-1.8.2.js"></script> <script language="JavaScript" type="text/javascript" src=&quo…

UI设计学习笔记（7-12）

UI学习笔记(7)--扁平化图标认识扁平化 Flat Design 抛弃传统的渐变.阴影.高光等拟真视觉效果,打造看上去更平的界面.(颜色.形状) 扁平化图标有什么优缺点优点: 简约不简单.有新鲜感降低移动设备的硬件需求.延长待机时间开发简单缺点: 需要一定学习成本,缺乏直观传达的感情不丰富,过于冰冷扁平化的发展提出:2008,谷歌提出实现:微软,win8,彻底的扁平化风格安卓2011年,Android 4.0实现扁平化苹果2013年,IOS7开始扁平化风格分类纯平面…

jquery源码学习笔记三：jQuery工厂剖析

jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ) { var jQuery = function( selector, context ) {//首先定义一个内部jQuery.注意,此jQuery只是一个工厂内部的变量,并非我们在外面引用的那个jQuery或$ return new jQuery.fn.init( selector, cont…

网站开发常用jQuery插件总结(三）拖拽插件gridster

1.gridster插件功能实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本地测试总是出现这样那样的问题,一是无法移动,二是在磁铁的附近有一个黑点,可能是定位使用的.但是如果在网站中正常使用,应该不会出现这样的黑点.gridster插件的属性和方法在官网上有详细说明. 经过测试了一下,最后终于解决了问题.效果显示如下: 3.gridster使用方法 1.首先引用js文件 <…

锋利的jquery第二版学习笔记

jquery系统学习笔记一.初识:jquery的优势:1.轻量级(压缩后不到30KB)2.强大的选择器(支持css1.css2选择器的全部 css3的大部分以及一些独创的加入插件的话还可支持XPath)3.出色的Dom封装(简化原本复杂的操作)4.可靠的事件处理机制(跨浏览器兼容性)5.完善的Ajax操作(一个$.ajax()方法全部搞定)6.不污染顶级变量(只使用了一个名为jQuery的对象其别名$也可随时让出其控制权见解决和其它库混用时解决冲突部分)7.出色的浏览器兼容性(优秀的j…

【C#/WPF】UI控件的拖拽/拉伸

需求①:控件拖拽——按住鼠标,可自由拖拽控件. 方法:目前看到的办法有两种. 使用ZoomableCanvas:http://www.cnblogs.com/gnielee/archive/2011/03/09/wpf-zoomablecanvas.html 使用微软原生的Thumb类(名称空间System.Windows.Controls.Primitives):https://msdn.microsoft.com/en-us/library/system.windows.controls.p…

js学习笔记29----拖拽

原理:先计算鼠标与拖拽目标的左侧距离跟上面距离,再计算拖动后的位置. 示例代码: <!DOCTYPE html> <html lang="en"> <head> <title>拖拽原理</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init…

ios UI自动化测试学习笔记

一.一些注意事项: 1.做自动化测试时注意如果是真机话首先要设置不锁屏. 2.自动化测试过程中如果程序后台或崩溃了.脚本运行将会暂停,直到程序再次回到前台. 3.必须明确指定关闭自动测试,测试完成或中断都不会自动关闭测试. 4.测试也是根据视图树的元素位置获取元素进行测试,根视图元素是UIATarget. 二.部分功能说明: 1.获取当前程序(在激活状态): UIATarget.localTarget().frontMostApp(); 2.获取目标程序的主Window: UIATarget.l…

Jquery伪选择器学习笔记

对于我这个半路出家的前端,使用jquery已经很长时间了,对于选择器,一直都局限在id,class,element选择器.每次写一个元素都得想一个id,一个页面写下来想id名都想的累的慌.最近手头项目比较多,头晕脑胀的,遂决定每天下班回去还是得学学jquery的其它强大选择器,边学边做点笔记吧. 一.伪选择器 :first / :last 匹配找到的第一个/最后一个子元素 :first-child / :last-child 匹配第一个/最后一个元素笔记:这两组是最先让我分不清的.看着解释好像…

菜鸟的jQuery源码学习笔记（二）

jQuery对象是使用构造函数和原型模式相结合的方式创建的.现在来看看jQuery的原型对象jQuery.prototype: jQuery.fn = jQuery.prototype = { //成员变量和方法 } 这里给原型对象起了一个别名叫做jQuery.fn.要注意的是这个jQuery.fn可不是jQuery对象的属性,而是jQuery构造方法本身的属性,它是不会传给它所创建的对象的.如果你在控制台敲$().fn的话输出的结果会是undefined.接下来看看原型对象里面有些什么: jq…

菜鸟的jQuery源码学习笔记（前言）

前言相信任何一名前端开发人员或者是前端爱好者都对jQuery不陌生.jQuery简单易用,功能强大,特别是拥有良好的浏览器兼容性,大大降低了前端开发的难度,使得前端开发变得“平易近人起来”.自从本人用了jQuery,顿时感觉到人生再也不是灰色的了,又能够快乐的工作了. 不过在每天码得飞起的同时,我也对jQuery充满好奇,所以也特意的去查了一下资料.现在网上和书店里面有非常多的资料对jQuery源码从各种角度进行解析,大多都是对jQuery进行总结.归纳从上往下的分析.不过本人作为一名刚毕业的…

semantic ui框架学习笔记一

面包屑导航面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class="section">主页</a> <span class="divider">/</span> <a class="section">商店</a> <span class=&q…

jQuery源码学习笔记一

学习jQuery源码,我主要是通过妙味视频上学习的.这里将所有的源码分析,还有一些自己弄懂过程中的方法及示例整理出来,供大家参考. 我用的jquery v2.0.3版本. var rootjQuery, readyList, core_strundefined = typeof undefined, location = window.location, document = window.document, docElem = document.documentElement, _jQuery…

jQuery HTML操作学习笔记

学习资料 jQuery教程获取 1.获取.设置元素的内容 1.1获取或设置目标元素的文本内容语法 $(selector).text(); 获取元素文本内容 $(selector).text(content);设置元素的文本内容 $(selector).text(fnction(index,oldContent) {}) 参数说明 index:当前选择器的索引位置 oldContent: 选择器的内容 text()用于返回一个值时,它会返回所有匹配元素的组合的文本内容(会删除 HTML 标记)…

jquery源码学习笔记二：jQuery工厂

笔记一里记录,jQuery的总体结构如下: (function( global, factory ) { //调用factory(工厂)生成jQuery实例 factory( global ); }(typeof window !== "undefined" ? window : this, function( window, noGlobal ) { //factory实现,jquery源码主体部分 })); 那么这个生成jQuery的工厂是咋样的? 酱紫的: function( w…

jquery基础知识学习笔记

jquery是一个js库/常用版本是jjquery-1.7.2.js/这个版本主要是用来做开放用途做产品的时候是用它的min版本.玩jquery的时候,不管干啥都要花钱(美元) 注意点: 1.silbings('input');除了发生事件的那个元素的其他同级input兄弟元素注意silblings要加上s 2.jquery无法获取当前时间 3.jquery对象和js对象混合操作的问题(阅读书籍解决) 4.innerHTML=html(内容); 5.is(":checke…

启动和JQuery绑定--AngularJS学习笔记（二）

上一篇简单的分析了AngularJS的项目结构,后面就开始分析具体的源代码了. 从angularFiles.js中的定义可以看出有几个文件直接位于src根目录,并不是隶属于某个模块.这几个分别是minErr.js,Angular.js,loader.js,AngularPublic.js,jqLite.js,apis.js. 这几个提供了AngularJS中很基础的工具,比如angular.equals等,在文档中它们中的部分被归属于 Global API中. 本文主要看看AngularJS的…

jQuery 1.7_20120209 学习笔记

html([val|fn]) parameters: function(index,html) 此函数返回一个html字符串,接受两个参数,index为元素在集合中的索引位置,html为原先的html值. example: $("p").html(); $("p").html("Hello <b>world</b>!"); $("p").html(function(n){ return "这个…

Jquery+Ajax+php学习笔记

昨天研究ajax,想作个登陆框,无刷新就把用户名密码提交给后台php程序,验证后发回. 几经琢磨总算出来前台代码: <script src="./javascript/jquery-latest.pack.js" type="text/javascript"></script> //导入jQuery框架文件要用jQuery必须做此步<script type="text/javascript">$(docum…

《从零开始学习jQuery》及《jQuery风暴》学习笔记

第一章 jQuery入门 1.用$()函数其实是一个事件,使用这个函数调用的方法,会在DOM加载完毕.资源文件加载完之前触发. 第二章必须知道的JavaScript知识 1.JavaScript实际上包括三部分: (1)ECMAScript 描述了该语言的语法和基本对象. (2) DOM 描述了处理网页内容的方法和接口. (3)BOM 描述了与浏览器进行交互的方法和接口. 2.ECMAScript是一种由ECMA国际(前身为欧洲计算机制造商协会)通过ECMA-262标准化的脚本程序设计语言.…

jquery.maskload.js学习笔记

概述 Loadmask是一个jquery plugin,使用此插件可以在DOM元素加载或更改内容时为此DOM元素添加一个屏蔽层,以防止用户互动,同时起到提醒用户后台任务正在运行的作用. 使用此插件可以大大提高用户体验,此插件是一个轻量级jquery plugin,只有2kb左右,非常易于使用: 主页:http://code.google.com/p/jquery-loadmask/ Download: http://code.google.com/p/jquery-loadmask/downlo…

2016年11月2日——jQuery源码学习笔记

1.jQuery()函数,即$().有四种不同的调用方式. (1)传递CSS选择器(字符串)给$()方法,返回当前文档中匹配该选择器的元素集.可选第二个参数,一个元素或jQuery对象,定义元素查询的起始点,称为上下文(context),这时返回的是该特定元素或元素集的子元素中匹配选择器的部分. (2)传递一个Element.Document或Window对象给$()方法,$()将它们封装为jQuery对象并返回,这样就可以使用jQuery方法来操作这些元素而不用使用原生DOM方法 (3)传递H…

2016年11月1日——jQuery源码学习笔记

1.instanceof运算符希望左操作数是一个对象,右操作数标识对象的类.如果左侧的对象是右侧类的实例,则表达式返回true,否则返回false 2.RegExp.exec() 如果 exec() 找到了匹配的文本,则返回一个结果数组.否则,返回 null.此数组的第 0 个元素是与正则表达式相匹配的文本,第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本(如果有的话),第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本(如果有的话),以…

菜鸟的jQuery源码学习笔记（一）

整个jQuery是一个自调用的匿名函数: (function(global, factory) { if (typeof module === "object" && typeof module.exports === "object") { module.exports = global.document ? factory(global, true) : function(w) { if (!w.document) { throw new Err…

jquery.tablesorter.js 学习笔记

jquery.tablesorter.js 一般情况下,表格数据的排序方式有两种,第一种是让后端服务将排序后的数据直接输出,另外一种方式就是使用客户端排序,而jquery.tablesorter.js可以满足此需求实现效果图如下…

菜鸟的jQuery源码学习笔记（三）

each: function(callback, args) { return jQuery.each(this, callback, args); }, each:这个调用了jQuery.each方法,来遍历当前集合.我们先来看看jQuery.each方法: //args是一个数组 each: function(obj, callback, args) { var value, i = 0, length = obj.length, isArray = isArraylike(obj); if…

element ui Angular学习笔记（一）

1.element ui安装 npm i --save element-angular 2.Angular-cli引入引入后需要开启ElModule.forRoot(),也可以单独引入某个组件入ElChildModules.ElButton 3.指令 [el-class] 如:<el-alert [el-class]="'myClass'">text</el-alert> .myClass { >div { color: #ccc; } } 在自己的@c…

semantic ui框架学习笔记三

网格系统基本网格 <div class="ui grid"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div cla…

【jquery UI 跟随学习笔记——拖拽（Draggable）】的更多相关文章