js總結篇

• js總結

1、

2、#datatype:"json"替代eval'('+arg+')',
3、for (var x in arg.parts){
    arg.parts[x].part //json數組用[]訪問,key用.號訪問
}

//第一個字節點
4、node.find("li").first().addClass("active");
node.find("li :first-child")

5、查找是否存在字符串，x.indexOf("")>=0
.replace(/[^0-9]/ig, "")去掉非數字部分

6、嵌套ajax，由於異步特性，第二次的ajax數據會讀取不出來，解決辦法
#兩次請求放在服務器端一起出來發送回來 方便
#而把第一次請求的結果存放在html裏面，再次請求時候讀取出來，邏輯複雜點
#同步ajax，網頁容易卡住

7、#獲取input $(" input[ name='test' ] ").val()
#focus樣式在已經被設置樣式了就無效了
#靈活運用刪除屬性    dialog.find("input[type='text']").css("border", "");

 

8、也可以用標籤ul li換行，實質是display: list-item
setTimeout(function(){cleardialog(div);}, 1000);//帶參數的延時函數，  setInterva

9、#mouseenter和mouseout配合使用的bug：
    mouseenter到子元素的時候，觸發了mouseout，清除了還未加載進來的異步操作的子元素，導致移入到子元素看不到
mouseover：當鼠標指針位於元素上方時，會發生 mouseover 事件。
mouseenter:當鼠標指針穿過元素時，會發生 mouseenter 事件。
mouseout：不論鼠標指針離開被選元素還是任何子元素，都會觸發 mouseout 事件。
mouseleave：只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。

10、#jquery中獲取元素的大小和位置信息
$(this).width()/height()
$(this).position().left()/top()  //相對位置
$(this).innerWidth()/outerWidth()
$(this).offset().top/left   //絕對位置
$(this).scrollLeft()/scrollTop  //滾動位置 

