WEB前端开发

[杭州]StarNavig创业团队招募前端开发

我们是一个创业团队；

我们没有明星队员；

我们没有眩目的履历和光环；

我们没有指点江山的专家和颐指气使的BOSS；

我们有一个明确的目标；

我们富有激情；

我们是一群富有实干精神的偏执狂；

我们有一个不错的机会和相对丰厚的待遇；

我们还缺像你一样肯扎实干的优秀人才；

我们期待你的加入！

[职位说明]

要求：熟练掌握JavaScript、HTML、CSS、Ajax，熟悉HTML5、jQuery框架者优先。

薪资：面议（包吃住）

[联系方式]
Tel:    0571-89053575  或者 15358850983

Email: webmaster[a]starnavig.com （可投递作品）

前段时间专门研究了一下腾讯微博的Tip，很有意思！tip中的小箭头是用“◆”（encode为：◆）字符模拟的。以前也写过类似的实现方案《用css的border属性实现三角》。用“◆”字符模拟小三角有一个有点就是：比如tip有border时，也可以用两个绝对定位的“◆”字符模拟。如图：

注意：最好根据您的实际情况设置“◆”的字体，我这里用了宋体，有棱有角真好！

demo页面：http://www.css88.com/demo/tipbox/

公司简介：城市交通信息相关产品（包括网站）开发。为全国各大城市提供交通路况、实时分析软件产品

岗位职责：从事交通信息Web产品及本公司网站的研发

任职要求：

1. 两年以上html+css+js开发经验，深入理解html、css、js、ajax

2. 熟练掌握jquery等js库的其中一项

3. 掌握photoshop基本用法

4. 大专以上学历

优先考虑：

1. 有网站作品，设计感好

2. 有技术洁癖或伪技术洁癖

3. 喜欢整洁代码，喜欢用文本编写程序

4. 喜欢研究Web相关开发知识

待遇：年新8w+，多少视能力而定。

简历发至：job@tsnav.cn 标题注明“应聘Web前端开发工程师”

工作地点：北京市朝阳区 北辰融富中心B座2507 （距离天通苑、北苑、回龙观比较近）

交通方式：城铁5号线北苑路北站，快3天乐园小区站，758、751、803、836北苑北站

HTML5和CSS3逐渐成为WEB前端开发的必须技能，开发过程中检查不同浏览器对HTML5和CSS3支持情况成了是一件非常烦心的事情。

比如我们要检查某个浏览器是否支持canvas元素：

function SUP_canvas() {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
};

是否支持WebGL：

function SUP_webgl() {
return !!window.WebGLRenderingContext;
};

还有很多html5和css3其他属性…，值得庆幸的是我们发现了Modernizr开源Javascript库

Modernizr是一个用来检测浏览器是否支持HTML5以及CSS3特性的基于MIT证书的开源Javascript库。Modernizr的功能其实很简单，就是用js检测浏览器对HTML5/CSS3的特性支持情况，支持某个属性，就在页面的标 签上添加一个相应的class，不支持的话就添加一个no-前缀的class，比如，如果检测的浏览器支持video标签，MODERNIZR就会 在标签上添加video类，否则，添加no-video类。

最新的Modernizr是2.0.6版本的，如果你下载开发（development）版本，给我们提供全部的内容，如果要下载production版本的modernizr，我们会发现，我们可以根据自己的需要进行订制。在其下载页面上，我们选择自己所需的HTML和CSS特性，然后生成一个javascript文件。这么做会极大程度上减少冗余代码，减少不必要的检测，对web前端这个很看重用户体验的地方，性能就是一点一点压出来的。

使用Modernizr也非常简单，只要而且必须在标签里应用就可以了，无需调用Modernizr_init()之类的初始化方法。modernizr必须放在里，最好放在css声明之后，因为HTML5 Shiv（用以在IE中启用HTML元素）必须在之前执行，而且要使用modernizr添加的class，需要阻止FOUC。还有一点在于html声明里的no-js的class。它设置了一个默认状态，如果页面禁用了javascript我们就可以知道了。

用调试工具我们看到在html标签里加了很多样式类，从这些样式类里我们可以完全看出您使用的浏览器对HTML5和CSS3支持情况，以“no-”开头的，就是这个浏览器不支持的特性：

知道了这些特性的支持情况我们就可以使用css选择器做一些表现上的差异，比如,如果不支持标签，那么test类文本为红色。
.canvas .test {
color: blue;
}

