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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
JavaScript 学习笔记(十一)
Jan 19 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 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分页函数
2006/10/09 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
python基础教程之缩进介绍
2014/08/29 Python
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python实现的科学计算器功能示例
2017/08/04 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
举例说明类变量和实例变量的区别
2016/06/30 面试题
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
医院党建工作总结2015
2015/05/26 职场文书
环保宣传语大全
2015/07/13 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书