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 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 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
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
php微信开发之图片回复功能
2018/06/14 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
vue-video-player 断点续播的实现
2021/02/01 Vue.js
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
用python批量移动文件
2021/01/14 Python
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
音乐幼师求职信
2014/07/09 职场文书
南极大冒险观后感
2015/06/05 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
python 安全地删除列表元素的方法
2022/03/16 Python
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js