15個(gè)jquery常用方法、小技巧分享

更新時(shí)間：2015年01月13日 09:45:11 投稿：junjie

這篇文章主要介紹了15個(gè)jquery常用方法、小技巧分享,本文總結(jié)了一些開發(fā)中常用的方法,例如獲取td的行標(biāo)和列標(biāo)、判斷是否是回車按下、全選和反選等,需要的朋友可以參考下

1.獲取td的行標(biāo)和列標(biāo)

復(fù)制代碼代碼如下:

$(this).prop('cellIndex')

2.判斷是否是回車按下

復(fù)制代碼代碼如下:

var myEvent = event || window.event;  

var key = myEvent.keyCode;  

if(key == 13){  

   //此時(shí)為回車按下          

}

3.全選和反選

復(fù)制代碼代碼如下:

$("#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項(xiàng)雙擊事件

復(fù)制代碼代碼如下:

$("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 = $("<input type='text'/>"); //需要插入的輸入框代碼   

    var text = $(this).html();   

    inputIns.width(tdIns.width()); //設(shè)置input與td寬度一致   

    inputIns.val(tdIns.html()); //將本來單元格td內(nèi)容copy到插入的文本框input中   

    tdIns.html(""); //刪除原來單元格td內(nèi)容   

    inputIns.appendTo(tdIns).focus().select(); //將需要插入的輸入框代碼插入dom節(jié)點(diǎn)中   

    inputIns.click(function(){return false;});  

    inputIns.keyup(function(event){  

    //1.判斷是否回車按下   

    //結(jié)局不同瀏覽器獲取時(shí)間的差異   

    var myEvent = event || window.event;  

        var key = myEvent.keyCode;  

        if(key == 13){  

            var inputNode = $(this);  

            //1.保存當(dāng)前文本框的內(nèi)容

            var inputText = inputNode.val();  

            //2.清空td里面的內(nèi)容   

            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.父級(jí)元素$(this).parent();
6.指定元素的下一個(gè)同級(jí)元素$(this).next();
7.指定元素的所有同級(jí)元素$(this).nextAll();
8.指定元素和所有的同級(jí)元素$(this).andSelf();
9.prev()：獲取指定元素的上一個(gè)同級(jí)元素（是上一個(gè)哦）。
10.prevAll()：獲取指定元素的前邊所有的同級(jí)元素。
11.獲取子元素

方式一：>

復(fù)制代碼代碼如下:

var aNods = $("ul > a");//查找ul下的所有a標(biāo)簽

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

注意：

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

12.獲取第一個(gè)元素：

復(fù)制代碼代碼如下:

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

$("#getfirst").find("ul li").get(0)

$("#getfirst").find("ul li").first()

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

復(fù)制代碼代碼如下:

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

14.日期和時(shí)間同時(shí)選擇的插件datetimepicker

復(fù)制代碼代碼如下:

$('#declare_time').datetimepicker({

                dateFormat: 'yy-mm-dd', 

                timeFormat: 'hh:mm', 

        });

15.validate正則添加驗(yàn)證方法

復(fù)制代碼代碼如下:

    $.validator.addMethod("isCode", function(value, element) {   

        var reg = /^[^\u4e00-\u9fa5]{1,}$/;

        return this.optional(element) || (reg.test(value));

    }, "只能輸入字母數(shù)字和下劃線");

您可能感興趣的文章: