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 相关文章推荐
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 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入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
Django视图和URL配置详解
2018/01/31 Python
Python logging模块handlers用法详解
2020/08/14 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
端午节粽子促销活动方案
2014/02/02 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
父母寄语大全
2014/04/12 职场文书
医院科室评语
2015/01/04 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python
Win11查看设备管理器
2022/04/19 数码科技
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers