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螺旋动画效果的具体实例
Nov 15 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
js实现扫雷源代码
Nov 27 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
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
php实现微信发红包功能
2018/07/13 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
Python是编译运行的验证方法
2015/01/30 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python应用库大全总结
2018/05/30 Python
python3实现windows下同名进程监控
2018/06/21 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
Born鞋子官网:Born Shoes
2017/04/06 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
旅行社优秀创业计划书
2014/08/16 职场文书
药店促销活动策划方案
2014/08/24 职场文书
校长创先争优承诺书
2014/08/30 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android