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中的ajax再封装,简化操作示例
Feb 12 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
Vue 同步异步存值取值实现案例
Aug 05 Javascript
vue组件入门知识全梳理
Sep 21 Javascript
vue实现抽屉弹窗效果
Nov 15 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通过COM使用ADODB的简单例子
2006/12/31 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
js 文本滚动效果的实例代码
2013/08/17 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
Vue.set 全局操作简单示例
2019/09/19 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
Python 2与Python 3版本和编码的对比
2017/02/14 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
python 的topk算法实例
2020/04/02 Python
Python如何实现定时器功能
2020/05/28 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
工作自我评价分享
2013/12/01 职场文书
工作会议方案
2014/05/21 职场文书
小学运动会演讲稿
2014/08/25 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
MYSQL 运算符总结
2021/11/11 MySQL