15个jquery常用方法、小技巧分享

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));
    }, "只能输入字母数字和下划线");

(0)

相关推荐

  • jQuery前端开发35个小技巧

    废话不说 直接代码,有问题可以一起交流 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the comment fields) $(docu

  • jQuery开发者都需要知道的5个小技巧

    1.禁用右键菜单 复制代码 代码如下: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2.让字体闪烁 复制代码 代码如下: jQuery.fn.flash = function( color, duration ) { var current = this.css( 'color' ); this.animate( { color: 'rgb

  • Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)

    比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元素是否为空.替换元素.延迟加载.验证元素是否存在于Jquery集合中.使DIV可点击.克隆对象.使元素居中.计算元素个数.使用Google主机上的Jquery类库.禁用Jquery效果.解决Jquery类库与其他Javascript类库冲突问题. 具体如下: 1. 禁止右键点击 复制代码 代码如下: $(document).ready(

  • 七个不允许错过的jQuery小技巧

    jQuery是一款轻量级的JavaScript库,是最流行的客户端HTML脚本之一,它在WEB设计师和开发者中非常的有名,并且有非常多有用的插件和技术. 本文我们将为大家分享一些jQuery小技巧: 一.在新窗口打开链接 用下面的代码,你点击链接即可在新窗口打开: $(document).ready(function() { //select all anchor tags that have http in the href //and apply the target=_blank $("a

  • 前端开发必知的15个jQuery小技巧

    下面这些简单的小技巧能够帮助你玩转jQuery. 1.返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); <!-- Create an anchor tag --> <a class=

  • 几个比较经典常用的jQuery小技巧

    > 唔,这个主题挂的时间也够长的了,也该换换了,到时候找找看有没有合胃口的主题. > 话说,最近有点偏向 PHP 去了,我发现贪多嚼不烂,所以就又回到主题咯,(*^__^*) 嘻嘻. 1. Jquery 库的调用: > 呵呵,相信很多童鞋早就会了,不过还是得提一下,忘记就杯具咯. > 第一个是常用的 Google 托管处的 jQuery 库地址. > 而第二个则是 jQuery 官方网站的库地址,随时获取最新版,嘿嘿. 复制代码 代码如下: <script src=&q

  • WEB前端开发都应知道的jquery小技巧及jquery三个简写

    一个简单技巧的集合,帮你提升 jQuery 技能.目前小编给大家整理了14个jquery小技巧. 目录结构 1回到顶部按钮 2预加载图片 3检查图片是否加载完毕 4自动修复损坏的图片 5Hover 上的 Class 开关 6禁用 input 字段 7停止链接加载 8淡入淡出/滑动开关 9简单的折叠效果 10将两个 Div 设为相同高度 11在新窗口打开外部链接 12找到文本元素 13切换可视与隐藏的触发器 下面给大家介绍每个小技巧的具体含义. 1.回到顶部按钮 通过使用 jQuery 中的 an

  • jQuery中的一些小技巧

    JQ使用过程中,一些小技巧: 1.is()方法 根据选择器.元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true.一些小应用如下: <ul> <li>list <strong>item 1</strong></li> <li><span>list item 2</span></li> <li>list item 3</li>

  • jquery操作复选框(checkbox)的12个小技巧总结

    1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项$('input:checkbox').each(function() {        if ($(this).attr('che

  • jQuery提交多个表单的小技巧

    <script type="text/javascript"> $(function(){ $("#btnSubmit").click(function(){ $("form[name='form1']").submit(); $("form[name='form2']").submit(); }) }) </script> <form name = "form1" actio

随机推荐