15個jquery常用方法、小技巧分享_jquery

1.取得td的行標和列標

複製程式碼 程式碼如下:

$(this).prop('cellIndex')

2.判斷是否為回車按

複製程式碼 程式碼如下:

var myEvent = event || window.event; 
var key = myEvent.keyCode; 
if(key == 13){ 
   //此時為回車按下         
}

3.全選與反選

複製程式碼 程式碼如下:

$("#selectall").click(function(){
    if($("input[name='id[]']").is(":checked")){
        $("input[name='id[]']").prop("checked",false);
    }else{
        $("input[name='id[]']").prop("checked",true);
    }
});

4.雙擊修改 enter保存  table中的td項雙擊事件

複製程式碼 程式碼如下:

$("td").dblclick(function(){ 
    var tdIns = $(this);  
    var tdpar = $(this).parents("tr"); 
    tdpar.css("background-color","yellow"); 
    if (tdIns.children("input").length>0){ return false; }
    var inputIns = $(""); //需要插入的輸入方塊碼  
    var text = $(this).html();  
    inputIns.width(tdIns.width()); //設定input與td寬度一致  
    inputIns.val(tdIns.html()); //將原本儲存格td內容copy到插入的文字方塊input中  
    tdIns.html(""); //刪除原始儲存格td內容  
    inputIns.appendTo(tdIns).focus().select(); //將需要插入的輸入框程式碼插入dom節點中  
    inputIns.click(function(){return false;}); 
    inputIns.keyup(function(event){ 
    //1.判斷是否回車按下  
    //結局不同瀏覽器取得時間的差異  
    var myEvent = event || window.event; 
        var key = myEvent.keyCode; 
        if(key == 13){ 
            var inputNode = $(this); 
            //1.儲存目前文字方塊的內容物
            var inputText = inputNode.val(); 
            //2.清空td裡面的內容  
            inputNode.parent().html(inputText);         
        } 
    }); 
    //處理Enter和Esc事件  
    inputIns.blur(function(){  
        var inputText = $(this).val(); 
        tdIns.html(inputText); 
        tdpar.css("background-color","white"); 
        tdIns.html(text);  
    });  
    });

5.父級元素$(this).parent();
6.指定元素的下一個同級元素$(this).next();
7.指定元素的所有同級元素$(this).nextAll();
8.指定元素和所有的同級元素$(this).andSelf();
9.prev()：取得指定元素的上一個同級元素（是上一個哦）。
10.prevAll()：取得指定元素的前邊所有的同級元素。
11.取得子元素

方式一：>

複製程式碼 程式碼如下:

var aNods = $("ul > a");//找出ul下的所有a標籤

方式二：children()
方式三：find()

注意：

1> children及find方法都用是用來獲得element的子elements的，兩者都不會回傳 text node，就像大多數的jQuery方法一樣。
2> children方法獲得的只是元素一下級的子元素，即：immediate children。
3> find方法得到所有下級元素，即：descendants of these elements in the DOM tree
4> children方法的參數selector 是可選的（optionally），用來過濾子元素，但find方法的參數selector方法是必選的。
5> find方法事實上可以透過使用 jQuery( selector, context )來實現。即$('li.item-ii').find('li')等同於$('li', 'li.item-ii').

12.取得第一個元素：

複製程式碼 程式碼如下:

$("#getfirst").find("ul li:first-child")
$("#getfirst").find("ul li").get(0)
$("#getfirst").find("ul li").first()

13.datepicker常用的日期選擇插件datepicker

複製程式碼 程式碼如下:

$("#waybill_eta1").datepicker({dateFormat: 'yy-mm-dd'});

   
14.日期和時間同時選擇的插件datetimepicker

複製程式碼 程式碼如下:

$('#declare_time').datetimepicker({
                dateFormat: 'yy-mm-dd',
                timeFormat: 'hh:mm',
        });

15.validate正規新增驗證方法

複製程式碼 程式碼如下:

    $.validator.addMethod("isCode", function(value, element) {  
        var reg = /^[^u4e00-u9fa5]{1,}$/;
        return this.optional(element) || (reg.test(value));
    }, "只能輸入字母數字與底線");