锋利的jQuery——19个jQuery 常用片段整理

/**
 * Created by yu on 2016/11/20 0020.
 */
// 1.禁用页面右键菜单
$(function () {
  $(document).on('contextmenu', function (e) {
    return false;
  });
});

// 2.在新窗口打开页面
$(function () {
  // 针对 href=http的超链接
  $('a[href^="http://"]').attr('target', '_blank');
  // 针对rel=external的超链接
  $('a[rel$="external"]').click(function () {
    this.target = '_blank';
  });
});

// 3.输入框文字获取和失去焦点
$(function () {
  $('.text1').val('输入你要搜索的文字');
  textFill($('input.text1'));
  function textFill(input) {
    var originalValue = input.val();
    input.focus(function () {
      if (input.val() === originalValue) {
        input.val('');
      }
    }).blur(function () {
      if (input.val() === '') {
        input.val(originalValue);
      }
    });
  }
});

// 4.返回顶部
$('#goheader').click(function () {
  $('html,body').animate({scrollTop: 0}, 600);
  return false;
});

// 5.获取鼠标位置
$(function () {
  $(document).mousemove(function (e) {
    $('#xy').html('X:' + e.pageX + '| Y:' + e.pageY);
  });
});

// 6.判断元素是否存在
$(function () {
  if ($('#id').length) {
    window.alert('id 元素存在');
  }
});

// 7.点击div也可以跳转
$('div').click(function () {
  window.location = $(this).find('a').attr('href');// window.location可以简单理解为浏览器访问的地址
  return false;
});

// 8.根据浏览器大小添加不同的样式
$(document).ready(function () {
  function checkWindowSize() {
    if ($(window).width() > 1200) {
      $('body').addClass('large');
    } else {
      $('body').removeClass('large');
    }
  }
  $(window).resize(checkWindowSize);// 当浏览器大小改变时再次出发checkWindowsSize
});

// 9.设置div在屏幕中央
$(function () {
  jQuery.fn.center = function () {
    this.css('position', 'absolute');
    this.css('top', ($(window).height() - this.height()) / 2 + $(window).scrollTop() + 'px');// 使用scrollTop来获取元素相对于顶部的偏移量
    this.css('left', ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + 'px');
    return this;
  };
  $('#xy').center();
});

// 10.关闭所有动画效果
$(function () {
  $.fx.off = true;
});

// 11.检测鼠标右键和左键
$(function () {
  $('#xy').mousedown(function (e) {
    window.alert(e.which);// 1为左键，2为中键，3为右键
  });
});

// 12.回车提交表单
$(function () {
  $('input').keyup(function (e) {
    if (e.which === '13') { // 回车键为13
      window.alert('回车提交');
    }
  });
});

// 13.设置全局Ajax参数
$('#load').ajaxStart(function () {
  showLoading();// 显示loading
  disableButton();// 禁用按钮
});
$('#load').ajaxComplete(function () {
  hideLoading();// 隐藏loading
  enableButtons();// 启用按钮
});

// 14.获取选中的下拉框
$(function () {
  $('#mySelect').find('option:selected');
  $('#mySelect option.selected');
});

// 15.切换复选框
$(function () {
  var tog = false;
  $('toggleButton').click(function () {
    $('input[type=checkbox]').attr('checked', !tog);
    tog = !tog;
  });
});

// 16.使用siblings()来选择同辈元素
$('nav li').click(function () {
  $(this).addClass('active')
      .siblings().removeClass('active');
});

// 17.个性化链接，为不同的文件下载链接添加不同样式
$(function () {
  $("a[href$='zip']").addClass('zip');
  $("a[href$='pdf']").addClass('pdf');
  $("a[href$='psd']").addClass('psd');
});

// 18.在一段时间之后自动隐藏或关闭元素
$(function () {
  setTimeout(function () {
    $('#tempElement').fadeOut(600);// 600毫秒的动画
  }, 3000);// 3000毫秒后自动隐藏
  $('#tempElement').slideDown(300).delay(3000).fadeOut(600);// 也可以使用delay()来实现啊
});

// 19.为任何与选择器相匹配的元素绑定事件
// 为table中的td绑定click事件
$(function () {
  $('table').on('click', 'td', function () {
    $(this).toggleClass('hover');
  });
});
巴特西

锋利的jQuery——19个jQuery 常用片段整理

最新文章

热门文章
