18143453325 在线咨询 在线咨询
18143453325 在线咨询
所在位置: 首页 > 营销资讯 > 建站知识 > 前端日常:常用JavaScript代码入手。

前端日常:常用JavaScript代码入手。

时间:2023-02-01 03:08:01 | 来源:建站知识

时间:2023-02-01 03:08:01 来源:建站知识

为什么要引用JavaScript语言呢?

HTML没有计算能力。

这几天接了个网页外包,累死累活,下一文章打算拿一个出来分析,并把所用的代码一步步详细化。---------请关注我

@小萧ovo ,一起分享有用的干货。

我刚入手前端的时候,是从jQuery开始的,那时候都不懂,遇到这些就退缩下去了,想着让其他人帮忙解决,自己快速把其他页面搭建好就行了。

后来自己来写操作的时候是因为其他人都有事忙了,而只剩下我没页面要做了。


只能咬咬牙,上阵了,先是复制同事之前实现效果的脚本代码,用到自己的网页上,然后发现效果实现不了,接着对比差异,发现class名字不一,就这样一步步的把代码功能实现。


其中问了一次层级的问题,就是父级,同级,以及包含在这容器里面的要怎么找。

就这么一次,可能开窍了。然后对于其他的用法都可以通融理解了。我也不用麻烦其他同事来操作了。从jq到原生js,就这样过渡过来了。


重点是理解DOM操作


数据类型
面向对象
继承
闭包
插件
作用域
跨域
原型链
模块化
自定义事件
内存泄漏
事件机制
异步装载回调
模板引擎
JSON
ajax(这个我喜欢用jQuery的。不然要写好多兼容。)

js事件触发理解:

onkeypress 在用户按下并放开任何字母数字键时发生。系统按钮(例如,箭头键和功能键)无法得到识别。[响应一个键]onkeyup 在用户放开任何先前按下的键盘键时发生。onkeydown 在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生。[响应几个键的组合]可以响应Ctrl、Alt、Shift等功能键和键的组合,而onkeypress不能onfocusout 失去光标事件onfocus 获得光标事件onabort 图片下载被打断时onblur 元素失去焦点时onclick 鼠标点击ondblclick 鼠标双击onerror 加载文档或图片发生错误时onmousedown 鼠标被按下时onmousemove 鼠标被移动时onmouseout 鼠标离开元素时onmouseover 鼠标经过元素时onmouseup 释放鼠标按键时onunload 用户离开页面时

入手js功能,把平时网站上常用的一些实用功能代码片段通:

100个直接可以拿来用的JavaScript实用功能代码片段

这上面有很多实用的例子,可以看下是怎么实现的,然后学习理解他所用的知识点。

这里提取一些我常用到的片段:


原生JavaScript实现字符串长度截取


function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^/x00-/xff]/; var strre = ""; for (var i = 0; i < str.length; i++) { if (icount < len - 1) { temp = str.substr(i, 1); if (patrn.exec(temp) == null) { icount = icount + 1 } else { icount = icount + 2 } strre += temp } else { break } } return strre + "..." }
原生JavaScript获取域名主机


