天码营

JavaScript框架jQuery入门

JQUERY入门 jQuery http://jquery.com/ 是一个快速简单的JavaScript工具库，为快速开发提供了DOM遍历、事件处理、动画、AJAX交互几个方面的工具。jQuery会改变你写JavaScript的方式。 先来看看jQuery用起来是怎样的： // 给拥有continue类的 元素设置文本为：Next Step......

jqueryjavascript Harttle 于 4月25日

jQuery社会化分享：支持微信、微博、Github

一个既美观有支持微信的社会化分享工具： harttle/social share https://github.com/harttle/social share 。 支持微信（二维码）、微博、Github、Google+、LinkedIn、Twitter、Facebook、RSS...， 支持四种大小设置。 在线Demo： http://harttle.com/social share/ http://harttle.com/social share/ 文档： https://github.com/harttle/social share https://github.com/harttle/social share 最近在 天码营 http://tianmaying.com/ 和本博客中添加社会化分享，调研和尝试了不少第三方工具。 国内最方便的应当是 jiathis http://www.jiathis.com/ ，然而并不美观。国外的工具基本都没有微信（二维码）的支持。 于是诞生了 harttle/social share https://github.com/harttle/social share 。 效果图 第三方依赖 harttle/social share https://github.com/harttle/social share 依赖于 Fontawesome http://fontawesome.io/ 和 jQuery http://jquery.com/ ， 需要先引入这两个第三方库： ...

javascriptjquery Harttle 于 1月12日

jQuery事件：bind、delegate、on的区别

最近在 AngularJS http://harttle.com/2015/05/31/angular scope initialize.html 的开发中，遇到一个神奇的事情：我们用到 livebox http://lokeshdhakar.com/projects/lightbox2/ 来预览评论列表中的图片， 然而评论列表是由Angular Resource动态载入的。不可思议的是，点击这些动态载入的图片仍然会触发lightbox的图片预览。 难道lightbox使用先进的 MutationObserver https://developer.mozilla.org/en US/docs/Web/API/MutationObserver 技术监听了DOM的变化？观察 lightbox源码 https://github.com/lokesh/lightbox2/blob/master/src/js/lightbox.js 才发现，原来只是jQuery的 .on() 方法： $('body').on('click', 'a rel^=lightbox , ...', function(event){});...

事件jqueryjavascript Harttle 于 11月25日

DOM Level 2 Event与jQuery源码：捕获与冒泡

本文中的JavaScript事件是指：在浏览器中，DOM标准提供的JavaScript事件集与接口集。 在项目开发中通常会使用类似jQuery的工具来绑定事件处理函数， 也可以设置捕获，或者中断事件流，正如这篇文章锁讨论的： jQuery事件：bind、delegate、on的行为与性能 http://harttle.com/2015/06/26/jquery event.html 。 本文来讨论 DOM标准 http://www.w3.org/TR/DOM Level 2 Events/events.html 中是如何规定这些JavaScript事件的，以及jQuery源码中DOM事件的实现方式。 JAVASCRIPT 事件 首先我们来回顾一下DOM事件的行为，事件从发生开始经历了三个阶段： 1. 捕捉阶段（capture phase）：从最上层元素，直到最下层（你点击的那个target）元素。路过的所有节点都可以捕捉到该事件。 2. 命中阶段（target phase）：如果该事件成功到达了target元素，它会进行事件处理。 3. 冒泡阶段（bubbling phase）：事件从最下层向上传递，依次触发父元素的该事件处理函数。 如何中断事件传播，以及禁止事件发生时的浏览器默认行为，参考： jQuery事件：bind、delegate、on的行为与性能 http://harttle.com/2015/06/26/jquery event.html 图片来源： http://www.w3.org/TR/DOM Level 3 Events/ dom event architecture http://www.w3.org/TR/DOM Level 3 Events/ dom event architecture DOM标准中，定义了一系列的JavaScript事件，以及事件接口。其中，DOM Level 0 Event提供了类似 onclick 的属性来支持事件， DOM Level 2 Event提供了 addEventListener , removeEventListener , dispatchEvent ，还有IE ...

jquerydomeventjavascript Harttle 于 11月22日

jQuery中$()函数的用法

jQuery http://api.jquery.com/ 想必是当前前端开发中必不可少的组件。它提供了DOM对象的封装、统一的事件机制、以及一系列的工具函数。 由于面试中突然被问及jQuery中 $() 有几种用法，瞬间有点懵并未答全。 虽说这样的问法颇似孔乙己问“茴香豆的茴有几种写法？”，但还是借此机会来整理知识，伺机学习一把！ 首先我们需要引入jQuery，如果你还没有听过jQuery，请移步其他文章或者在你的网站中引入这个： ...

javascriptdomjquery事件 Harttle 于 11月20日