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

前端技术 2023/09/03 JavaScript

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));
    }, \"只能输入字母数字和下划线\");

本文地址：https://www.stayed.cn/item/7466

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案