标签:JQuery

新浪微博表情插件——jQuery Sina Emotion 3.0 发布

蓝飞 蓝飞 | 时间:2018-01-12, Fri | 24,992 views
前端开发 

jQuery Sina Emotion

一个用于方便快速地创建新浪微博表情选择对话框的 jQuery 插件。

有何特点

  • 使用简单,一行代码即可创创建出表情选择对话框
  • 自带智能表情解析方法(但还是建议表情解析在服务端进行)
  • 兼容IE6+、Chrome、Firefox、Opera等各种浏览器

(阅读全文…)

新浪微博表情插件——jQuery Sina Emotion 2.0发布

蓝飞 蓝飞 | 时间:2014-01-09, Thu | 13,968 views
前端开发 

jQuery Sina Emotion

重要说明:已更新,请通过 GitHub 获取最新版本。

这是什么?

一个用来方便快速地创建新浪微博表情选择对话框的jQuery插件。

有何特点

  • 使用简单,一行代码即可创创建出表情选择对话框
  • 自带智能表情解析方法(但还是建议表情解析在服务端进行)
  • 兼容IE6+、Chrome、Firefox、Opera等各种浏览器

(阅读全文…)

[转载]jQuery最佳实践

蓝飞 蓝飞 | 时间:2013-08-24, Sat | 4,352 views
前端开发 

上周,我整理了《jQuery设计思想》

那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery"。今天的文章则是更进一步,讲解"如何用好jQuery"

我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》(jQuery Proven Performance Tips And Tricks)。他是jQuery开发团队的成员,具有一定的权威性,提出的结论都有测试数据支持,非常有价值。

(阅读全文…)

[转载]jQuery设计思想

蓝飞 蓝飞 | 时间:2013-08-23, Fri | 5,063 views
前端开发 

jQuery是目前使用最广泛的javascript函数库。

统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。

虽然jQuery上手简单,比其他库容易学会,但是要全面掌握,却不轻松。因为它涉及到网页开发的方方面面,提供的各种方法和内部变化有上千种之多。初学者常常感到,入门很方便,提高很困难。

目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的《jQuery基础》(jQuery Fundamentals)。在Google里搜索"jQuery 培训",此书排在第一位。jQuery官方团队已经同意,把此书作为官方教程的基础。

这本书虽然是入门教材,但也足足有100多页。我对它做了一个详细的笔记,试图理清jQuery的设计思想,找出学习的脉络。我的目标是全面掌握jQuery,遇到问题的时候,心里有底,基本知道使用它的哪一个功能,然后可以迅速从手册中找到具体的写法。

下面就是我的笔记,它应该是目前网上不多的jQuery中文教程之一。你只需要一点javascript语言的基本知识,就能看懂它,在最短的时间里,掌握jQuery的所有主要方面(除了ajax插件开发)。

(阅读全文…)

一个最简单的jQuery焦点图插件实现

蓝飞 蓝飞 | 时间:2013-03-10, Sun | 8,029 views
 

有一个同学需要在网页里用到简单的焦点图效果,在网上找了许多jQuery插件都不甚满意,有一些效果虽然不错,但是根本用不到那么多功能,大材小用不说,还会加大代码量,降低网页前端性能,于是花了十分钟写了一个最最简单的jQuery焦点图插件,麻雀虽小,五脏俱全,可定制宽高,切换延迟。代码如下:

HTML部分,自然是一个非常简单的列表结构:

<ul id="slider" class="slider">
	<li><a target="_blank" href="javascript:void(0);"><img src="images/slider1.jpg" /></a></li>
	<li><a target="_blank" href="javascript:void(0);"><img src="images/slider2.jpg" /></a></li>
	<li><a target="_blank" href="javascript:void(0);"><img src="images/slider3.jpg" /></a></li>
	<li><a target="_blank" href="javascript:void(0);"><img src="images/slider4.jpg" /></a></li>
	<li><a target="_blank" href="javascript:void(0);"><img src="images/slider5.jpg" /></a></li>
</ul>

CSS部分,简单地定义一下样式:

.slider{
	margin: 0 auto;
	padding: 0;
	width: 600px;
	height: 400px;
	list-style: none;
	overflow: hidden;
	position: relative;
}

.slider li{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}

.slider img{
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	text-align: center;
}

(阅读全文…)