在原来pc页面的基础上修改成移动端的一些心得

 

Js

1．setTimeout和cleartimeout()的使用

//如何设置间隔几秒以后再消失

   var conEI_setTime;

   conEI.mouseleave(function () {

       t = setTimeout(function () { $("#" + pmk.id +"").attr("style", "display:none") }, 300);

   }).mouseover(function () {

       //在执行到一半的时候在取消

       clearTimeout(conEI_setTime); conEI_setTime = false;

});

2.回车绑定事件

                if(event.keyCode == 13){ //绑定回车

                     $('.button_sure1').click(); //自动/触发登录按钮

                  }

              });

3.显示和隐藏，冒泡阻止

  $(document).on('click','input', function () {

           return false;

       });

$(document).on('click','#searchEI span span input,.PlaceMarker_EI', function () {

        conEI.show();

        return false;

    });

    $(document).on('click', function () {

       conEI.hide();

    });

    //点击选框的确定按钮时-阻止冒泡

    $(".button_sure1").click(function(e) {

        conEI.hide();

        e.stopPropagation();

})

4. 选择器排出

：not(‘.div’)或.not(“.div”)

5.循环input判断你点击的是那个一个input文本框

 

                  for (var j = 0; j <clickfn.length; j++) {

                      //可以通过这种方法判断你获得的是哪一个input文本框

                      if (clickfn[j])clickfn[j]({ value:'', name:'' , type:''});//重置方法给文本框设置值为""

                  }

6.根据鼠标的滑动-刷新

   $(window).bind("scroll", function() {

                 

                    Index_o.html(data);

                    loadPicture(Index_o);

                });

问题是:刷新了的还要再刷一遍

7. 

 window.onload = function () {

           setTimeout(function () { $('.div_loadimg,.sk-circle').css({"opacity": "0", "height": "0px","width": "0px", "margin": "0px","padding": "0px" }); }, 1000);

         

       }

 

8.切记

切忌不要在js里面直接写样式
只要css能够控制的，就用css控制

 

9.

 

MaintainScrollPositionOnPostback ="true" 

 MaintainScrollPositionOnPostback="true" 

 

页面是从上往下解析,所以,滚动条最初会在顶部,然后才是刷新前的位置崩溃

10.hover

  $(".PlaceMarker_EI .bottom_divinput").hover(function () {

        $(this).css("cursor","pointer");

     });

$(".PlaceMarker_EI.bottom_div input").hover(function () {

        $(this).css("cursor","pointer");

     },function(){

         $(this).css("cursor","default");

     }); 

11.js大神的点击思想

op_option_2.click(function (){

        if (op_option_2.click) {

            alert("!");

        }

});

12.快速添加和删除class

toggleClass("hide");

13.克隆节点

 

var query1_con =document.getElementById("queryForm").cloneNode(true);

   var query1_con =$("#queryForm").clone(true);

15.

 if($(ei).css("display") == "none")

16.父级

$("#boxId").parents('div').remove();

17.

地址可以是id

<a style='float: right' href="#Div_Menu">TOP↑</a>

18.

页面不可滑动$("body").addClass("ov_hidden");

18.

垂直定位居中

1. 
    position: fixed;

2.      left: 50%;

3.      top: 51%;

4.      transform: translate(-50%, -50%);

5.      max-width: 100%;

6.      /* height: 90%; */

7.      z-index: 1001;

8.      width: 95%;

9.      opacity: 2;

18.

document.getElementById($(this).attr("eid"))

19.

<ahref="javascript:void(0);"οnclick="alert('ok');"></a> 

这里表示这个链接不做跳转动作，执行onClick事件。

19.禁止滑动

.scrollFix{
　　height: 100%;
　　overflow: hidden;
　　position: relative;
}
.scrollFix body{
　　height: 100%;
　　overflow: hidden;
}

弹出层前:

//防止body层向下滚动后出现内容显示不全的问题
$('html,body').animate({scrollTop: 0}, 100);

$('html').addClass('scrollFix');

弹出层关闭后(一般是层的关闭回调):

$('html').removeClass('scrollFix');

 

20.

父级div定位,子元素浮动无故消失

解决方案：为了排版又不能取消浮动，咋办？

只能取消浮动，否则元素会消失，咋排版呐？

用position：absolute

21.

用时候需要用到元素根据自动定位：

  var e = epmk.infoEI[0];

            var x = e.offsetLeft;

            var y = e.offsetTop;

            var offsetHeight = e.offsetHeight;

            while (e = e.offsetParent) {

                x += e.offsetLeft;

                y += e.offsetTop;

            }

            y = y + offsetHeight;

        var scrotop =document.documentElement.scrollTop || document.body.scrollTop;

var top = window.innerHeight;

                top = (top + scrotop) <listEI.height() ? y - ((listEI.height() + epmk.infoEI.height() + 33)) : y;

                listEI.css({ "width":epmk.infoEI.width() + 6, "left": x - 2, "top": top}).show();

listei：是我需要自动定位的元素

epmk.infoEI[0]:是我的要根据定位的参照物;