function getHost(url) { var host = "null"; if(typeof url == "undefined"|| null == url) { url = window.location.href; } var regex = /^/w+/:////([^//]*).*/; var match = url.match(regex); if(typeof match != "undefined" && null != match) { host = match[1]; } return host;}
原生JavaScript元素显示的通用方法


function $(id) { return !id ? null : document.getElementById(id); } function display(id) { var obj = $(id); if(obj.style.visibility) { obj.style.visibility = obj.style.visibility == 'visible' ? 'hidden' : 'visible'; } else { obj.style.display = obj.style.display == '' ? 'none' : ''; } }
原生JavaScript实现checkbox全选与全不选


function checkAll() { var selectall = document.getElementById("selectall"); var allbox = document.getElementsByName("allbox"); if (selectall.checked) { for (var i = 0; i < allbox.length; i++) { allbox[i].checked = true; } } else { for (var i = 0; i < allbox.length; i++) { allbox[i].checked = false; } }}
原生JavaScript完美判断是否为网址


function IsURL(strUrl) { var regular = /^/b(((https?|ftp):////)?[-a-z0-9]+(/.[-a-z0-9]+)*/.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|asia|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]/d)|(1/d/d)|([1-9]/d)|/d))/b(//[-a-z0-9_:/@&?=+,.!//~%/$]*)?)$/i if (regular.test(strUrl)) { return true; } else { return false; }}
原生JavaScript获得URL中GET参数值


// 用法:如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得:GET["t1"], GET["t2"], GET["t3"]function get_get(){ querystr = window.location.href.split("?") if(querystr[1]){ GETs = querystr[1].split("&") GET =new Array() for(i=0;i<GETs.length;i++){ tmp_arr = GETs[i].split("=") key=tmp_arr[0] GET[key] = tmp_arr[1] } } return querystr[1];}
原生JavaScript跨浏览器添加事件


function addEvt(oTarget,sEvtType,fnHandle){ if(!oTarget){return;} if(oTarget.addEventListener){ oTarget.addEventListener(sEvtType,fnHandle,false); }else if(oTarget.attachEvent){ oTarget.attachEvent("on" + sEvtType,fnHandle); }else{ oTarget["on" + sEvtType] = fnHandle; }}
原生JavaScript常用的正则表达式


//正整数/^[0-9]*[1-9][0-9]*$/;//负整数/^-[0-9]*[1-9][0-9]*$/;//正浮点数/^(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*))$/; //负浮点数/^(-(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //浮点数/^(-?/d+)(/./d+)?$/;//email地址/^[/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+$/;//url地址/^[a-zA-z]+://(/w+(-/w+)*)(/.(/w+(-/w+)*))*(/?/S*)?$/;//年/月/日(年-月-日、年.月.日)/^(19|20)/d/d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/;//匹配中文字符/[/u4e00-/u9fa5]/;//匹配帐号是否合法(字母开头,允许5-10字节,允许字母数字下划线)/^[a-zA-Z][a-zA-Z0-9_]{4,9}$/;//匹配空白行的正则表达式//n/s*/r/;//匹配中国邮政编码/[1-9]/d{5}(?!/d)/;//匹配身份证//d{15}|/d{18}/;//匹配国内电话号码/(/d{3}-|/d{4}-)?(/d{8}|/d{7})?/;//匹配IP地址/((2[0-4]/d|25[0-5]|[01]?/d/d?)/.){3}(2[0-4]/d|25[0-5]|[01]?/d/d?)/;//匹配首尾空白字符的正则表达式/^/s*|/s*$/;//匹配HTML标记的正则表达式< (/S*?)[^>]*>.*?|< .*? />;
原生JavaScript实现返回顶部的通用方法

function backTop(btnId) { var btn = document.getElementById(btnId); var d = document.documentElement; var b = document.body; window.onscroll = set; btn.style.display = "none"; btn.onclick = function() { btn.style.display = "none"; window.onscroll = null; this.timer = setInterval(function() { d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1); b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1); if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set); }, 10); }; function set() { btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none" }};backTop('goTop');
原生JavaScript实现全选通用方法


function checkall(form, prefix, checkall) { var checkall = checkall ? checkall : 'chkall'; for(var i = 0; i < form.elements.length; i++) { var e = form.elements[i]; if(e.type=="checkbox"){ e.checked = form.elements[checkall].checked; } }}
原生JavaScript实现全部取消选择通用方法

function uncheckAll(form) { for (var i=0;i<form.elements.length;i++){ var e = form.elements[i]; if (e.name != 'chkall') e.checked=!e.checked; }}
原生JavaScript获取单选按钮的值


function get_radio_value(field){ if(field&&field.length){ for(var i=0;i<field.length;i++){ if(field[i].checked){ return field[i].value; } } }else { return ; } }
原生JavaScript获取复选框的值


function get_checkbox_value(field){ if(field&&field.length){ for(var i=0;i<field.length;i++){ if(field[i].checked && !field[i].disabled){ return field[i].value; } } }else { return; } }
原生JavaScript判断变量是否空值


/** * 判断变量是否空值 * undefined, null, '', false, 0, [], {} 均返回true,否则返回false */function empty(v){ switch (typeof v){ case 'undefined' : return true; case 'string' : if(trim(v).length == 0) return true; break; case 'boolean' : if(!v) return true; break; case 'number' : if(0 === v) return true; break; case 'object' : if(null === v) return true; if(undefined !== v.length && v.length==0) return true; for(var k in v){return false;} return true; break; } return false;}
其实小编我做网站还是用jQuery

网上说拥抱原生,可是我还是觉得jQuery好用。


反正我是穿不下了,常年坐着,大腿肥了。

如果觉得有用赞一个呗。

关键词:入手,日常

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