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 相关文章推荐
ExtJS下grid的一些属性说明
Dec 13 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
Vue官网todoMVC示例代码
Jan 29 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 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
PHP脚本的10个技巧(8)
2006/10/09 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
smarty缓存用法分析
2014/12/16 PHP
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
Python实现删除文件但保留指定文件
2015/06/21 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
导致python中import错误的原因是什么
2020/07/01 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
四好少年事迹材料
2014/01/12 职场文书
参观考察邀请函范文
2014/01/29 职场文书
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS