The summary of the October(part 0)

做阅文招聘官网关于优化方面的知识总结：

1.关于video播放，jq里面是没有$("#id").play()；这个方法的，正确的播放应该是$("#id").trigger('play');

2.当通过锚点从一个页面跳到另一个页面的时候会定位到第二个页面锚点处，但是其实我们是想定位到页面的顶部而不是锚点处的时候我们就可以让页面滑倒顶部，而这段时间很短，是看不出来的。贴代码

page01 

                <p class="ywzp-msg-li-msg" id="jobpage">
                    <a href="./social.html#sojob1" class="ywzp-minnav">技术</a>
                    <span class="line">|</span>
                    <a href="./social.html#sojob2" class="ywzp-minnav">设计</a>
                    <span class="line">|</span>
                    <a href="./social.html#sojob3" class="ywzp-minnav">产品</a>
                    <span class="line">|</span>
                    <a href="./social.html#sojob4" class="ywzp-minnav">版权编辑</a>
                    <span class="line">|</span>
                    <a href="./social.html#sojob5" class="ywzp-minnav">其他</a>
                </p>

page02:

        <ul class="job-kind-ul" id="menujob">
           <a id="sojob1" class="job-kind-a active"><span class="tech-icon active"></span>技术开发</a>
            <a id="sojob2" class="job-kind-a"><span class="user-icon"></span>用户体验</a>
            <a id="sojob3" class="job-kind-a"><span class="support-icon"></span>产品运营</a>
            <a id="sojob4" class="job-kind-a"><span class="product-icon"></span>版权编辑</a>
            <a id="sojob5" class="job-kind-a"><span class="other-icon"></span>其他</a>
        </ul>

js代码：

            //点击首页的职位搜索的时候跳到社会和校园招聘相应的职位
            var location=window.location.href;   
            var arrJobid=location.split("#");
            var idjob=arrJobid[1];
            //console.log($("#" + idjob));
            $("#" + idjob).trigger("click");
            $('body,html').animate({scrollTop:0}); 

在这里用了一个animate属性，让页面滚回到顶部。

附加：当从一个页面跳到另一个页面某处锚点的地方时。被跟随页面滑动的顶部导航占了位置，可以在此锚点的上面再加一个空的DIV，然后跳到这个空的div处就可以啦完美~

3.在做首页的时候有个图片轮播，之前用animated动画的时候，safari浏览器打开时居然发现footer底部的文字不停的闪烁，因为我图片轮播用的是opacity属性，于是我就将底部改成动画了，并且设置了一个淡入淡出的效果，代码如下：

$pics.animate({opacity:'0'},2000), 
$pics.eq(i).stop().animate({opacity:'1'},2000),

4.在做到校园招聘的下拉的时候，体验不是很好，点击一下虽然可以打开当前的信息，但是点击第二个的时候要点两下才能关上，改进后的关键代码如下：

            elIndexJob.click(function(){
                if($(this).hasClass("ACTIVE")){
                   $(this).removeClass("ACTIVE");
                   $(this).next(".jobclose").slideToggle(300).parent().siblings().find(".jobclose").slideUp(300);
                }else{
                elIndexJob.removeClass("ACTIVE");
                $(this).addClass("ACTIVE");
                $(this).next(".jobclose").slideToggle(300).parent().siblings().find(".jobclose").slideUp(300);
                }
            });

5.在写邮箱链接的时候记住在a标签里面加 mailto属性。如：<a href="mailto:hr@yuewen.com">hr@yuewen.com</a> 这样用户用鼠标单击一下该超级连接的话，浏览器会自动调用系统默认的邮件客户端程序，同时在邮件编辑窗口的收件人设置栏中自动写上收件人的地址，而其他的内容都是空白，留给访问者自行填写。

6.关于实现站内搜索的功能：

7.视频关闭按没有用任何图标。直接用的是一个字母X，既可以调整大小颜色又少了内存。