.canvas .test {
color: red;
}

同样，我们也可以在JavaScript利用这些特性检测的结果，代码：

if(Modernizr.canvas){
//开始画图啦！

}else{
alert("fuck!");
}

Modernizr 2还提供了一种load机制，方便代码管理，比如：

Modernizr.load({
test: Modernizr.canvas,//检查是否支持标签及相应的属性
yep : 'canvas.js',//如果支持标签及相应的属性那么加载canvas.js，
nope: 'no-canvas.js'//如果不支持标签及相应的属性那么加载no-canvas.js，
});

如果直接用的是development版本的modernizr，你会发现，根本就没有Modernizr.load，因为它是作为一个单独文件发布的：yepnope.js。而在production版本，我们选择将其包含在modernizr里。

官方网址：http://www.modernizr.com/

web前端工程师
工作地点：北京

工作经验：3-5年

招聘人数：5人

职位月薪：4001-8000元/月

任务：开发本公司旗下网站基于web应用平台
岗位要求：
1、大专以上学历，2年工作经验；
2、能把握网站整体架构和网站风格，理解公司企业文化并深入了解网站，能够将自己融入到网站中，不断发掘并创新、完善；
3、利用(X)HTML/CSS/JavaScript/DOM等各种Web技术进行网站/产品的界面开发。

职位描述：
1、熟练使用Photoshop/fireworks等设计软件进行切图。
2、精通各种Web前端技术，掌握XHTML/CSS/JavaScript代码，兼容主流浏览器，有相关经验；
3、高度的责任感，勤奋敬业、能吃苦耐劳；做事极积主动、认真细心；工作效率高。有较好的团队合作意识，能承受工作压力。
4、有设计作品优先考虑。
应聘者需提供相关网页（html,css）作品。

本职位提供行业突出的工资待遇和股票期权。

****************************************************************************

asp.net程序工程师
工作地点：北京

工作经验：3-5年

招聘人数：5人

职位月薪：4001-8000元/月

悉.NET环境下开发各种类型网站。了解ASP.NET MVC2,能独立开发网站
必备技术知识：XHTML，CSS，Ajax， Javascript， Jquery， C#，MSSQL2005
会熟练使用Silverlight的优先。了解CSS3 和HTML5优先

任务：开发本公司旗下网站基于web应用平台
岗位职责：
1、所有开发类项目的设计、开发；
2、线上系统代码级维护；
3、书写数据库设计文档；
4、书写详细设计文档；
5、设计重构、性能优化；
6、提供技术支持、技术咨询服务。
任职要求：
1、熟练运用微软C#语言，熟悉ASP.Net网站或应用程序开发平台和编程工具，JAVASCRIPT/C#等；
2、熟悉微软SQL SERVER平台，有相应的数据库环境开发工作经验；
3、熟悉一般熟悉网站运营流程、有大型网站、MIS及电子商务系统开发经验者优先；
4、较强的沟通和学习能力，能够胜任有压力的工作。

****************************************************************************

北京鼎盛天下科技开发有限公司

公司网址：http://www.jituan.net/ http://www.7551.com.cn
联系人：管小姐
电话：13240976282
传真：010-67504759
E-amil：hr@7551.com
地址：北京丰台区北甲地路10号2-26D

云计算是 IBM 极为重要的战略方向，也是全球几乎所有IT企业都在极力抢占的技术和市场制高点。

我们正在 IBM 中国系统与科技研发实验室(CSTL)组建一个大规模的团队，负责 IBM 基础架构云计算平台(IBM Cloud Foundation)的研发。IBM Cloud Foundation 将广泛支持 Power 服务器, X86 架构服务器，刀片服务器，存储设备和网络设备，广泛支持业界主流的虚拟化平台，帮助企业客户快速将 IT 基础设施建设成为基础架构即服务的云计算模式，提供虚拟化计算池，存储池，按需获取计算资源，按需获取存储资源，自动化快速部署，自助服务，按使用量计费，工作负载优化，高并发高可用等重要功能, 我们期待能够真正实现将计算，网络，存储变成像水和电一样的公共基础设施。

