#你不知道的Javascript

javascript动画系列第二篇——磁性吸附

  上一篇,我们介绍了元素拖拽的实现。但在实际应用中,常常需要为拖拽的元素限定范围。而通过限定范围,再增加一些辅助的措施,就可以实现磁性吸附的效果 范围限定  如果我们限定元素只可以在可视范围内移动,那么就需要对其进行范围限定  首先,先要搞清楚是可视区域限定被拖拽元素  左侧范围L0=0  右侧范围R0=d...

javascript动画系列第一篇——模拟拖拽

  从本文开始,介绍javascript动画系列。javascript本身是具有原生拖放功能的,但是由于兼容性问题,以及功能实现的方式,用的不是很广泛。javascript动画广泛使用的还是模拟拖拽。本文将详细介绍该内容 原理介绍  模拟拖拽最终效果和在桌面上移动文件夹的效果类似  鼠标按下时,拖拽开始。鼠标...

深入理解javascript原生拖放

  拖放(drag-and-drop,DnD)其实是两个动作——拖和放。所以,它涉及到两个元素。一个是被拖的元素,称为拖放源;另一个是要放的目标,称为拖放目标。本文将通过拆分这两个概念来详细介绍原生拖放 拖放源  什么样的元素才是拖放源呢?  HTML5为所有HTML元素规定了一个dr...

深入理解javascript中的富文本编辑

  一说起富文本,人们第一印象就是像使用word一样,在网页上操作文档。实际上差不多就是这样。富文本编辑,又称为WYSIWYG(WhatYouSeeIsWhatYouGet所见即所得),指在网页中编辑富文本内容。本文将详细介绍如何通过javascript实现富文本编辑 方式  有两种编辑富文本的方式,一种是使...

深入理解javascript中的焦点管理

  焦点作为javascript中的一个重要功能,基本上和页面交互都离不开焦点。但却少有人对焦点管理系统地做总结归纳。本文就javascript中的焦点管理作详细介绍 焦点元素  到底哪些元素可以获得焦点呢?默认情况下,只有表单元素可以获得焦点。因为只有表单元素可以交互<inputtype="text"...

使用r.js来打包模块化的javascript文件

  r.js(下载)是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小、减少对服务器的文件请求。本文将详细介绍r.js 简单打包【项目结构】  以一个简单的例子来说明r.js的使用。该项目名称为'de...

使用javascript生成当前博文地址的二维码图片

  在电脑端发现一篇好的博文,想在手机上访问。这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便。如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手机扫一扫,来进行博文的访问,就相对方便很多。  通过搜索引擎搜索了一些生成二维码的文章,发现其并不是一件容易的事。同时,也发现...

实现javascript下的模块组织

  java有类文件、Python有import关键词、Ruby有require关键词、C#有using关键词、PHP有include和require、CSS有@import关键词,但是对ES5版本的javascript来说,javascript通过script标签引入代码的方式显得杂乱无章,语言自身毫无组织和约束能力...

深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

  一说起动态集合,多数人可能都有所了解。但是,如果再深入些,有哪些动态集合,以及这些动态集合有什么表现、区别和联系?可能好多人就要摇头了。本文就javascript中的动态集合做详细介绍 NodeList  NodeList实例对象是一个类数组对象,它的成员是节点对象,包括childNodes和queryS...

深入理解javascript描述元素内容的5个属性

<p>Thisisa<i>simple</i>document</p>  上面这行代码中,<p>元素的内容是什么呢?答案一:内容是HTML字符串"Thisisa<i>simple</i>document";答案二:内容是纯文本字符串"T...

深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法

  尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展。人们对jQuery的称赞,很多是由于jQuery方便的元素选择器。除了前面已经介绍过的getElementsByClassName()方法外,DOM拓展了querySelectorAll()...

深入理解javascript选择器API系列第二篇——getElementsByClassName

  既然有getElementById()和getElementsByTagName()方法,为什么没有getElementsByClassName()呢?id属性、标签名、class属性并没有什么优劣之分啊。终于,HTML5新增了getElementsByClassName()方法,由于在CSS布局中类名的广泛使用,...

深入理解javascript选择器API系列第一篇——4种元素选择器

  说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用了。DOM定义了许多方式来选取元素,包括getElementById()、getElementsByTagName()、getElementsByName()和document.all4种。接下来,将对这4种方法进行详细介绍 getEleme...

理解javascript中的对话框

  通常我们调试程序时,如果需要阻塞效果,则要用到alert()。但除了alert()以外,window对象还提供了其他3种对话框。本文将详细介绍window对象中的对话框 定义  系统对话框与在浏览器中显示的网页没有关系,也不包含HTML。它们的外观由操作系统及浏览器设置决定,而不是由CSS决定。windo...

理解javascript中的浏览器窗口——窗口基本操作

  BOM全称browerobjectmodel(浏览器对象模型),用于管理窗口及窗口间的通讯,其核心对象是window。称其为窗口,可能并不准确。因为,有的浏览器窗口可能包含多个标签页,每个标签页都有自己的window对象。本文将详细该内容 窗口位置【1】获取  浏览器(firefox不支持)提供了scre...
首页上一页...6465666768...下一页尾页