15个jquery常用方法、小技巧分享
15个jquery常用方法、小技巧分享
发布时间:2016-12-30 来源:查字典编辑
摘要:1.获取td的行标和列标复制代码代码如下:$(this).prop('cellIndex')2.判断是否是回车按下复制代码代码如下:varm...

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教程学习
编程开发子分类