JavaScript+前端开发
关注
分享
扫一扫
Soyoger
申明：个人微信公众号：AI技术研习社，公众号ID:ai2club。本博客只是用来学习，并不从事任何商业活动，其内容是自己总结或者来自互联网搜索到的，并没有过多关注版权问题，如有侵权内容，请私信我进行删除，谢谢。本博客内容主要围绕计算机领域热点技术和工作内容，不涉及版权问题，任何人可以查看、转载。
展开
-
d3.js使用svg制作图标
1. 如果你不懂svg，请参考这里：http://www.w3school.com.cn/svg/index.asp柱形图是一种最简单的可视化图标，主要有矩形、文字标签、坐标轴组成。本文为简单起见，只绘制矩形的部分，用以讲解如何使用 D3 在 SVG 画布中绘图。画布是什么前几章的处理对象都是 HTML 的文字，没有涉及图形的制作。要绘图，首要需要的是一块绘图的“画布”。HTML 5 提供两种强有...原创 2017-04-14 11:27:36 · 3217 阅读 · 0 评论 -
dojo.publish 和 dojo.subscribe
这俩个函数都与事件紧密相关.-- dojo.subscribe(/*String*/topic, /*Object|null*/context, /*String|Function*/method) 订阅一个主题-- dojo.publish(/*String*/topic, /*Array*/ args) 发布一个主题先抛开这两个函数, 现在有一个函数function topic() { ...转载 2017-05-08 17:44:32 · 672 阅读 · 0 评论 -
dojo中的dojoConfig配置
首先在页面创建dojoConfig，并引入init.js:<script> var root = location.href.slice(0, location.href.lastIndexOf('/')); dojoConfig = { parseOnLoad: true, async: true, baseURL:ro...原创 2017-05-09 12:51:06 · 931 阅读 · 0 评论 -
dojo中的AMD模式开发案例
教程里主要定义了两个方法，setText设置文本内容和restoreText重置文本内容。这两个方法通过dojo.define这个方法来定义。// In demo/myModule.js (which means this code defines// the "demo/myModule" module): define([ // The dojo/dom module is requir...原创 2017-05-09 12:54:16 · 481 阅读 · 0 评论 -
dojo中的dojo/dom-construct
首先是引用：require(["dojo/dom-construct"], function(domConstruct){ });dom-construct主要包含如下方法：1.toDom()require(["dojo/dom-construct", "dojo/dom", "dojo/on", "dojo/domReady!"],function(domConstruct, dom...原创 2017-05-09 12:56:33 · 1401 阅读 · 0 评论 -
dojo中的dojo/dom-class
使用：require(["dojo/dom-class"], function(domClass){ });包含的方法：1.contains()2.add()3.remove()4.replace()5.toggle()具体使用看官网：http://dojotoolkit.org/reference-guide/1.8/dojo/dom-class.html...原创 2017-05-09 13:05:50 · 909 阅读 · 0 评论 -
dojo中的dojo/dom-style
作用：DOM节点获取或设置样式。用法：// Dojo 1.7+ (AMD)require(["dojo/dom-style"], function(domStyle){ domStyle.get(node, style); domStyle.set(node, style, value);});// Dojo < 1.7dojo.style(node, style, val...原创 2017-05-09 13:09:57 · 1278 阅读 · 0 评论 -
dojo中的dojo/dom-attr
方法的函数签名为：require(["dojo/dom-attr"], function(domAttr){ result = domAttr.set("myNode", "someAttr", "value");}); “someAttr”代表特性名称，但有时候也可以是一些特殊的属性名，如：‘textContent’： 可以看到上图中使用attr设置innerText只会在html...原创 2017-05-09 13:17:04 · 667 阅读 · 0 评论 -
dojo中的this.own()
最近在看以前的项目中代码的时候突然在构造函数中发现了一个很有意思的片段this.own()；不是很明白这是干什么的（因为那个部分不是我写的）；所以果断搜索，在Stack Overflow找到了很详细的解释：own函数是定义在dijit/Destroyable模型中的，这个模型是dijit/_WidgetBase的父类（姑且按照OOP的方式来），因此绝大多数的widget都实现了这个类。再来看看官网...转载 2017-05-09 15:15:23 · 743 阅读 · 0 评论 -
dojo中的dojo/on
在元素上绑定events，需要引用包dojo/on，通过on方法来实现。<button id="myButton">Click me!</button><div id="myDiv">Hover over me!</div>require(["dojo/on","dojo/dom", "dojo/dom-st原创 2017-05-10 16:51:20 · 2235 阅读 · 0 评论 -
dojo使用query dojo/query
要使用query，就要引入dojo/query包。query可以根据Dom里节点的标签名、id名、class名来检索一个或多个节点。--------------------------------------------------------------------------------------------<ul id="list"> <li class="odd"...转载 2017-05-17 09:47:38 · 1862 阅读 · 0 评论 -
dojo 的DOM操作 dojo/dom
对dom的使用，需要引用包dojo/dom。1.获取节点，dom.byIdbyId中既可以传递一个字符串，也可以传递一个节点对象require(["dojo/dom", "dojo/domReady!"],function(dom) { function setText(node, text){ node = dom.byId(node);//通过已有对象 ...原创 2017-05-17 09:55:40 · 935 阅读 · 0 评论 -
dojo解决这个问题Tried to register widget with id=="myid" but that id is already registered
在dojo中，除了沿用Dom结点， dojo 还自定义了一类结点用“dojoType" 进行标识。dojo 称这些结点为widget。 当检测到HTMl文档中某个标签定义了dojoType 属性之后，dojo会调用dojo包中相应的 js 及 css 文件对这个结点进行渲染。 从而这个结点元素就会相应地显示出具有dojo特色的样式及功能。如此说来， dom.byId 跟 dojo.byId...原创 2017-05-04 10:19:06 · 4292 阅读 · 1 评论 -
AngularJS快速上手
各个 angular.js 版本下载： https://github.com/angular/angular.js/releasesAngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.j...原创 2017-08-30 13:43:02 · 477 阅读 · 0 评论 -
AngularJS快速入门简介
AngularJS[1] 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。它可通过 <sc...原创 2017-08-30 13:38:22 · 618 阅读 · 0 评论 -
d3.js选择、插入、删除元素
我们还可以根据dom属性id class进行元素选择。var p2 = body.select("#myid");p2.style("color","red");var p = body.selectAll(".myclass");p.style("color","red");插入元素插入元素涉及的函数有两个：append()：在选择集末尾插入元素insert()：在选择集前面插入原创 2017-04-14 10:45:33 · 1713 阅读 · 0 评论 -
d3.js中选择元素和绑定数据
回顾一下如何选择元素在 D3 中，用于选择元素的函数有两个：d3.select()：是选择所有指定元素的第一个d3.selectAll()：是选择指定元素的全部这两个函数返回的结果称为选择集。如何绑定数据D3 有一个很独特的功能：能将数据绑定到 DOM 上，也就是绑定到文档上。这么说可能不好理解，例如网页中有段落元素 p 和一个整数 5，于是可以将整数 5 与 p 绑定到一起。绑定之后，当需要依靠...原创 2017-04-14 10:42:35 · 716 阅读 · 0 评论 -
d3.js中的选择元素
在 D3 中，用于选择元素的函数有两个：d3.select()：是选择所有指定元素的第一个d3.selectAll()：是选择指定元素的全部这两个函数返回的结果称为选择集。怎么使用这2个函数呢？看代码：var body = d3.select("body"); //选择文档中的body元素var p1 = body.select("p"); //选择body中的第一个p元素var p...原创 2017-04-14 09:38:29 · 1753 阅读 · 0 评论 -
d3.js 简介和安装
最近一直在做大数据可视化方面的事，想着，把目前比较流行的可视化开源项目也学习一下，于是，打算花点时间写几个d3的例子，也算是一个入门级的学习，废话不多说，首先介绍一下d3，后面我们直接看例子。D3 是什么D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数...原创 2017-04-13 18:39:16 · 5827 阅读 · 0 评论 -
JsonPath的使用
语法：JsonPath描述$根节点@当前节点.or[]子节点..选择所有符合条件的节点*所有节点[]迭代器标示，如数组下标[,]支持迭代器中做多选[start:end:step]数组切片运算符?()支持过滤操作()支持表达式计算 需要的jar包：commons-lang-2.6.jarjson-path-0.8.1.jarjson-smart-1.1.1.jar对于如下的json，通过实例介绍...转载 2017-06-02 08:48:27 · 1791 阅读 · 0 评论 -
JSON学习笔记（六）- JSONP
JSONP 教程本章节我们将向大家介绍 JSONP 的知识。Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用...原创 2017-05-17 09:31:32 · 750 阅读 · 0 评论 -
JSON学习笔记（五）- JSON.stringify()
JSON.stringify()JSON 通常用于与服务端交换数据。在向服务器发送数据时一般是字符串。我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。语法JSON.stringify(value[, replacer[, space]])参数说明：value:必需， 一个有效的 JSON 字符串。replacer:可选。用于转换结果的函数或数组。如果...原创 2017-05-17 09:20:57 · 846 阅读 · 0 评论 -
JSON学习笔记（四）- JSON.parse()
JSON.parse()JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。语法JSON.parse(text[, reviver])参数说明：text:必需， 一个有效的 JSON 字符串。reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。JSON 解析实例例如我们从服...原创 2017-05-17 09:16:45 · 722 阅读 · 0 评论 -
JSON学习笔记（三）- 数组
JSON 数组数组作为 JSON 对象实例[ "Google","Runoob","Taobao"]JSON 数组在中括号中书写。JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。JSON 对象...原创 2017-05-17 09:15:05 · 589 阅读 · 0 评论 -
JSON学习笔记（二）- 对象
JSON 对象对象语法实例{ "name":"runoob","alexa":10000,"site":null}JSON 对象使用在大括号({})中书写。对象可以包含多个 key/value（键/值）对。key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。key 和 value 中使用冒号(:)分割。每个 key/value...原创 2017-05-17 09:12:26 · 400 阅读 · 0 评论 -
JSON学习笔记（一）- 语法
JSON 语法JSON 语法是 JavaScript 语法的子集。JSON 语法规则JSON 语法是 JavaScript 对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组JSON 名称/值对JSON 数据的书写格式是：名称/值对。名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值："name" :"菜鸟教程"这很容易理解，等价于这条 JavaScri...原创 2017-05-17 09:10:19 · 554 阅读 · 0 评论 -
dojo中的dojo/text!
Usage require supplying the resource URL to load after the !. This URL can be expressed in relative terms andwill assume a root of the Dojo base by default:require(["dojo/text!something.html"], functi...原创 2017-05-23 15:32:45 · 1777 阅读 · 0 评论 -
jquery checked 操作多选
$( function() { //全选 $("#selectAll").click( function() { $("input[name='send-mail']").each( function() { $(this).attr("checked", true); }); ...原创 2017-05-10 17:58:26 · 631 阅读 · 0 评论 -
在JS 中使用 fetch 初体验
在前端快速发展地过程中，为了契合更好的设计模式，产生了 fetch 框架，此文将简要介绍下 fetch 的基本使用。在 AJAX 时代，进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生，虽然在目前会有一点浏览器兼容的问题，但是当我们进行 Hybrid App 开发的时候转载 2017-08-28 09:14:41 · 8310 阅读 · 0 评论 -
promise中调用ajax
Promise是异步里面的一种解决方案，解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法，提供了`promise`对象， promise对象有三种状态:pending(进行中) 、Resolved(已经完成)和Rejected(已失败)ES6规定，Promise对象是一个构造函数，用来生成Promise实例。1234567原创 2017-08-25 15:03:24 · 3194 阅读 · 0 评论 -
理解Promise规范
术语Promisepromise 是一个拥有 then 方法的对象或函数，其行为符合本规范；thenable是一个定义了 then 方法的对象或函数，文中译作“拥有 then 方法”；值（value）指任何 JavaScript 的合法值（包括 undefined , thenable 和 promise）；异常（exception）是使用 throw 语句转载 2017-08-25 14:49:26 · 795 阅读 · 0 评论 -
javaScript中Promise详解
ES2015正式发布（也就是ES6，ES6是它的乳名），其中Promise被列为正式规范。作为ES6中最重要的特性之一，我们有必要掌握并理解透彻。本文将由浅到深，讲解Promise的基本概念与使用方法。ES6 Promise 先拉出来遛遛复杂的概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么玩意呢？是一个类？对象？数组？函数？转载 2017-08-25 14:45:11 · 1617 阅读 · 0 评论 -
使用setInterval对ajax请求做轮询
为什么setInterval 只执行了一次？？代码如下 $(function () { var test = { deg: function (type) { alert(type); } } setInterval(test.deg(1原创 2017-08-16 11:01:00 · 8731 阅读 · 0 评论 -
define，require的基本用法
id：指定义中模块的名字，可选；如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。依赖dependencies：是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。依赖参数是可选的，如果忽略此参数，它应该默认为["require", "exports", "module"]。然而，如果工厂方法的长转载 2017-07-19 12:03:09 · 4292 阅读 · 0 评论 -
artTemplate的使用总结
原生语法使用原生语法，需要导入template-native.js文件。在HTML中定义模板，注意模板的位置，不要放到被渲染区域，防止模板丢失。 " data-imgname=""> 2015-02-09原创 2017-06-18 20:33:10 · 1078 阅读 · 0 评论 -
简单易用的baidutemplate模板的使用
按照官网（http://baidufe.github.io/BaiduTemplate/）的说法，baidutemplate介绍如下：A、baiduTemplate 简介0、baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎注：等不及可以直接点左侧导航中的”C、使用举例“，demo即刻试用。1、应用场景：前端使用的模板系统 或 后端Javascri原创 2017-04-19 09:24:19 · 3581 阅读 · 0 评论 -
javascript 模板引擎基本原理
本文实属转载，在云南昆明盘龙区北京路1079号，咖啡店，我们项目组四个人在这里周末加班。20170618 原文地址：http://www.cnblogs.com/hustskyking/p/principle-of-javascript-template.html一、前言什么是模板引擎，说的简单点，就是一个字符串中有几个变量待定。比如：var tpl =转载 2017-06-18 15:25:01 · 544 阅读 · 0 评论 -
JS模块化工具requirejs教程
RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。requirejs能带来什么好处官方对requirejs的描述：RequireJS is a JavaScript file and modu原创 2017-06-18 14:58:36 · 576 阅读 · 0 评论 -
window.open()打开窗口的几种方式
1. 在当前窗口打开百度,并且使URL地址出现在搜索栏中.window.open("http://www.baidu.com/", "_search");window.open("http://www.baidu.com/", "_self"); 2. 在一个新的窗口打开百度window.open("http://www.baidu.com/", "_blank");原创 2017-05-17 14:21:35 · 2655 阅读 · 0 评论 -
fetch获取解析json数据
因为在 Request 和 Response 中都包含 Body 的实现，所以包含以下类型：ArrayBufferArrayBufferView (Uint8Array and friends)Blob/FilestringURLSearchParamsFormData在 fetch 中实现了对应的方法，并返回的都是 Promise 类型。那如何获取到我们的json数据呢?原创 2017-08-28 09:18:20 · 13322 阅读 · 0 评论