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 相关文章推荐
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 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中通过curl smtp发送邮件
2012/06/05 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
Python如何输出警告信息
2020/07/30 Python
留学自荐信
2013/10/10 职场文书
大二学期个人自我评价
2014/01/13 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
学校计划生育责任书
2015/05/09 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
Golang连接并操作MySQL
2022/04/14 MySQL