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 相关文章推荐
js获取网页高度(详细整理)
Dec 28 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 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之生成GIF动画的实现方法
2013/06/07 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
浅析用prototype定义自己的方法
2013/11/14 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python获取任意xml节点值的方法
2015/05/05 Python
python 远程统计文件代码分享
2015/05/14 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
python实现海螺图片的方法示例
2019/05/12 Python
python实现PCA降维的示例详解
2020/02/24 Python
keras.layer.input()用法说明
2020/06/16 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
HTML5标签使用方法详解
2015/11/27 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
自我反省检讨书
2014/01/23 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
租房协议书样本
2014/08/20 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
个人政治思想总结
2015/03/05 职场文书
政府会议通知范文
2015/04/15 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android