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 添加/移除CSS类实现代码
Feb 11 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
js style动态设置table高度
Oct 21 Javascript
js倒计时抢购实例
Dec 20 Javascript
js 求时间差的实现代码
Apr 26 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
用jscript启动sqlserver
2007/06/21 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
js读取本地文件的实例
2017/12/22 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
党员年终民主评议的自我评价
2013/11/05 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
pytorch 实现多个Dataloader同时训练
2021/05/29 Python