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 相关文章推荐
jquery 学习之二 属性(类)
Nov 25 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
js中常用的Math方法总结
Jan 12 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
element-ui封装一个Table模板组件的示例
Jan 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批量生成随机用户名
2008/07/10 PHP
PHP 错误之引号中使用变量
2009/05/04 PHP
php中autoload的用法总结
2013/11/08 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
javascript中clone对象详解
2014/12/03 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
python实现字符串完美拆分split()的方法
2019/07/16 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
公务员培训心得体会
2013/12/28 职场文书
高一物理教学反思
2014/01/24 职场文书
狼和鹿教学反思
2014/02/05 职场文书
简历里的自我评价范文
2014/02/24 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
老乡会致辞
2015/07/28 职场文书