jQuery 常用代码集锦(必看篇)


Posted in Javascript onMay 16, 2016

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

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

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

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

3. 判断一个图片是否加载完全

$('#theGBin1Image').attr('src', 'image.jpg').load(function() {
alert('This Image Has Been Loaded');
});

4. 判断cookie是否激活或者关闭

var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
if(!cookiesEnabled)
{
 //cookies have not been enabled
}

5. 强制过期cookie

var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });

6. 在表单中禁用“回车键”,表单的操作中需要防止用户意外的提交表单

$("#form").keypress(function(e) {
 if (e.which == 13) {
 return false;
 }
});

7. 清除所有的表单数据

function clearForm(form) {
 // iterate over all of the inputs for the form
 // element that was passed in
 $(':input', form).each(function() {
 var type = this.type;
 var tag = this.tagName.toLowerCase(); // normalize case
 // it's ok to reset the value attr of text inputs,
 // password inputs, and textareas
 if (type == 'text' || type == 'password' || tag == 'textarea')
  this.value = "";
 // checkboxes and radios need to have their checked state cleared
 // but should *not* have their 'value' changed
 else if (type == 'checkbox' || type == 'radio')
  this.checked = false;
 // select elements need to have their 'selectedIndex' property set to -1
 // (this works for both single and multiple select elements)
 else if (tag == 'select')
  this.selectedIndex = -1;
 });
};

8.禁止多次递交表单

$(document).ready(function() {
 $('form').submit(function() {
 if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
  jQuery.data(this, "disabledOnSubmit", { submited: true });
  $('input[type=submit], input[type=button]', this).each(function() {
  $(this).attr("disabled", "disabled");
  });
  return true;
 }
 else
 {
  return false;
 }
 });
});

9. 自动将数据导入selectbox中

$(function(){
 $("select#ctlJob").change(function(){
 $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
  var options = '';
  for (var i = 0; i < j.length; i++) {
  options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
  }
  $("select#ctlPerson").html(options);
 })
 })
})

10. 创建一个嵌套的过滤器

.filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素

11. 使用has()来判断一个元素是否包含特定的class或者元素

//jQuery 1.4.* includes support for the has method. This method will find 
//if a an element contains a certain other element class or whatever it is 
//you are looking for and do anything you want to them. 
$("input").has(".email").addClass("email_icon");

12. 使用jQuery切换样式

//Look for the media-type you wish to switch then set the href to your new style sheet 
$('link[media='screen']').attr('href', 'Alternative.css');

13. 如何正确使用ToggleClass

//Toggle class allows you to add or remove a class 
//from an element depending on the presence of that 
//class. Where some developers would use: 
a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton'); 
//toggleClass allows you to easily do this using 
a.toggleClass('blueButton');

14. 使用jQuery来替换一个元素

$('#thatdiv').replaceWith('fnuh');

15.绑定一个函数到一个事件

$('#foo').bind('click', function() { 
 alert('User clicked on "foo."'); 
});

16. 使用jQuery预加载图片

jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } }; 
// Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

17. 设置任何匹配一个选择器的事件处理程序

$('button.someClass').live('click', someFunction);
 //Note that in jQuery 1.4.2, the delegate and undelegate options have been
 //introduced to replace live as they offer better support for context
 //For example, in terms of a table where before you would use..
 // .live()
 $("table").each(function(){
 $("td", this).live("hover", function(){
 $(this).toggleClass("hover");
 });
 });
 //Now use..
 $("table").delegate("td", "hover", function(){
 $(this).toggleClass("hover");
});

18. 自动的滚动到页面特定区域

jQuery.fn.autoscroll = function(selector) {
 $('html,body').animate(
 {scrollTop: $(selector).offset().top},

 );
}
//Then to scroll to the class/area you wish to get to like this:
$('.area_name').autoscroll();

19.检测各种浏览器

Detect Safari (if( $.browser.safari)),
Detect IE6 and over (if ($.browser.msie && $.browser.version > 6 )),
Detect IE6 and below (if ($.browser.msie && $.browser.version <= 6 )),
Detect FireFox 2 and above (if ($.browser.mozilla && $.browser.version >= '1.8' )

20.限制textarea的字符数量

jQuery.fn.maxLength = function(max){
 this.each(function(){
 var type = this.tagName.toLowerCase();
 var inputType = this.type? this.type.toLowerCase() : null;
 if(type == "input" && inputType == "text" || inputType == "password"){
  //Apply the standard maxLength
  this.maxLength = max;
 }
 else if(type == "textarea"){
  this.onkeypress = function(e){
  var ob = e || event;
  var keyCode = ob.keyCode;
  var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
  return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
  };
  this.onkeyup = function(){
  if(this.value.length > max){
   this.value = this.value.substring(0,max);
  }
  };
 }
 });
};
//Usage:
$('#gbin1textarea').maxLength(500);

21.使用jQuery克隆元素

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

22. 元素屏幕居中

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;
}
//Use the above function as: $('#gbin1div').center();

23 .简单的tab标签切换

jQuery('#meeting_tabs ul li').click(function(){
  jQuery(this).addClass('tabulous_active').siblings().removeClass('tabulous_active');
  jQuery('#tabs_container>.pane:eq('+jQuery(this).index()+')').show().siblings().hide(); 
 })

<div id="meeting_tabs">
    <ul>
      <li class="tabulous_active"><a href="#" title="">进行中</a></li>
      <li><a href="#" title="">未开始</a></li>
      <li><a href="#" title="">已结束</a></li>
      <li><a href="#" title="">全部</a></li>
     </ul>
 <div id="tabs_container">
   <div class="pane"  >1</div>
   <div class="pane"  >2</div>
   <div class="pane"  >3</div>
   <div class="pane"  >4</div>
 </div>
</div>

以上这篇jQuery 常用代码集锦(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 #Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 #Javascript
javascript实现起伏的水波背景效果
May 16 #Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 #Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 #Javascript
js流动式效果显示当前系统时间
May 16 #Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 #Javascript
You might like
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
Python字符编码与函数的基本使用方法
2017/09/30 Python
python实现名片管理系统
2018/11/29 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
HTML的form表单和django的form表单
2019/07/25 Python
如何在python中实现随机选择
2019/11/02 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
Python pandas如何向excel添加数据
2020/05/22 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
VC++笔试题
2014/10/13 面试题
服装销售人员求职自我评价
2013/09/26 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
节约用水的口号
2014/06/20 职场文书
国庆宣传标语
2014/06/30 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
劳模事迹材料范文
2014/12/24 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript