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


Posted in Javascript onJanuary 13, 2015

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));

    }, "只能输入字母数字和下划线");
Javascript 相关文章推荐
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
详解Node.js串行化流程控制
May 04 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
js对象基础实例分析
Jan 13 #Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 #Javascript
js使用心得分享
Jan 13 #Javascript
js查找节点的方法小结
Jan 13 #Javascript
使用js画图之画切线
Jan 12 #Javascript
使用js画图之饼图
Jan 12 #Javascript
javacript使用break内层跳出外层循环分析
Jan 12 #Javascript
You might like
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python中的类学习笔记
2014/09/23 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
师范生自荐信范文
2013/10/06 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
终止劳动合同通知书
2015/04/16 职场文书
女方离婚起诉书
2015/05/18 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