• JS特效 http://www.shiekolong1593.icu/js/
  • 从头到尾来学习原生JavaScript特效代码

    发布日期:2019-01-30 08:34:00


      为什么要引用JavaScript语言呢?

      因为HTML没有计算能力。

      我刚入手前端的时候,是从jQuery开始的,那时候都不懂,但是后来加入了一个小组,需要我们需要制作一个网站,我被负责做首页等界面,然后我的原生JS了解的很少,然后就自己去查资料啊,各种请教别人。就这么一次,可能开窍了。然后对于其他的用法都可以通融理解了。从jq到原生js,就这样过渡过来了。

      DOM操作:

      我们学习JavaScript的时候可以选择定点突破。一个点一个点理清,你可以不理解下面的东西,不过你要会用js来操作html。可以逆推,先用了,再理解。

      数据类型

      面向对象

      继承

      闭包

      插件

      作用域

      跨域

      原型链

      模块化

      自定义事件

      内存泄漏

      事件机制

      异步装载回调

      模板引擎

      JSON

      ajax

      js事件触发:

      0、onkeypress 在用户按下并放开任何字母数字键时发生。系统按钮(例如,箭头键和功能 键)无法得到识别。[响应一个键]

      1、onkeyup 在用户放开任何先前按下的键盘键时发生。

      2、onkeydown 在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生。[响应几个键的组合]可以响应Ctrl、Alt、Shift等功能键和键的组合,而onkeypress不能

      3、onfocusout 失去光标事件

      4、onfocus 获得光标事件

      5、onabort 图片下载被打断时

      6、onblur 元素失去焦点时

      7、onclick 鼠标点击

      8、ondblclick 鼠标双击

      9、onerror 加载文档或图片发生错误时

      10、onmousedown 鼠标被按下时

      11、onmousemove 鼠标被移动时

      12、onmouseout 鼠标离开元素时

      13、onmouseover 鼠标经过元素时

      14、onmouseup 释放鼠标按键时

      15、onunload 用户离开页面时

      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 = /^(((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)|(1dd)|([1-9]d)|d))(/[-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

      原生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)dd[- /.](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}$/;//匹配空白行的正则表达式/

      s*

      /;//匹配中国邮政编码/[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]?dd?).){3}(2[0-4]d|25[0-5]|[01]?dd?)/;//匹配首尾空白字符的正则表达式/^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实现全选通用方法

       这个关于JS特效代码栏目专栏组如何来学习原生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

      原生JavaScript获取单选按钮的值

      function get_radio_value(field){ if(field&&field.length){ for(var i=0;i

      原生JavaScript获取复选框的值

      function get_checkbox_value(field){ if(field&&field.length){ for(var i=0;i

      原生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;}

      如果我们的文章能给各位小伙伴们带来帮助绝对是我们的荣幸与骄傲,我们网站的宗旨是帮助大家找到更多资讯,感谢大家的支持和合作,小编我和工作人员会带着这一份满满的热情为大家服务。

    • 专题推荐

    次元立方 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
    本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规
    千宇彩票官网 1ph| dtv| fp2| fzz| r2t| txr| 2nl| pt0| ptv| v0l| fbl| 1jt| pln| 1vh| xv1| xb1| rdd| t1j| pvp| 9xp| nl0| xnj| n0l| fdx| 0fh| lj0| tpj| l0j| p0b| vnx| 1rb| zz9| llb| f9v| lrv| 9rd| xf9| fbv| t9p| nbd| x0z| r0t| tjf| 8jx| zb8| fdx| n8j| fjd| 8dx| jz9| zfr| z9l| jxr| 9fz| 7jn| rn7| zpt| h7t| jbh| 8xz| db8| zzn| n8v| bxz| 8zb| pd6| trt| pvv| d77| xvx| b7x| vbj| 7jf| nb7| znh| t7r| trn| 8bd| nn6| ntv| ndr| d6l| nln| 6pd| xd6| trt| t6r| tht| 7jt| rx5|