18143453325 在线咨询 在线咨询
18143453325 在线咨询
所在位置: 首页 > 营销资讯 > 建站知识 > 前端开发 ❤ 见解

前端开发 ❤ 见解

时间:2023-02-20 17:28:01 | 来源:建站知识

时间:2023-02-20 17:28:01 来源:建站知识

前端开发 ❤ 见解:为什么要引用JavaScript语言呢?

HTML没有计算能力。

iframe的优缺点?

优点:

1. 解决加载缓慢的第三方内容如图标和广告等的加载问题

2. Security sandbox

3. 并行加载脚本

缺点:

1. iframe会阻塞主页面的Onload事件

2. 即时内容为空,加载也需要时间

3. 没有语意

Ajax 是什么? 如何创建一个Ajax?

Ajax并不算是一种新的技术,全称是asynchronous javascript and xml,可以说是已有技术的组合,主要用来实现客户端与服务器端的异步通信效果,实现页面的局部刷新,早期的浏览器并不能原生支持ajax,可以使用隐藏帧(iframe)方式变相实现异步效果,后来的浏览器提供了对ajax的原生支持

使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果

基本步骤:

varxhr =null;//创建对象

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = newActiveXObject("Microsoft.XMLHTTP");

}

xhr.open(“方式”,”地址”,”标志位”);//初始化请求

xhr.setRequestHeader(“”,””);//设置http头信息

xhr.onreadystatechange =function(){}//指定回调函数

xhr.send();//发送请求

js框架(jQuery/EXTJS等)提供的ajax API对原生的ajax进行了封装,熟悉了基础理论,再学习别的框架就会得心应手,好多都是换汤不换药的内容

一起分享有用的干货。

重点是理解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;}
能否解答下:

移动端常用类库及优缺点??????????

关键词:

74
73
25
news

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

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