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 相关文章推荐
Knockout visible绑定使用方法
Nov 15 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
JS实现简易计算器
Feb 14 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
JavaScript实现点击图片换背景
Nov 20 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投票程序源码
2007/03/11 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python中format()函数的简单使用教程
2018/03/14 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
应征英语教师求职信
2013/11/27 职场文书
道路交通安全实施方案
2014/03/12 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
研究生导师推荐信
2014/09/06 职场文书
个人融资协议书
2014/10/02 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
MySQL transaction事务安全示例讲解
2022/06/21 MySQL
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL