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 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
javascript call和apply方法
2008/11/24 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
jquery中this的使用说明
2010/09/06 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
vue实现循环切换动画
2018/10/17 Javascript
ant design实现圈选功能
2019/12/17 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
利用nohup来开启python文件的方法
2019/01/14 Python
django的ORM模型的实现原理
2019/03/04 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
五年级英语教学反思
2014/01/31 职场文书
成人继续教育实施方案
2014/03/01 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
公证书
2019/04/17 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
详解JS数组方法
2021/11/20 Javascript
Python学习之迭代器详解
2022/04/01 Python
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers