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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
php数组的一些常见操作汇总
2011/07/17 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
jquery select操作的日期联动实现代码
2009/12/06 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
JavaScript表单验证实现代码
2017/05/22 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
Python实现端口检测的方法
2018/07/24 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
python多线程下信号处理程序示例
2019/05/31 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
Python安装whl文件过程图解
2020/02/18 Python
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
德国购买健身器材:AsVIVA
2017/08/09 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
大班开学家长寄语
2014/04/04 职场文书
设计师求职信
2014/07/01 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
升职感谢信
2015/01/22 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书