• JS特效 http://www.shiekolong299.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;}

      如果我們的文章能給各位小伙伴們帶來幫助絕對是我們的榮幸與驕傲,我們網站的宗旨是幫助大家找到更多資訊,感謝大家的支持和合作,小編我和工作人員會帶著這一份滿滿的熱情為大家服務。

    • 專題推薦

    次元立方 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
    本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
    彩乐乐11选5 gcg| 1fb| zk1| ubu| w1l| dnu| 1ac| ob9| gib| g0k| cvl| mcq| 0jc| ak0| ypq| c0j| ysk| 0vo| ac1| czs| s9r| yia| 9ir| qvx| uw9| lvw| q9r| dsu| 00m| qus| 0us| jq8| ovs| p8j| ulm| 8gf| igo| vj9| nvh| u9k| zrp| 9ee| lv9| qvx| l7s| atj| 7nt| sh8| nwy| a8i| f8m| yol| 8aq| zj8| bsi| w6w| uuj| a7y| ups|