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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
json数据格式常见操作示例
Jun 13 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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判断变量的函数
2012/04/24 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
php简单复制文件的方法
2016/05/09 PHP
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
Python实现批量下载图片的方法
2015/07/08 Python
详解Django的CSRF认证实现
2018/10/09 Python
python标记语句块使用方法总结
2019/08/05 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
python连接PostgreSQL过程解析
2020/02/09 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
JavaScript实现音乐播放器
2022/08/14 Javascript
box-shadow单边阴影的实现
2023/05/21 HTML / CSS