jQuery 常见小例汇总

1

//这段代码展示了在用户未输入值时，
//如何在文本类型的input域中保留
//一个默认值
wap_val = [];
$(".swap").each(function(i){
wap_val[i] = $(this).val();
$(this).focusin(function(){
if ($(this).val() == swap_val[i]) {
$(this).val("");
}
}).focusout(function(){
if ($.trim($(this).val()) == "") {
$(this).val(swap_val[i]);
}});});

2

var el = $('#id');
el.html(el.html().replace(/word/ig, ''));

3

$('button.someClass').live('click', someFunction);
//注意，在jQuery 1.4.2中，delegate和undelegate选项
//被引入代替live，因为它们提供了更好的上下文支持
//例如，就table来说，以前你会用
//.live()
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
//现在用
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});

4.如何把已创建的元素动态地添加到DOM中：

var newDiv = $('');
  newDiv.attr('id','myNewDiv').appendTo('body'); 

5

var cloned = $('#somediv').clone(); 

6

if($(element).is(':visible') == 'true') {
  //该元素是可见的
} 

7.JQ中定位

jQuery.fn.center = function () {
  this.css('position','absolute');
  this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
  this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');
  return this;
}
//这样来使用上面的函数：
$(element).center(); 

8.如何把有着某个特定名称的所有元素的值都放到一个数组中：

var arrInputValues = new Array();
$("input[name='table[]']").each(function(){
arrInputValues.push($(this).val());
});

9.在jQuery中如何使用.siblings()来选择同辈元素

$('#nav li').click(function(){
$('#nav li').removeClass('active');
$(this).addClass('active');
});
//替代做法是
$('#nav li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});

10.正反选

var tog = false;
$('a').click(function() {
  $("input[type=checkbox]").attr("checked",!tog);
  tog = !tog;								 
 1/2    1 2 下一页 尾页