Javascript小技能总结(推荐)


Posted in Javascript onJune 02, 2016

废话不多说,直接上干货。。

具体代码如下所示:

/*
@@截取字符串长度,汉字算2个字符
@@return [string]+'...'
*/
var subString = function(str, len) {
var newLength = 0;
var newStr = "";
var chineseRegex = /[^\x00-\xff]/g;
var singleChar = "";
var strLength = str.replace(chineseRegex, "**").length;
for (var i = 0; i < strLength; i++) {
singleChar = str.charAt(i).toString();
if (singleChar.match(chineseRegex) != null) {
newLength += 2;
} else {
newLength++;
}
if (newLength > len) {
break;
}
newStr += singleChar;
}
if (strLength > len) {
newStr += "...";
}
return newStr;
}
--------------------------------------------------------------------------------
/*
@@对可见元素 进行隐藏
@@:visible 判断是否为课件元素
*/
function close_window(){
var flag=false;
$(".dialog_con").each(function(){
if($(this).is(":visible")){
flag=true;
}
})
if(flag==true){
$(".dialog_con").hide();
$(".dialogbox").hide(); 
}else{ 
window.android.callAndroidFinish();
}
} 
--------------------------------------------------------------------------------
/*
@@对持有不同设备的 设备 引用不同的样式
@@ if判断是否 某种设备
*/
<script type = "text/javascript" >
if (/(iPad|iPod|iOS)/i.test(navigator.userAgent)) { 
setActiveStyleSheet("pad.css"); 
} else if (/(Android)/i.test(navigator.userAgent)) {
setActiveStyleSheet("common.css"); 
}else if (/(iPhone6)/i.test(navigator.userAgent)) {
setActiveStyleSheet("iphone6.css"); 
}
function setActiveStyleSheet(filename){
document.write("<link href="+filename+" rel=stylesheet>");
}
</script>
--------------------------------------------------------------------------------
/*
@@回到顶部动画
@@
*/
$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});
--------------------------------------------------------------------------------
/*
@@检查图片是否加载完毕
@@有时你或许要检查图片是否完全加载完毕,才能在脚本中进行后续操作:
@@你也可以通过把 img 标签替换成 ID 或 class,来检查特定图片是否加载完成。
*/
$('img').load(function () {
console.log('image load successful');
});
--------------------------------------------------------------------------------
/*
@@动修复损坏的图片
@@如果你发现自己网站的图片链接挂了,一个一个替换很麻烦。这段简单的代码可以帮上大忙;
@@即使你没有任何损坏的链接,增加这段代码也不会有什么影响。
*/
$('img').on('error', function () {
$(this).prop('src', 'img/broken.png');
});
--------------------------------------------------------------------------------
/*
@@Hover 上的 Class 切换
@@如果用户的鼠标悬停在页面上某个可点击元素时,你想要改变这个元素的视觉表现。可以使用下面这段代码,当用户悬停时,为该元素增加一个 class;当用户鼠标离开后移除这个 class:
*/
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
-----------或---------
$('.btn').hover(function () {
$(this).toggleClass('hover');
});
--------------------------------------------------------------------------------
/*
@@禁用 input 字段
@@有时你也许想让表单的提交按钮或其文本输入框变得不可用,直到用户执行了一个特定行为(例如确认 “我已经阅读该条款” 的复选框)。增加 disabled attribute 到你的 input,就可以实现自己想要的效果
*/
$('input[type="submit"]').prop('disabled', true);
$('input[type="submit"]').prop('disabled', false);
--------------------------------------------------------------------------------
/*
@@停止链接加载
@@有时你不想链接跳转到某个页面或重加载该页面,而希望可以做一些其他事情,比如触发其他脚本。下面的代码是禁止默认行为的一个小诀窍
*/
$('a.no-link').click(function (e) {
e.preventDefault();
});
--------------------------------------------------------------------------------
/*
@@淡入淡出/滑动开关
@@淡入淡出与滑动是我们经常使用 jQuery 做成的动画效果。或许你只是想在用户点击某物时展现一个元素,使用 fadeIn 和 slideDown 都很棒。但如果想让该元素在第一次点击时显现,第二次点击时消失,下面的代码可以很好地完成
*/
// Fade
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
$('.element').slideToggle('slow');
});
--------------------------------------------------------------------------------
/*
@@简单的手风琴效果
@@这是一个快速实现手风琴效果的简单方法
*/
// Close all panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function () {
var next = $(this).next();
next.slideToggle('fast');
$('.content').not(next).slideUp('fast');
return false;
});
--------------------------------------------------------------------------------
/*
@@使两个 Div 高度一样
@@有时你也许想让两个 div 拥有同样高度,不管它们里面有什么内容:
*/
$('.div').css('min-height', $('.main-div').height());
该例设置了 min-height,意味着它可以比主要 div 更大,但永远不能更小。但有一个更加灵活的方法是遍历一组元素的设置,然后将高度设为元素中的最高值:
var $columns = $('.column');
var height = 0;
$columns.each(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});
$columns.height(height);
如果你想让所有列都有相同高度:
var $rows = $('.same-height-columns');
$rows.each(function () {
$(this).find('.column').height($(this).height());
}); 
--------------------------------------------------------------------------------
/*
@@在新标签/窗口打开站外链接
@@在一个新标签或者新窗口中打开外置链接,并确保站内链接会在相同的标签或窗口中打开:
*/
$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');
--------------------------------------------------------------------------------
/*
@@通过文本找到元素
@@通过使用 jQuery 中的 contains() 选择器,你可以找到某个元素中的文本。如果文本不存在,该元素将会隐藏:
*/
var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();
--------------------------------------------------------------------------------
/*
@@视觉改变触发
@@当用户焦点在另外一个标签上,或重新回到标签时,触发 JavaScript:
*/
$(document).on('visibilitychange', function (e) {
if (e.target.visibilityState === "visible") {
console.log('Tab is now in view!');
} else if (e.target.visibilityState === "hidden") {
console.log('Tab is now hidden!');
}
});
--------------------------------------------------------------------------------
/*
@@Ajax 调用的错误处理
@@当某次 Ajax 调用返回 404 或 500 错误,就会执行错误处理。但如果没有定义该处理,其他 jQuery 代码或许会停止工作。可以通过下面这段代码定义一个全局 Ajax 错误处理
*/
$(document).ajaxError(function (e, xhr, settings, error) {
console.log(error);
});
--------------------------------------------------------------------------------
/*
@@插件链式调用
@@jQuery 支持链式调用插件,以减缓反复查询 DOM,并创建多个 jQuery 对象。看下面示例代码
*/
$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();
上面这段代码,可以通过链式操作大大改进:
$('#elem').show().html('bla').otherStuff();
还有另外一种方法,把元素缓存在变量中(前缀是 $ ):
var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();
--------------------------------------------------------------------------------
/*
@@Jq 遍历 全选 全不选 反选
@@
*/
//全选 全不选
$('#checkAll').click(function () {
//判断是否被选中
var bischecked = $('#checkAll').is(':checked');
var fruit = $('input[name="check"]');
bischecked ? fruit.attr('checked', true) : fruit.attr('checked', false);
});
//反选 遍历checkbox 如果当前为选中 就设置为 不选中 反之相同
$("#tabVouchList tr").each(function () {
if ($("td:eq(0) input[name='check']", $(this)).is(':checked')) {
$(this).attr('checked', false);
} else {
$(this).attr('checked', true);
}
});

以上所述是小编给大家提供的js小技巧总结,希望对大家有所帮助!

Javascript 相关文章推荐
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
vue实现扫码功能
Jan 17 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
Jquery为DIV添加click事件的简单实例
Jun 02 #Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 #Javascript
深入理解jQuery之事件移除
Jun 02 #Javascript
深入理解JQuery循环绑定事件
Jun 02 #Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 #Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 #Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 #Javascript
You might like
PHP 函数语法介绍一
2009/06/14 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python 操作文件的基本方法总结
2017/08/10 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
酒店led欢迎词
2014/01/09 职场文书
秸秆管理实施方案
2014/03/15 职场文书
党性观念心得体会
2014/09/03 职场文书
党员示范岗材料
2014/12/19 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang