- 浏览: 192173 次
- 性别:
- 来自: 成都
最新评论
-
Coande:
谢谢,这个很强大。
json转树状结构(js) -
prince_of_:
楼主,有一点我想提一下,你所说的三个步骤与new有一点不同使用 ...
理解js中的原型链,prototype与__proto__的关系 -
xuxiaoyinliu:
有帮助,谢谢
理解js中的原型链,prototype与__proto__的关系 -
huangyali2:
excanvas.js没有实现canvas的clearRect ...
IE下使用excanvas.js的注意事项 -
chried:
看了这个总算明白原型链了的
理解js中的原型链,prototype与__proto__的关系
var a = b && 1;
//相当于
if (b) {
a = 1
}
var a = b || 1; //适合用法方法参数的默认值
//相当于
if (b) {
a = b;
} else {
a = 1;
}
jQuery 常用方法
1. 模糊匹配:
查找“div_1”,“div_2”,“div_3”,“div_4”......
$("div[id^=div_']"),
2. 字符串截取
var abc = "1234_456";
abc.substring(abc.indexOf("_")); _456
abc.substring(0,abc.lastIndexOf("_")); 1234
3. 匹配对应元素
$("#BigImage a:eq("+$("#Scroll li").index(this)+")").show().siblings("#BigImage a").hide();
4. js判断对象是否存在
if (typeof(your_var) == "undefined") || your_var == null) {
alert("your_var is undefined");
}
5. scrollTop滑动
方法一: window.scrollTo(0,0);
方法二:$('html,body').delay(2000).animate({scrollTop: $('#aaa').offset().top}, 1000);
6. 修正ie6最大宽度和最大高度的bug
//修正IE6最大宽度和最大宽度高度的Bug start
function ie6Max(n){
var maxWidth = parseInt($(this).css('max-width'));
var maxHeight = parseInt($(this).css('max-height'));
if($(this).height() > maxHeight || $(this).width() > maxWidth){
var wh = $(this).width() / $(this).height();
if( $(this).height() > $(this).width()){
$(this).height(maxHeight);
$(this).width($(this).height() * wh);
}else{
$(this).width(maxWidth);
$(this).height($(this).width() / wh);
};
}
}
//修正IE6最大宽度和最大宽度高度的Bug end
7. 点击网页空白处隐藏某个div
$(document).click(function(e){
if(!$(e.target).closest("#Extend").is("div") && !$(e.target).closest(".region").is("div")){
$("#Extend").hide();
}
});
8. 获取scrollTop
纯js
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
jQuery
var scrollTop1 = $(this).scrollTop()
9. 判断IE6
纯js的方法:
var isIE6 = !-[1,] && !window.XMLHttpRequest;
html注释方法
<!--[if IE 6]> some codes... <![endif]-->
jQuery方法
if ($.browser.msie && (parseInt($.browser.version) <= 7)){
some codes...
}
10. 悬浮框效果
<script type="text/javascript">
//悬浮框效果
$(function(){
$(window).bind('scroll resize', function(){
var scrollTop = $(this).scrollTop();
var aaa = scrollTop - $("#proListTop").offset().top + 20;
if ($("#proListTop").offset().top < ScrollTop - 60) {
$("#compareBar").css("top",aaa);
}else{
$("#compareBar").css("top","60px");
}
});
});
</script>
11. 转移和复制div的内容
$('#bbb').append($('#aaa').clone()); 把aaa中的内容复制到bbb中去
$('#aaa').appendTo($('#bbb')); 把aaa中的内容剪切到bbb中去
12. 关闭输入框自动提示
autocomplete="off"
13. 图片最大宽度和最大高度限制
var maxWidth = parseInt($(this).css('max-width'));
var maxHeight = parseInt($(this).css('max-height'));
if($(this).height() > maxHeight || $(this).width() > maxWidth){
if( $(this).height()%$(this).width() > 0.752){
$(this).height(maxHeight);
}else{
$(this).width(maxWidth);
};
}
14. 图片加载的loading
$(function(){
$.fn.LoadingImg = function(){
return this.each(function(){
var that = this;
var src=$(this).attr("src2");
var img=new Image();
img.src=src;
var loading=$("<img alt=\"加载中...\" class=\"loadingImg\" title=\"图片加载中...\" src=\"loading.gif\" />");
$(this).after(loading);
$(this).hide();
$(img).load(function(){
loading.remove();
$(that).attr("src",src);
$(that).show();
});
});
};
$("img").LoadingImg();
});
15. iPad,iPhone浏览器判别
if(navigator.userAgent.toLowerCase().match(/iPad/i) == "ipad"){
这是苹果iPad、iPhone浏览器
}
16 条件加载Jquery
<!– Grab Google CDN jQuery. fall back to local if necessary –>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<script>!window.jQuery && document.write(’<script src=”js/jquery-1.4.2.min.js”><\/script>’)</script>
如果CDN没有下载到Jquery,则从本地读取
17. 判断元素是否存在
$("#aaa").length == 0
18. string转json
var data = eval('({"aa":"123"})');
var dd = '{"a":"123"}';
var data = eval('('+dd+')');
/**
* 对JSON对象转换为字符串.
* @param {json对象} json
* @return {json字符串}
*/
function jsonObj2Str(json) {
var str = "{";
for (prop in json) {
str += prop + ":" + json[prop] + ",";
}
str = str.substr(0, str.length - 1);
str += "}";
return str;
}
/**
* 将json字符串转换为json对象.
* @param {json字符串} jsonstr
* @return {json对象}
*/
function jsonStr2Obj(jsonstr) {
return eval("("+jsonstr+")");
}
/**
* 得到一个元素的left坐标值.
* @param {dom对象} obj
* @return {位置值}
*/
function getLeft(obj){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
/**
* 得到一个元素的绝对位置的top坐标值.
* @param {dom对象} obj
* @return {位置值}
*/
function getTop(obj){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
/**
* 删除一个字符串的左右空格.
* @param {原始字符串} str
* @return {删除空格之后的字符串}
*/
function trim(str)
{
return str.replace(/(^\s*)|(\s*$)/g,"");
}
/***************以下方法和表单验证相关*************************************************/
/**
* 返回非空字符串,如果有默认值就返回默认字符串.
* @param {要进行转换的原字符串} str
* @param {默认值} defaultStr
* @return {返回结果}
*/
function notNull(str, defaultStr) {
if (typeof(str) == "undefined" || str == null || str == '') {
if (defaultStr)
return defaultStr;
else
return '';
} else {
return str;
}
}
/**
* 比较两个日期大小.
* @param {较小日期的文本框id} smallDate
* @param {较大日期的文本框id} bigDate
* @param {出错的提示信息} msg
*/
function compareTwoDate(smallDate, bigDate, msg) {
var v1 = $(smallDate).value;
var v2 = $(bigDate).value;
if (v1 >= v2) {
alert(msg);
v2.focus();
return false;
}
return true;
}
/**
* 比较两个金额大小的方法.
* @param {较小的金额} smallNum
* @param {较大的金额} bigNum
* @param {出错提示信息} msg
* @return {Boolean}
*/
function compareTwoNum(smallNum, bigNum, msg) {
var v1 = $(smallNum).value;
var v2 = $(bigNum).value;
if (parseFloat(v1) >= parseFloat(v2)) {
alert(msg);
v2.focus();
return false;
}
return true;
}
/**
* 检查文本框的长度是否超出指定长度.
* @param {文本id} textId
* @param {文本框的最大长度} len
* @param {文本框描述内容} msg
* @return {有错就返回false,否则返回true}
*/
function checkLength(textId, len, msg) {
obj = $(textId);
str = obj.value;
str = str.replace(/[^\x00-\xff]/g, "**");
realLen = str.length;
if (realLen > len) {
alert("[" + msg + "]" + "长度最大为" + len + "位," + "请重新输入!\n注意:一个汉字占2位。");
obj.focus();
return false;
} else
return true;
}
/**
* 判断某个文本框不可以为空.
* @param {文本框id} textId
* @param {文本框描述内容} msg
* @return {有错就返回false,否则返回true}
*/
function checkIfEmpty(textId, msg) {
var textObj = $(textId);
var textValue = textObj.value;
if (trim(textValue) == '') {
alert('[' + msg + ']不得为空!');
textObj.focus();
return false;
} else {
return true;
}
}
/**
* 判断指定文本框内容必须为邮件.
* @param {文本框id} textId
* @param {文本框描述} msg
* @return {如果是邮件内容就返回true否则返回false}
*/
function checkIsMail(textId, msg) {
var obj = $(textId);
if (!_isEmail(obj.value)) {
alert('[' + msg + ']不是合法的邮件地址!');
obj.focus();
return false;
} else
return true;
}
/**
* 验证是不是邮件.
* @param {要验证的字符串} strEmail
* @return {Boolean}
*/
function _isEmail(strEmail) {
//接下来的验证是否有两个以上的‘.’号,有的话就是错的!
var first = strEmail.indexOf('.');
if (strEmail.indexOf('@')== -1) {
return false;
}
var tempStr = strEmail.substring(first + 1);
if (tempStr.indexOf('.') != -1) {
return false;
}
if (strEmail
.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1) {
return true;
} else
return false;
}
/**
* 判断某个文本框是否数字.
* @param {文本框id} textId
* @param {文本框描述内容} msg
* @return {Boolean}
*/
function checkIsNum(textId, msg) {
obj = $(textId);
if (isNaN(obj.value)) {
alert('[' + msg + ']必须为数字。');
obj.focus();
return false;
} else
return true;
}
/**
* 判断某个文本框是否含有非法字符.
* @param {文本框的id} textId
* @param {文本框描述内容} msg
* @return {有错就返回false否则返回true}
*/
function checkIsValid(textId, msg) {
obj = $(textId);
if (!_isValidString(obj.value, '[' + msg + ']不得含有非法字符。')) {
obj.focus();
return false;
}
return true;
}
/**
* 判断是不是合法字符串.
* @param {要进行判断的字符串} szStr
* @param {文本描述} errMsg
* @return {合法则返回true否则返回false}
*/
function _isValidString(szStr,errMsg) {
voidChar = "'\"><`~!@#$%^&\(\)()!¥……??“”‘’*";
for (var i = 0; i < voidChar.length; i++) {
aChar = voidChar.substring(i, i + 1);
if (szStr.indexOf(aChar) > -1){
alert(errMsg)
return false;
}
}
return true;
}
/*************** 以下方法和下拉菜单相关*************************************************/
/**
* 控制下拉菜单不可以为-1(未选择情况value=-1)
* @param {下拉菜单id} selectId
* @param {下拉菜单描述内容} msg
* @param {下拉菜单的空值对应的value,默认为-1} nullValue
* @return {Boolean}
*/
function checkChooseSelect(selectId, msg ,nullValue) {
var obj = $(selectId);
if (obj.value == notNull(nullValue,'-1')) {
alert('[' + msg + ']必选!');
obj.focus();
return false;
} else
return true;
}
/**
* 得到下拉菜单的显示的文字.
* @param {下拉菜单dom对象} selectObj
* @return {返回下拉菜单的显示的"文本"}
*/
function getSelectText(selectObj) {
return selectObj.options[selectObj.selectedIndex].text;
}
/**
* 得到下拉菜单的显示的值.
* @param {下拉菜单dom对象} selectObj
* @return {得到下拉菜单的显示的"值"}
*/
function getSelectValue(selectObj) {
return selectObj.options[selectObj.selectedIndex].value;
}
/**
* 设置下拉菜单的选择状态到指定的值.
* @param {下拉菜单对象} obj
* @param {要选择的值} value
*/
function setSelectValue(obj, value) {
/*for (i = obj.options.length - 1; i >= 0; i--) {
if (obj.options[i].value == value) {
obj.options[i].selected = true;
return;
}
}
*/
obj.value= value;
}
/**
* 根据键值串的内容进行下拉菜单的动态组装
* @param {要进行下拉菜单组装的dom对象} obj
* @param {键值对用,和;分割,例如'1,男;2,女;3,未知'} valAndText
*/
function setSelectContent(obj,valAndText){
if(trim(valAndText)==''){
alert('没有要进行组装下拉菜单的数据!');
return false;
}
clearSelect(obj);
var keyandvalues = valAndText.split(';');
for(var i=0;i<keyandvalues.length;i++){
var arr = keyandvalues[i].split(',');
if(arr){
var value =arr[0];
var text =arr[1];
var objOption = new Option(text,value);
obj.add(objOption);
}
}
}
/**
* 清空下拉菜单里面的内容.
* @param {下拉菜单对象} obj
*/
function clearSelect(obj) {
for (var i=obj.options.length; i >0; i--) {
obj.remove(0);
}
}
/*************** 以下方法和多选框相关*************************************************/
/**
* 返回选中的checks的id组成的字符串,逗号隔开.
* @param {checks数组} checks
* @return 选择的id组成的字符串
*/
function getCheckedIds(checks){
var selectedValue = '';
var len = checks.length;
for(var index=0; index<len; index++) {
if(checks[index].checked==true) {
selectedValue += checks[index].value+",";
}
}
if(selectedValue.length>0)
return selectedValue.substring(0,selectedValue.length-1);
return selectedValue;
}
发表评论
-
容易出错的JavaScript题目
2013-07-08 17:56 7231、 function Container( proper ... -
javascript的函数节流
2013-07-08 17:36 900http://www.alloyteam.com/2012/ ... -
上个星期,上个月
2013-06-13 11:38 855<script type="text/jav ... -
new class
2013-06-06 01:29 897function newClass(classObj, sup ... -
JavaScript面对对象编程—继承
2013-05-28 15:33 1361概述: 原型链:一个原型等于另一个实例。不能给构造函数传递 ... -
寄生式组合继承
2013-05-28 11:34 945function inheritPrototype(sub ... -
Functionbind
2013-05-28 11:07 911Function.prototype.bind = func ... -
js 观察者模式
2013-05-07 17:08 1197<!doctype html> <ht ... -
github的常见操作
2013-04-26 10:14 994复制项目到本地: git clone git@git ... -
网站变灰
2013-04-24 00:43 1007js自己去找 <script src=&qu ... -
关闭闭包的定义
2013-03-27 18:47 853在动态执行环境中,数据实时地发生变化,为了保持这些非持久型变 ... -
SeaJS v1.2 中文注释版
2013-03-12 16:10 4057https://github.com/seajs/seajs ... -
使用requestAnimationFrame更好的实现javascript动画(转)
2013-03-12 10:24 3655详细说明:http://www.cnblogs.com/ru ... -
css阴影
2013-03-03 09:25 1368css代码:<style type="tex ... -
模拟apply和call
2013-03-01 18:56 1154<html> <head> &l ... -
冒泡排序
2013-03-01 18:30 1118function bubbleSort(arr){ v ... -
form导出数据
2013-01-29 18:24 1020$.exportExcel = function (opti ... -
从零开始写jQuery框架
2013-01-07 17:36 773随着时代发展,javascript ... -
AMD和CMD的区别
2013-01-05 16:56 956https://github.com/seajs/sea ... -
判断单击还是双击
2013-01-04 10:43 1017document.getElementById(&quo ...
相关推荐
javascript常用方法javascript常用方法javascript常用方法javascript常用方法javascript常用方法
这个是个人总结整理的javascript 常用方法,居家旅行敲代码的必备神器。
js常用方法 欢迎大家下载!里面的内容很多,主要有js的常用鼠标事件的方法!喜欢js的朋友可以下载!很全面的!
javascript常用方法,个人整理.目前还不是很完善,先与大家分享一下。
介绍了很多关于js的很多方面比较详细……
web前端javascript常用的的公共处理函数大全,性能较好。
方法可返回某个指定的字符串值在字符串中首次出现的位置 语法 stringObject.indexOf(searchvalue,fromindex) 提示和注释 注释:indexOf() 方法对大小写敏感! 注释:如果要检索的字符串值没有出现,则该方法返回 -1...
javascript 常用方法总结,以便于使用的时候可以查找。
JS 常 用 方 法
js常用方法8张脑图.zip
javascript常用方法[归类].pdf
本文主要针对Javascript中字符串相关常用的使用方法进行了总结
javascript常用对象及方法 javascript常用对象及方法
整理了一套Javascript常用的方法,各个方法的差异,以及在实际开发中如何规避这些差异。
如为网页添加浮动广告 使用CSS改变表格边框样式 网页播放器 等百余种方法实例集合
js-常用方法列表 js-常用方法列表
do.1.21.js,常用js的封装,使用了JSDuck文档生成工具,生成了说明文档。