管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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));

　　}, "只能输入字母数字和下划线");

教程首页 更多教程