11、#cokie的存取
$.cookie("server_list", server_list);
$.cookie("server_list"）

localStorage 存儲在本地，容量爲5M或者更大，不會在請求時候攜帶傳遞，在所有同源窗口中共享，數據一直有效，除非人爲刪除，可作爲長期數據。sessionStorage 一樣只是在同源的當前窗口關閉前有效。
//設置：
localStorage.setItem("dat", "456");
//獲取：
localStorage.getItem("dat");
//刪除
localStorage.removeItem("dat");

12、#contentchanged文本內容變化
$(".container h3").bind("contentchanged", function () {
    aleart('chagned')
})
$(".container h3").trigger('contentchanged');

 

13、/*因爲浮動使得li脫離正常的文檔流，li的父元素ul的高度變爲0， 這時，與ul相鄰的p元素的位置就上去了。當你設置ul的高度後，ul的一些性質不再受其內li浮動的影響， p因此就下去了。*/設置高度
/*因爲在一個區塊內的元素被應用了float之後，那麼整個box的高度對就不以被浮動對象的高度爲標準了。  */overflow: auto;解決

14、讀取上次數據，並找到上次數據在ul中的位置設置active

            for (var i=0; i<arg.length;i++){
                x = arg[i];
                node.append('<li class="server">'+x.serverip+'<i class="iconfont icon-youjiantou"></i></li>');
                if(current_server == x.serverip){
                    node.find("li:first-child").addClass("active");
                }
            }

15、#彈框根據偏移得到實際居中效果

div.css("left", window.scrollX+(window.innerWidth - div.width()) / 2).css("top", window.scrollY+(window.innerHeight - div.height()) / 2);

16、jQuery 的 index() 方法返回指定元素相對於其他指定元素的 index 位置，因此可用於獲取當前li元素順序。

17、通用的高亮

function set_active(nodes, label, node) {

$.each(nodes, function () {           $(this).find(label).removeClass("active");      });//移除父控件下的active

node.addClass("active");                 //高亮

}

18、

19、活動元素的子元素的樣式和監聽 
.volume_group li.active .icon-xiala:hover{color: blue;}
$(".volume_group").on("mouseenter", ".active .icon-xiala", function () {}
20、鼠標是否在元素內的判斷
$(".volume_group").on("mouseleave", ".active .icon-xiala", function (event) {
    var div = $(".group_menu");
    var x=event.clientX;
    var y=event.clientY;
    var divx1 = div.offset().left;
    var divy1 = div.offset().top;
    var divx2 = div.offset().left + div.width();
    var divy2 = div.offset().top+ div.height();
    if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
       $(".group_menu").css("display","none");
    }
});

21、記錄一次跨頁面定時器停止不下來的問題：
第一認爲js文件跨文件的全局變量不能共享，實際上是可以的；
第二，onload函數$()在html內嵌js之後執行，所以停止定時器之後，總是重新啓動定時器了。

所以跨頁面的時候，可以調用原來頁面的函數來停止原來的定時器。

22、字典的遍歷

for (var x in arg.parts) { console.log(x+":"+arg.parts[x])}

23、select操作

$("select ").val();可以設置或者獲取選中option的值，而"select option:selected"用來獲取option，來操作其他屬性

複選框的勾選設置和獲取，$().prop("checked", true);

單選框的設置和獲取$("input:radio:checked").val()

24、刪除ul的除第一的所有li

$().find("li").not(":first").remove();

25、對jquery的find（）結果判斷

.length>0則查找到，否則查找不到

26、eval本身有問題以{}方式包裹，被當作語句塊，所以有問題，而[]的方式的沒有問題，所以最好都加上'(+arg'+')'

27、//通用彈出提示框
function promption(text) {
    $('.mask').show();//在全局放置一個div，顯示時候遮罩整個頁面
    $(".body_dev").find(".tip_dialog").remove();//在整個頁面的div裏面放置body_dev的class，追加一個相對爲值的div，div的z-index和‘mask’的一樣
    $(".body_dev").append(' <div class="tip_dialog"> <div class="title"">提示</div> <div class="content">'+text+'</div> </div>');
    var div = $(".body_dev").find(".tip_dialog");
    div.css("left", window.scrollX+(window.innerWidth - div.width()) / 2).css("top", window.scrollY+(window.innerHeight -               div.height()) / 2);
};
$(".body_dev").on("click",'.tip_dialog',function () {
    $(this).remove();
    $('.mask').hide();
});

28、ajax的html返回成功200，沒有進入success：
後臺返回的json數據是一個純String類型的對象時，前端dataType屬性設置爲json後，會認爲這個不是標準的json格式，所以就去執行error對應的方法了；2也需要檢查後端傳過來的數據是xml，json，html格式。

29、國際化

jQuery.i18n.properties({
    name : sourceName, //資源文件名稱
    path : '../static/i18n/' + i18nLanguage +'/', //資源文件路徑
    mode : 'map', //用Map的方式使用資源文件中的值
    language : i18nLanguage,
    callback : function() {//加載成功後設置顯示內容
        var insertEle = $(".i18n");
        insertEle.each(function() {
            // 根據i18n元素的 name 獲取內容寫入
            $(this).html($.i18n.prop($(this).attr('i18nname')));
        });
        var insertInputEle = $(".i18n-input");
        insertInputEle.each(function() {
            var selectAttr = $(this).attr('selectattr');
            if (!selectAttr) {
                selectAttr = "value";
            };
            $(this).attr(selectAttr, $.i18n.prop($(this).attr('selectname')));
        });

        var insertPlaceholderEle = $(".i18n-placeholder");
        insertPlaceholderEle.each(function() {
            $(this).attr("placeholder", $.i18n.prop($(this).attr('placeholdername')));
        });
    }
});

 30、有時序要求的js全局變量，比如國際化才直到的一個字典

需要在js裏面聲明，等js加載完成---$(function(){ Network_Type = $.i18n.prop("mng_network") });時候---初始化，再在js裏使用

31、js正則

new RegExp('^\d{2}:\d{2}$','igm');    //i忽略大小寫，g全局多次匹配，m多行匹配一個/str/igm
str.func(reg) //search, split,replace,match

32、localStorage 布爾類型設置和使用用Number轉換

33、textarea光標始終在文本末尾
$(".progress textarea")[0].scrollTop=$(".progress textarea")[0].scrollHeight;

34、延遲觸發解決window.resize()結束後纔開始觸發的事件,而不會窗口變化時多次觸發

clearTimeout(re_t);

re_t=setTimeout(function(){}, 100);

35、移動彈框窗口

//移動窗口
$(".pop_ups, .pretreatment").on("mousedown", MouseMove);
$(".body_dev").on("mousedown",'.tip_dialog',MouseMove);

function MouseMove(evt) {
    var $trgt = $(event.target);
    if ($trgt.hasClass("fixed")) return;

    var $this = $(this);
    var el = $this[0];
    var oevent = evt || event;
    var distanceX = oevent.clientX - el.offsetLeft;//鼠標按下時候，獲取鼠標位置和邊框的左上角的相對位置
    var distanceY = oevent.clientY - el.offsetTop;

    $(document).bind("mousemove", function (evt) {
        var oevent = evt || event;
        $this.css('margin','unset');
        el.style.left = oevent.clientX - distanceX + 'px';//鼠標移動時候，對話框根據鼠標的當前位置，並加上偏移成爲新的位置
        el.style.top = oevent.clientY - distanceY + 'px';
    });
    $(document).bind("mouseup", function () {
        $(document).unbind("mousemove");
        $(document).unbind("mouseup");
    });
}
$('.pop_ups').on("mousedown", 'select', function () {
   $(this).stopPropagation();
})