这里需要注意：listei如果是在手机上要设置：position：fied，否则要乱跑哦

电脑的大屏幕上的话就设置：position：absolute；这样更人性化

 

22：

//*

//*判断是否是pc端

///

function IsPC() {

    var flag = true;

    //------宽度

    var screen_with = window.screen.width;

    //------媒体查询

    var result = window.matchMedia('(max-width:768px)');

  //------判断

    if (screen_with <= 768) {

        flag = false;

    } else

        if (result.matches) {

        flag = false;

    }

    else {

        flag = true;

    }

 

    return flag;

}

var ispc = IsPC();

23.元素通过定位来确定位置，可是加载的时候，元素会动一下在到确定的位置，这样体验不好，咋办？

如此例如：不要用：top：10%，用top：20px；

因为加载的时候，有的元素是浮动，所以没有高度，无法确定高度，元素就会在没确定的时候动来动去咯。

24.size得到元素长度

  var size = $("#filterEI >.filter-item").size();\

25.手机屏幕左右滑动

$("body").on("touchstart",function(e) {

 e.preventDefault();

 startX =e.originalEvent.changedTouches[0].pageX,

 startY =e.originalEvent.changedTouches[0].pageY;

});

$("body").on("touchmove",function(e) {

 e.preventDefault();

 moveEndX =e.originalEvent.changedTouches[0].pageX,

 moveEndY = e.originalEvent.changedTouches[0].pageY,

 X = moveEndX - startX,

 Y = moveEndY - startY;

   

 if ( Math.abs(X) >Math.abs(Y) && X > 0 ) {

  alert("left 2right");

 }

 else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {

  alert("right 2left");

 }

 else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {

  alert("top 2bottom");

 }

 else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {

  alert("bottom 2top");

 }

 else{

  alert("justtouch");

 }

 

26.获取元素的文本长度,和加边距

//*

//*查询框中的margin边距-对文字的排版

///

$.text_m = function () {

    //对文字的排版

    var p_s =$(".div1_p,.div2_p").size();

    var p_v = $(".div1_p,.div2_p");

    for (i = 0; i <= p_s; i++) {

        //-：2

        if ($(".div2_p:eq(" + i +")").text().length == 2) {

            $(".div2_p:eq(" + i +")").addClass("div2_p_margin2");

        }

        if ($(".div1_p:eq(" + i +")").text().length == 2) {

            $(".div1_p:eq(" + i +")").addClass("div2_p_margin2");

        }

    }

};

27.获取元素，添加删除类，克隆

if (IsPC() == false) {

                    var fristdiv = $("<divclass='filter_first'></div>");

                   _filter.conEI.prepend(fristdiv);

                   _filter.conEI.append(morediv);

                   fristdiv.append($("#filterEI .filter-item").clone(true));

                    $(".filter_first .filter-item.item-c,.filter_first .filter-item .item-tgm").remove();

                    $(".filter_first.filter-item ").append("<spanclass='a_v'>V</span>");

                    $("#filterEI >.filter-item").append($("#filterEI > .filter-item.item-tag"));

                    $(".filter_first.filter-item .item-t").click(function () {

                        $(".filter_first.filter-item.item-t").parent(".filter-item").removeClass("f_back");

                       $(this).parent(".filter-item").addClass("f_back");

                        var size =$("#filterEI > .filter-item").size();

                        for (i = 0; i <=size; i++) {

                            if ($(this).text()== $("#filterEI > .filter-item:eq(" + i + ").item-t").text()) {

                                if ($("#filterEI> .filter-item:eq(" + i + ").item-t").parent(".filter-item").css("display") =="block") {

                                   $("#filterEI > .filter-item:eq(" + i + ").item-t").parent(".filter-item").hide();

                                }

                                else {

                                   $("#filterEI > .filter-item").hide();

                                   $("#filterEI > .filter-item:eq(" + i + ").item-t").parent(".filter-item").addClass("f_back").show();

                                }

                                break;

                            }

                        }

                     

                    });

                   

                }

28:switch判断

switch(text) {

            case "线路报价":

                div3.prepend($(".body-l-pic"));

                $("#Price_Cne2").hide();

                break;

            case "行程安排":

                $("#Div_RoadSchedule").removeClass("mobile_css3");

                $(".road-sch tbodytr:not(.sch-tit)").hide();

                break;

            case "沿线风景":

                $("#Attractions.body-r-scenery .headImgEi").hide();

                $(".body-r-scenery.scen-list").removeClass("height_list");

               break;

        }

29.

(function($){...})(jQuery)则是一样的，之所以只在形参使用$，是为了不与其他库冲突，所以实参用jQuery. 

简单理解是(function($){...})(jQuery)用来定义一些需要预先定义好的函数
$(function(){ })则是用来在DOM加载完成之后运行\执行那些预行定义好的函数.

 

在前面加一个;避免冲突

30.$.fn.sval的新用法

    $.fn.sval = function (val) {

        var tgnm = this[0].tagName.toLowerCase();

     

    };

$(input).sval();

牛逼

31.想要响应试布局必须要声明的一段代码

 

<metaname="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" />