当前位置：首页 > 资讯 > 技术文档

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

时间：2022-02-10 16:21 编辑：来源：阅读：
扫一扫，手机访问

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

[b]1.获取td的行标和列标 [/b]

$(this).prop('cellIndex')

[b]2.判断是否是回车按下 [/b]

var myEvent = event || window.event; 

var key = myEvent.keyCode; 

if(key == 13){ 

   //此时为回车按下         

}

[b]3.全选和反选 [/b]

[u]复制代码[/u] 代码如下:

$("#selectall").click(function(){

    if($("input[name='id[]']").is(":checked")){

        $("input[name='id[]']").prop("checked",false);

    }else{

        $("input[name='id[]']").prop("checked",true);

    }

});

[b]4.双击修改 enter保存 table中的td项双击事件 [/b]

[u]复制代码[/u] 代码如下:

$("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()：获取指定元素的前边所有的同级元素。 [b]11.获取子元素[/b] 方式一：>

[u]复制代码[/u] 代码如下:

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'). [b]12.获取第一个元素：[/b]

[u]复制代码[/u] 代码如下:

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

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

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

[b]13.datepicker常用的日期选择插件datepicker [/b]

[u]复制代码[/u] 代码如下:

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

[b]14.日期和时间同时选择的插件datetimepicker [/b]

[u]复制代码[/u] 代码如下:

$('#declare_time').datetimepicker({

                dateFormat: 'yy-mm-dd',

                timeFormat: 'hh:mm',

        });

[b]15.validate正则添加验证方法 [/b]

[u]复制代码[/u] 代码如下:

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

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

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

    }, "只能输入字母数字和下划线");

全部评论(0)

上一篇：详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
下一篇：jQuery插件DataTables分页开发心得体会

资讯排行榜
更多>>