欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-20 09:42:36
1.获取td的行标和列标 代码如下: $(this).prop('cellindex') 2.判断是否是回车按下 代码如下: var my...

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 = $("<input type='text'/>"); //需要插入的输入框代码  
    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));
    }, "只能输入字母数字和下划线");