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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
node.js爬虫框架node-crawler初体验
Oct 29 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初学者头疼问题总结
2006/10/09 PHP
php向js函数传参的几种方法
2014/08/10 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
Python深入学习之对象的属性
2014/08/31 Python
python动态性强类型用法实例
2015/05/09 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
Python实现简单字典树的方法
2016/04/29 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
Python能做什么
2020/06/02 Python
python 基于opencv去除图片阴影
2021/01/26 Python
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
建筑管理专业求职信
2014/07/28 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
给老师的感谢信
2015/01/20 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
python_tkinter事件类型详情
2022/03/20 Python
基于Python实现西西成语接龙小助手
2022/08/05 Golang