jQ常用方法
$(document).ready(function () {
/*禁用右键菜单
* 所有元素都有contextmenu事件，通过冒泡的方式可以触发到最外围的元素
* 直接给document元素设置该事件可以阻止右键菜单事件
* */
$(document).on('contextmenu', function () {
return false;
});
//给a元素设置新建窗口打开
$('a[href^="http"]').attr('target', '_blank');
//或者rel="external"
$('a[rel$="external"]').click(function () {
this.target = '_blank';
});
//从性能上来讲，设置attr会好过于添加事件
/*判断浏览器类型
*目前来说由于浏览器更新换代很快，加上移动端的适配，导致判断浏览器的版本和类型成了一个很繁琐的代码集合
*特别是ios端，由于他系统的更新导致很多以前判断的条件全都变了，这里就不写了
*/
//输入框获取焦点时删除提示文字，失去焦点如果未输入内容重新设置提示文字
var $input = $('input').val("提示文字");
textFill($input);
function textFill(input) {
var originalValue = input.val(); //获取提示文字
input.focus(function () {
//当输入框获取到焦点时判断当前的val是否和初始的originalValue相同，相同则将val设置为空
if ($.trim(input.val()) == originalValue) { //trim删除首尾空格
input.val('');
};
}).blur(function () {
//失去焦点时如果输入框内容为空则重新恢复原来的提示
if ($.trim(input.val()) == '') {
input.val(originalValue);
};
});
};
//当然我们也可以使用placeholder="提示文字"的html占位符属性
//返回元素顶部动画
jQuery.fn.scrollTo = function (speed) {
var targetOffset = $(this).offset().top;
$('html,body').stop().animate({
scrollTop: targetOffset
}, speed);
return this;
};
$('#top').click(function () {
$('body').scrollTo(500);
return false;
});
/*
* 给jq添加一个返回顶部的方法，获取到我们body元素的距离html文档顶部的距离，然后设置动画
* 这样可以设置任何元素的顶部动画
* 需要注意的是，如果没有设置html和body的css初始化，此时的body距离顶部的距离并不是0
*/
//获取鼠标的位置
$(document).mousemove(function (e) {
$('#xy').html('x:' + e.pageX + 'y:' + e.pageY);
});
//判断元素是否存在
if ($('#id').length) {
//存在的话
}
/* 由于jq的连缀返回的是jq对象，所以if这个$('#id')永远是true，
* 哪怕元素不存，只有判断这个jq对象的length才是有效的
*/
//点击a元素外面的div也可以实现跳转
$('div').click(function () {
window.location = $(this).find('a').attr('href');
return false;
});
//根据浏览器大小添加不同的样式
function checkWindowSize() {
if ($(window).width() > 1200) {
$('body').css('background-color', '#999');
} else {
$('body').css('backgroundColor', '');
};
};
$(window).resize(checkWindowSize);
//注意，第一次打开浏览器页面并不会出发resize事件，所以还需要手动出发一次checkWindowSize方法
//设置div在屏幕中央
jQuery.fn.center = function () {
this.css('position', 'absolute');
this.css('top', ($(window).height() - this.outerHeight()) / 2 + $(window).scrollTop() + 'px');
this.css('left', ($(window).width() - this.outerWidth()) / 2 + $(window).scrollLeft() + 'px');
return this;
};
var $xy = $('#xy').center();
$(window).scroll(function () {
setTimeout(function () {
$xy.center();
}, 60);
});
/* 由于不同的浏览器他的scroll高度宽度获取有可能是body或者是html，这就导致需要一个判断
* 但是使用windw获取scroll所有浏览器都兼容
* outerHeight、outerWidth获取的元素宽高是包含padding和boder的
*/
//创建自定义选择器
$.extend($.expr[':'], {
moreThen500px: function (a) {
return $(a).width() > 500;
}
});
$('div:moreThen500px').click(function () {
//操作
});
/* 通过extend方法合并jq的选择器对象$.expr[':']
* 然后第二个参数匿名对象里通过键值对的方式添加对应的选择器，然后值为一个函数，函数返回布尔值true/false
* a这个参数为对应的dom对象
* 这里表示获取width大于500px的元素
*/
//关闭所有动画效果
jQuery.fx.off = true;
//检测鼠标的左右键
$(document).mousedown(function (e) {
switch (e.which) {
case 1:
console.log("左键");
break;
case 2:
console.log("中键");
break;
case 3:
console.log("右键");
break;
};
});
//回车提交表单
$('input').keyup(function (e) {
if (e.which === 13) {
console.log('提交表单');
}
});
// 就是判断按键回弹后他的键码是否是回车的键码13
//设置全局Ajax参数
$(document).ajaxStart(function () {
//请求前的操作
});
/* ajax有如下几个全局参数
* ajaxStart：ajax请求开始前
* ajaxSend：ajax请求时
* ajaxSuccess：ajax获取数据后
* ajaxError：ajax请求发生错误后
* ajaxComplete：ajax请求完成时
* ajaxStop：ajax请求停止后
*
* 如果想让某个ajax请求不会被全局设置影响，在ajax方法的参数对象里加入global：false
*/
//获取选中的下拉选项
$('#someElement').find('');
$('#someElement option:selected');
//通过:selected选择器获取
//切换复选框
var tog = false;
$('button').click(function () {
$('input[type="checkbox"]').attr('checked', !tog);
console.log(typeof $('input[type="checkbox"]').attr('checked'), 1)
// $('input[type="checkbox"]').prop('checked', !tog); //推荐使用
tog = !tog;
});
/* 通过属性选择器获取到对应的复选框，然后设置checked属性为true即可勾选，false取消勾选
* 然而使用attr是以前的操作，根据jq的逻辑，设置布尔值的话推荐使用prop()方法
* 原因是attr获取的是静态的attribute属性值，也就是行内属性，而prop获取的是property属性
* property属性才是实时的js对象属性，"checked"、"selected"或"disabled"这些都是要使用prop()方法的
* 需要注意的是attr方法获取到的checked、selected、disabled的值如果是未勾选则返回undefined
* 勾选了就返回他们本身，并且为字符串，比如checked勾选就返回string类型的checked字符串
*/
//使用siblings()获取同辈元素
$('#nav li').click(function () {
$(this).addClass('selected')
.siblings().removeClass('selected');
});
//通过使用该方法可以省去很多事情，这种方式也常用于nav导航添加选中样式
//个性化链接
$('a[href$="pdf"]').addClass('pdf');
$('a[href$="zip"]').addClass('zip');
$('a[href$="psd"]').addClass('psd');
//使用属性选择器添加对应的链接样式，但是个人还是推荐直接使用css的属性选择器，那个比较正统一些，从性能上讲也更符合规矩
//在一段时间后自动隐藏或关闭元素
$('#div').slideUp(300)
.delay(3000).fadeIn(400);
// 使用delay()延迟动画，这样就可以少些几行setTimeout方法了
//使用console来记录日志
jQuery.log = jQuery.fn.log = function (msg) {
if (console) {
console.log('%s: %o', msg, this);
};
return this;
};
$('div').log('div');
jQuery.log('ddd')
/* 可能用处不大，个人更偏向直接写console.log()
* %s表示string类型占位符，对应msg参数
* %o表示object类型占位符，对应this参数
*/
//为任何与选择器相匹配的元素绑定事件，包括后来新建的元素
$('table').on('click', function () {
$(this).toggleClass('hover');
});
//使用on方法绑定事件
//使用css钩子
$.cssHooks['borderRadius'] = {
get: function (elem, computed, extra) {
var css = elem.currentStyle ? elem.currentStyle : window.getComputedStyle(elem, null);
var getCss = css['borderRadius'];
if (!getCss) { //火狐浏览器
try {
var top_left = css['border-top-left-radius'];
var top_right = css['border-top-right-radius'];
var bottom_left = css['border-bottom-left-radius'];
var bottom_right = css['border-bottom-right-radius'];
if (top_left === top_right === bottom_left === bottom_right) {
getCss = top_left;
} else if (top_left === bottom_right && top_right === bottom_left) {
getCss = top_left + ' ' + top_right;
} else if (top_right === bottom_left) {
getCss = top_left + ' ' + top_right + ' ' + bottom_right;
} else {
getCss = top_left + ' ' + op_right + ' ' + bottom_left + ' ' + bottom_right;
};
} catch (e) {
console.log('获取borderRadius发生错误：', e);
}
};
return getCss;
},
set: function (elem, value) {
elem.style['-webkit-border-radius'] = value;
elem.style['-moz-border-radius'] = value;
elem.style['borderRadius'] = value;
}
};
$('div').css('borderRadius', '5px');
/* 使用$.cssHooks可以自定义获取css的属性方法，他是一个对象，里面有get和set两个方法，其中get是获取，set为设置
* get方法有三个参数，其中elem为对应的dom元素，其他两个暂时不清楚有什么用途
* set方法有两个参数，elem为dom元素，value为css设置值
* 由于火狐浏览器无法通过borderRadius直接获取到值，火狐返回的是空字符串，所以需要自己手动适配,这里就是使用钩子的意义
* 设置的时候我们也可以加上前缀来达到兼容的效果
*/
//$.proxy()的使用
//jq使用回调方法的缺点就是this指向已经不是原来的对象了
//例子：
$('#panel').fadeIn(function () {
$('#panel button').click(function () {
$(this).fadeOut();
});
});
//这个方法导致button元素click后隐藏了，我们实际上是要让#panel元素隐藏
//使用$.proxy()
$('#panel').fadeIn(function () {
$('#panel button').click($.proxy(function () {
$(this).fadeOut();
}));
});
//使用$.proxy()传入一个函数，该函数的this将指向$('#panel').fadeIn()的作用域
//限制text-area域中的字符个数
jQuery.fn.maxLength = function (max) {
this.each(function () {
//获取元素名称
var type = this.tagName.toLowerCase();
//获取元素类型
var inputType = this.type ? this.type.toLowerCase() : null;
//如果元素是input元素，type为text或者是password
if (type == "input" && inputType == "text" || inputType == "password") {
//input元素直接使用maxLength属性
this.maxLength = max;
} else if (type == "textarea") {
//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);
};
};
};
});
return this;
};
$('#mytextarea').maxLength(10);
/* keydown：当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件；
* keypress：当用户按下键盘上的字符键时触发，如果按住不让的话，会重复触发此事件；
* keyup：当用户释放键盘上的字符键时触发。
*
* keypress通过return false可以阻止文字的输入，但是只能阻止英文输入，中文有输入法，无法阻止
* document.selection为ie10及以下使用的，他的作用是获取光标框选的文字，然后和this.selectionStart这些都是用来判断用户是否框选了文字
* 如果当前的value的length大于等于max最大字符，并且目前按下的按键是字符按键(>50)，或者是空格32，回车13，其他0,
* 然后ctrl和alt键如果按了，需要求反
* 如果勾选了文字，求反后为false，因为&&的原因，整个都返回false，然后加上!()求反，return true，文字依旧可以输入
* 如果没有勾选，且文字因为到了max上限，那么return false
*
* keyup就简单了，输入后，如果文字多了，就substring方法截取
*/
//本地存储
//使用jq的插件，localstorage
//下载地址：https://plugins.jquery.com/storageapi/
//api地址：https://github.com/julien-maurel/jQuery-Storage-API
//从元素内容中删除html元素，转为纯文本
$.fn.stripHtml = function () {
var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
this.each(function () {
$(this).html($(this).html().replace(regexp, ''));
});
return $(this);
};
//扩展string对象的方法
$.extend(String.prototype, {
isPositiveInteger: function () { //是否是正整数
return (new RegExp(/^[1-9]\d*$/).test(this));
},
isInteger: function () { //是否为整数
return (new RegExp(/^\d+$/).test(this));
},
isNumber: function (value, element) {
return (new RegExp(/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/).test(this));
},
trim: function () { //删除首尾空格
return this.replace(/(^\s*)|(\s*$)|\r|\n/g, '')
},
trans: function () { //将<>"三个字符的转义字符转为字符
return this.replace(/$lt;/g, '<').replace(/>/g, '>').replace(/"/g, '"');
},
replaceAll: function (os, ns) { //将os的文字替换成ns文字
return this.replace(new RegExp(os, 'gm'), ns);
},
skipChar: function (ch) { //删除从开头的ch字符
if (!this || this.length === 0) { return ''; }
if (this.charAt(0) === ch) { return this.substring(1).skipChar(ch); }
return this;
},
isValidPwd: function () { //是否为有效的密码，也就是：_a-zA-Z0-9这些字符以内，其他不行
return (new RegExp(/^([_]|[a-zA-Z0-9]){6,32}$/).test(this));
},
isValidMail: function () { //是否为有效的邮箱格式
return (new RegExp(/^\w+((-\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(this.trim()));
},
isSpaces: function () { //字符是否为空
var ch = null;
for (var i = 0; i < this.length; i += 1) {
ch = this.charAt(i);
if (ch != ' ' && ch != '\n' && ch != '\t' && ch != '\r') { return false; }
}
return true;
},
isPhone: function () { //是否为电话号码
return (new RegExp(/(^([0-9]{3,4}[-])?\d{3,8}(-\d{1,6})?$)|(^\([0-9]{3,4}\)\d{3,8}(\(\d{1,6}\))?$)|(^\d{3,8}$)/).test(this));
},
isUrl: function () { //是否为url
return (new RegExp(/^[a-zA-Z0-9]+:\/\/([a-zA-Z0-9\-\.]+)([-\w.\/?%&=:]*)$/).test(this));
},
isExternalUrl: function () { //是否为外部url
return this.isUrl() && this.indexOf('://' + document.domain) == -1;
}
});
});版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
评论