js + jquery 方法功能总结

1. 判断元素标签在浏览器可视范围内

function is_view(id) {

   return !((jQuery(window).scrollTop()>(jQuery('#'+id).offset().top+jQuery('#'+id).outerHeight()))||((jQuery(window).scrollTop()+jQuery(window).height())<jQuery('#'+id).offset().top));

}

返回true 为在可视范围内,false 非范围内

2. select 框默认选中

$(select_obj).val(default_value)


3. 判断字符中是否有中文

function checkChineseStr(str) {

    var re = new RegExp("[\\u4e00-\\u9fa5]", "");
    if(re.test(str)){
        return true;
    }
    return false;
}

4. jquery 插件 

jquery ui  http://jqueryui.com/

js 制作图表 http://www.highcharts.com/ 

jquery form jquiry.form.js form 可以异步提交表单 http://download.csdn.net/detail/lyd518/6733253

js My97 DatePicker 时间插件 http://www.my97.net/

anything slider 一个功能其全的图片移动效果  http://css-tricks.com/examples/AnythingSlider/#&panel1-1

xslider.js 单张图片移动效果

 http://www.17sucai.com/pins/demoshow/315

/**
 * @package Xslider - A slider plugin for jQuery
 * @version 0.5
 * @author xhowhy <http://x1989.com> 
 **/
;(function($){
	$.fn.Xslider = function(options){var settings ={
			affect: 'scrollx', //效果  有scrollx|scrolly|fade|none
			speed: 1200, //动画速度
			space: 6000, //时间间隔
			auto: true, //自动滚动
			trigger: 'mouseover', //触发事件 注意用mouseover代替hover
			conbox: '.conbox', //内容容器id或class
			ctag: 'a', //内容标签 默认为<a>
			switcher: '.switcher', //切换触发器id或class
			stag: 'a', //切换器标签 默认为a
			current:'cur', //当前切换器样式名称
			rand:false //是否随机指定默认幻灯图片
		};
		settings = $.extend({}, settings, options);
		var index = 1;
		var last_index = 0;
		var $conbox = $(this).find(settings.conbox),$contents = $conbox.find(settings.ctag);
		var $switcher = $(this).find(settings.switcher),$stag = $switcher.find(settings.stag);
		if(settings.rand) {index = Math.floor(Math.random()*$contents.length);slide();}
		if(settings.affect == 'fade'){$.each($contents,function(k, v){(k === 0) ? $(this).css({'position':'absolute','z-index':9}):$(this).css({'position':'absolute','z-index':1,'opacity':0});
			});
		}
		function slide(){if (index >= $contents.length) index = 0;
			$stag.removeClass(settings.current).eq(index).addClass(settings.current);
			switch(settings.affect){case 'scrollx':
					$conbox.width($contents.length*$contents.width());
					$conbox.stop().animate({left:-$contents.width()*index},settings.speed);
					break;
				case 'scrolly':
					$contents.css({display:'block'});
					$conbox.stop().animate({top:-$contents.height()*index+'px'},settings.speed);
					break;
				case 'fade':
					$contents.eq(last_index).stop().animate({'opacity': 0}, settings.speed/2).css('z-index',1)
							 .end()
							 .eq(index).css('z-index',9).stop().animate({'opacity': 1}, settings.speed/2)
					break;
				case 'none':
					$contents.hide().eq(index).show();
					break;
			}
			last_index = index;
			index++;
		};
		if(settings.auto) var Timer = setInterval(slide, settings.space);
		$stag.bind(settings.trigger,function(){_pause()
			index = $(this).index();
			slide();
			_continue()
		});
		$conbox.hover(_pause,_continue);
		function _pause(){
			clearInterval(Timer);
		}
		function _continue(){
			if(settings.auto)Timer = setInterval(slide, settings.space);
		}	
	}
})(jQuery);

多张图片移动效果: http://download.csdn.net/detail/lyd518/6733209

js 编辑器 ckeditor    http://ckeditor.com/


5. http://css-tricks.com/  一个丰富的jquery 插件网站

6. http://jsfiddle.net  一个在线编辑html 各种效果的网站

7. http://codylindley.com/thickbox/   http://www.jquerylightbox.com/    查看图片大图  lightbox效果更加强大


js 转化json对句插件 

https://code.google.com/p/jquery-json/  

js 正则表达式去除 html标签 

 var reTag = /<[^>].*?>/g; 
  var content_div = ckeditorvalue.replace(reTag," ");

计算英文单词个数

function wordStatic(value) {
    // 替换中文字符为空格
    value = value.replace(/[\u4e00-\u9fa5]+/g, " ");
    // 将换行符,前后空格不计算为单词数
    value = value.replace(/( )+/gi," ");
    value = value.replace(/(\,)/gi,", ");
    value = value.replace(/\n|\r|^\s+|\s+$/gi," ");
    // 多个空格替换成一个空格
    value = value.replace(/\s+/gi," ");
    // 更新计数
    var length = 0;
    var match = value.match(/\s/g);
    if (match) {
        length = match.length -1 ;
    } else if (value) {
        length = 1;
    }
    return length;
}

8. jquery tree 树型插件  http://www.ztree.me/v3/demo.php#_102

9. ACE 是一个实现了语法着色功能的基于 Web 的代码编辑器,支持的语言包括: SQL Ruby SASS PHP Objectivec Csharp Java JSON http://ace.c9.io/



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值