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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
简单谈谈json跨域
Mar 13 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 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实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
从零开始搭建一个react项目开发
2018/02/09 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python定时任务 sched模块用法实例
2019/11/04 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
python 如何调用 dubbo 接口
2020/09/24 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
致铅球运动员广播稿精选
2014/01/12 职场文书
撤诉申请怎么写
2015/05/19 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis