我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
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;
}
});
});
0
评论(0)