我们的团队将全面负责 IBM Foundation 的架构设计, 开发工作以及测试工作。 在后台研发的同时，我们将与IBM的售前、咨询、服务团队紧密合作，直接参与许多国内外大型企业的云计算基础架构的咨询，规划和建设。同时，我们还在和几十家国内著名的软件公司紧密合作，共同打造基于 IBM Cloud Foundation 开发云计算解决方案的生态系统，和程序员杂志 CSDN 共同建设 IBM 云计算开发社区(http://dragoncloud.csdn.net/)。基于 IBM Cloud Foundation的 CloudStarter 云计算解决方案已经在国内外数家大型电信运营商和银行投入使用。

云计算时代刚刚起步，还有大量的富有挑战的工作等待我们去完成，我们虚位以待，期待你辉煌的职业生涯与辉煌的云计算时代一起成长！

职位信息如下：
****************************************************************************
UI(Javascript) Developer for IBM Cloud Foundation

Hire No: 3-5
Level: Band 6 – Band 8

Skill Requirements:
- Good programming skills in Javascript/HTML/CSS.
- Good knowledge on Javascript Framework,such as jQuery/Ext/YUI.
- Good trouble shooting skills
- Excellent communication skills and excellent team player
- Fluent English
- Good knowledge on DOJO is big plus
- Good knowledge on Java is big plus

Other requirement
-应届毕业生计算机相关专业硕士以上学历；
-社招，计算机相关专业本科以上学历，工作2年以上；
-工作地点：北京；
起薪是10k/m；

Please send your resume to qintj@cn.ibm.com

****************************************************************************

PS.

满足条件的前端工程师还是蛮有竞争力的 这是非常非常缺人的岗位：）
而且也不会像互联网那样为上线产品通宵=。=

上个月研究学习了《js判断一个元素是否为另一个元素的子元素》，感觉还挺好用，但是在jQuery应用中还是有很多缺陷，比如多个元素的时候写起来就不是很方便。所以写了比较简单的jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的两个扩展：

//判断:当前元素是否是被筛选元素的子元素
jQuery.fn.isChildOf = function(b){
return (this.parents(b).length > 0);
};
//判断:当前元素是否是被筛选元素的子元素或者本身
jQuery.fn.isChildAndSelfOf = function(b){
return (this.closest(b).length > 0);
};

使用起来也非常方便：

$(document).click(function(event){
alert($(event.target).isChildOf(".floatLayer"));
});

或者：

$(document).click(function(event){
alert($(event.target).isChildAndSelfOf (".floatLayer"));
});

查看demo：http://www.css88.com/demo/isParent/index1.html

感谢 留痕 网友提交的bug，bug主要原因是我忽视了多个广告轮播和样式重名的问题；经简单的修改已经修复该问题。谢谢 留痕 网友。
==============华丽的分割线================
广告轮播，焦点图效果反反复复写了好几个插件,http://www.css88.com/?s=%E5%B9%BF%E5%91%8A%E8%BD%AE%E6%92%AD,http://www.css88.com/archives/2455

这次这个插件主要解决了两个问题:

1.当焦点图只有一张的时候不滚动；

2.当鼠标经过右下角图片选择的控制点上加了延时，避免在用户不经意划过这些控制点的时候切换图片。

具体插件代码：

/**
 * @author 愚人码头
 * User: feiwen
 * Date: 11-7-11
 * Time: 下午4:30
 * Settings:{
 *     speed:滚动速度
 *     timer:滚动的时间间隔
 * }
 */
(function($) {
    $.fn.slideImg = function(settings) {
        settings = jQuery.extend({
            speed: "normal",
            timer: 1000
        }, settings);
        return this.each(function() {
            $.fn.slideImg.scllor($(this), settings);
        });
    };

    $.fn.slideImg.scllor = function($this, settings) {
        var index = 0;
        var scllorer=$(".img-box li",$this);
        var size=scllorer.size();
        var slideH=scllorer.outerHeight();
        var $selItem=$("<ul></ul>",{
            "class":"flash_item",
            html:function(){
                var $selItemHTML="";
                if(size==1){
                    return;
                }else if(size>1){
                    for(var i=0;i<size ;i++){
                        i==0?$selItemHTML+='<li class="on">'+(i+1)+'':$selItemHTML+='<li class="">'+(i+1)+'</li>';
                    }
                    return  $selItemHTML;
                }
            }
        }).appendTo($this);
        var li = $(".flash_item li",$this);
        var showBox = $(".img-box",$this);
        var intervalTime=null;
        li.hover(function() {
            var that=this;
            if (intervalTime) {
                clearInterval(intervalTime);
            }
            intervalTime = setTimeout(function() {
                index = li.index(that);
                ShowAD(index);
            }, 200);
        }, function() {
            clearInterval(intervalTime);
            interval();
        });
        showBox.hover(function() {
            if (intervalTime) {
                clearInterval(intervalTime);
            }
        }, function() {
            clearInterval(intervalTime);
            interval();
        });
        function interval(){
            intervalTime = setInterval(function() {
                ShowAD(index);
                index++;
                if (index == size) {
                    index = 0;
                }
            }, settings.timer);
        }
        interval();
        var ShowAD = function(i) {
            showBox.animate({ "top": -i * slideH }, settings.speed);
            li.eq(i).addClass("on").siblings().removeClass("on");
        };
    };
})(jQuery);

demo演示地址：http://www.css88.com/demo/slide1/

今天看了一段YUI compressor压缩的js代码：

userNum && (ind += index,ind >= userNum && (ind -= userNum),ind < 0 && (ind === -2 && (ind = -1),ind += userNum),selLi.removeClass("on"),$(selLi[ind]).addClass("on"));

直接疯掉了，估计一下子没几个人能看懂。那么就把他“翻译”一下。

&& (逻辑与)

这里主要是一个“&&”运算，首先要搞懂这个，看一个简单的例子：

var a = 1 && 2 && 3;//3
var b = 0 && 1 && 2;//0
var c = 1 && 0  && 2;//0
alert(a),alert(b),alert(c);

嘿嘿，写法很奇怪，运行的结果是3，0，0。一般我们在if语句中经常用到。“&&” (逻辑与) 运算和“||”运算真好相反，“&&” 运算遇到false就返回。
例如： a && b ,如果 a 为true，直接返回b，而不管b为true或者false 。如果 a 为false 那么直接返回a，上面例子中第一个var a = 1 && 2 && 3;因为1 && 2，1为真，返回2；2&&3， 2为真，返回3 。
搞懂了“&&” 运算，再来看最上的面的YUI compressor压缩的js代码，翻译一下：

if(userNum){
ind += index;
if (ind >= userNum) {
ind -= userNum
}
if(ind < 0){
if(ind === -2){
ind = -1;
}
ind += userNum;
}
selLi.removeClass("on");
$(selLi[ind]).addClass("on");
}

说来惭愧，年纪大了，足足“翻译”了半个小时，还是在同事的帮助下才“翻译”正确。

||（逻辑或）

再来看看“||”（逻辑或）运算，看例子：

var a = 0 || 1 || 2;//1
var b = 1 || 0 || 3;//1
alert(a),alert(b);

“||”运算遇到true就返回。例如：a || b ,如果 a 为false，直接返回b，而不管b为true或者false 。如果 a 为true，直接返回a，而不会继续往下执行。

&& (逻辑与) 和||（逻辑或）混合使用的时候要注意他们的优先级：

&& (逻辑与) 优先级高于||（逻辑或）
return a && b || c ,
根据a来判断返回值，a 是 false 则肯定返回 c；如果 b , c 都是 true ，那么我们就可以根据 a 来决定b 还是 c ，如果 a 是 false 则返回 c，如果a是true 则返回 b。
return a || b && c
根据优先级相当于先算 b && c ,然后和a 相 或；如果a是true，则返回a，不论是b或c，如果a是false，则如果b是false，返回b，如果b是true，返回c；

var a = 3  &&  0 || 2;  //2

var b = 3 || 0  &&  2; // 3

var c= 0 || 2 && 3; // 3
alert(a),alert(b),alert(c);

转载自：http://www.splashnology.com/article/50-new-jquery-plugins-for-web-developers/4141/

In spite of the fact that jQuery was released in January 2006 it still holds its position and it’s not surprising, because of its ability to add various elements without the necessity to write bulky and heavy code. Also, it’s getting even much more easier as the community of developers constantly releases plugins that allow web developers to enhance their projects. And to make your task simpler, in order you could just visit our site and choose some of these useful plugins, we’ve picked the best and the newest jQuery pluginsand listed them below.

Textualizer.js

A jQuery plug-in which transitions through blurbs of text, animating each character.

Download

Impress.js

Impress.js is a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Download

Revolver.js

Revolver is a new content slider that makes no assumptions about your markup. 继续阅读：50 New jQuery Plugins For Web Developers»