8.图片记得压缩。颜色少的用PNG.颜色多的压缩成JPG。在线压缩图片工具（http://www.tinypng.com/）;

9.当给元素添加样式的时候要将行为和样式分离：如当点击职位标题的时候字体要变蓝色，并且打开对应的职位信息：

                    <a class="socialjob-box Jsjobindex">
                        <h3 class="socialjob-name">Android开发工程师</h3>
                        <h5 class="socialjob-part">技术部</h5>
                        <span class="socialjob-arrow JsArrow"></span>
                        <h4 class="socialjob-adr">上海／北京</h4>
                    </a>

.socialjob-name{
    font-size: 18px;
    color: #2E4C7B;
    font-weight: normal;
}
.active > .socialjob-name {
    color: #0FB1FA;
}

var elIndexJob = $(".Jsjobindex");
var ACTIVE = 'active';
elIndexJob.click(function(){
    elIndexJob.removeClass("ACTIVE");
    $(this).addClass("ACTIVE");
});

 若是给它追加一个class的话还要再取一个样式名，这样写更加方便日后维护和修改，不用更改js里面的东西只要改css 元素的active 属性里面的内容了。

若是本身active添加样式而不是其子元素的写法：

.active .socialjob-name {
     color: #0FB1FA;
}

10)关于页面太短，footer背景图和白色背景冲突的解决办法，在footer底部再画一个和背景色一样的矩形。使用outline属性来画矩形的好处是不占据任何的空间，

outline: 1500px solid #415874;

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

然后再用clip：rect (top, right, bottom, left) 属性来裁去footer的部分让footer漏出来，并且被裁剪的元素要使用绝对定位才能起效，裁剪的点以左上角的点为参考来裁剪。clip: rect(0 3000px 3000px -3000px) 从距离元素的顶部0像素的地方开裁剪，向右裁剪的宽度要大于footer的宽，向下裁剪要大于footer的高。

.ywzp-footer-msg{
    background-color: #415874;
    height: 166px;
}
.ywzp-footer {
    position: absolute;
    width: 902px;
    height: 126px;
    left: 50%;
    margin-left: -451px;
    font-size: 12px;
    text-align: center;
      padding-bottom: 20px;
      padding-top: 20px;
    background-color: inherit;
    outline: 1500px solid #415874;
    clip: rect(0 3000px 3000px -3000px);
}

8）text-indent 属性本身是用来缩进文字的，也可以利用它的属性来隐藏文字，因为它可以赋负值，当使用负值时文字会被向左缩进，提高页面的seo

9）搜索表单要用form标签,搜索框里面的选择是通过select里面的值来输出的。

     通过给元素本身加active属性来变化而不是给元素另外再加一个classname；

实例：http://output.jsbin.com/tovikedave

10)当屏幕分辨率太大或者屏幕过大的时候有些图会模糊，所以我们要使用两倍图或者换一张图片尺寸更大的图，如对logo和banner图的处理如下：

<a href="/" class="ywzp-logo">
    <h1>阅文集团招聘官网</h1>
</a>

 1 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
 2 .ywzp-logo {
 3     background-size: 100%;
 4     background-image: url(./images/yw-logo@2x.png?v);
 5 }
 6 .ywzp-logo {
 7      140px;
 8     height: 100%;
 9     background: url(./images/yw-logo.png) no-repeat 0 center;
10     text-indent: -99em;
11     float: left;
12     overflow: hidden;
13 }

1 @media screen and (min- 1920px){
2     .ill-huge{
3         background-image: url(./images/hugebig.jpg);
4         position: absolute;
5     }
6 ｝

11）邮箱链接要用a标签并且带上链接<a href="hr@yuewen.com">hr@yuewen.com</a>

12) 像这样的分割线最好写一个，不要用首页｜社会招聘 这种自带的分割线写，因为还是有细微的边距。

13）清除浮动方法：

在浮动元素的父级上加overflow:hidden; 或者

1 .ywzp-msg-ul:after {
2     content: '';
3     display: block;
4     clear: both;
5 }