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

所属分类: 网络编程 / JavaScript 阅读数: 1449
收藏 0 赞 0 分享

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

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多