60个很实用的jQuery代码开发技巧收集

2020-05-19 07:36:18易采站长站整理

$(this).html(
$(this).html().replace(regexp,"")
);
});
return $(this);
}
})(jQuery);
//usage:
$('p').stripHtml();

36. 使用closest来得到父元素

$('#searchBox').closest('div');

37. 使用firebug来记录jQuery事件

// Allows chainable logging
// Usage: $('#someDiv').hide().log('div hidden').addClass('someClass');
jQuery.log = jQuery.fn.log = function (msg) {
if (console){
console.log("%s: %o", msg, this);
}
return this;
};

38. 点击链接强制弹出新窗口

jQuery('a.popup').live('click', function(){
newwindow=window.open($(this).attr('href'),'','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
});

39. 点击链接强制打开新标签页

jQuery('a.newTab').live('click', function(){
newwindow=window.open($(this).href);
jQuery(this).target = "_blank";
return false;
});

40. 使用siblings()来处理同类元素

// Rather than doing this
$('#nav li').click(function(){
$('#nav li').removeClass('active');
$(this).addClass('active');
});
// Do this instead
$('#nav li').click(function(){
$(this).addClass('active')
.siblings().removeClass('active');
});

41. 选择或者不选页面上全部复选框

var tog = false; // or true if they are checked on load
$('a').click(function() {
$("input[type=checkbox]").attr("checked",!tog);
tog = !tog;
});

42. 基于输入文字过滤页面元素

//If the value of the element matches that of the entered text
//it will be returned
$('.gbin1Class').filter(function() {
return $(this).attr('value') == $('input#gbin1Id').val() ;
})

43. 取得鼠标的X和Y坐标

$(document).mousemove(function(e){
$(document).ready(function() {
$().mousemove(function(e){
$('#XY').html("Gbin1 X Axis : " + e.pageX + " | Gbin1 Y Axis " + e.pageY);
});
});

44. 使得整个列表元素(LI)可点击

$("ul li").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});


<UL>
<LI><A href="#">GBin1 Link 1</A></LI>
<LI><A href="#">GBin1 Link 2</A></LI>
<LI><A href="#">GBin1 Link 3</A></LI>