HTML沒有計(jì)算能力。

這幾天接了個(gè)網(wǎng)頁外包,累死累活,下一文章打算拿一個(gè)出來分析,并把所用的代碼一步步詳細(xì)化。---------請關(guān)注我

@小蕭ovo ,一起分享有用的干貨。

我剛?cè)胧智岸说臅r(shí)" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

18143453325 在線咨詢 在線咨詢
18143453325 在線咨詢
所在位置: 首頁 > 營銷資訊 > 建站知識 > 前端日常:常用JavaScript代碼入手。

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

時(shí)間:2023-02-01 03:08:01 | 來源:建站知識

時(shí)間:2023-02-01 03:08:01 來源:建站知識

為什么要引用JavaScript語言呢?

HTML沒有計(jì)算能力。

這幾天接了個(gè)網(wǎng)頁外包,累死累活,下一文章打算拿一個(gè)出來分析,并把所用的代碼一步步詳細(xì)化。---------請關(guān)注我

@小蕭ovo ,一起分享有用的干貨。

我剛?cè)胧智岸说臅r(shí)候,是從jQuery開始的,那時(shí)候都不懂,遇到這些就退縮下去了,想著讓其他人幫忙解決,自己快速把其他頁面搭建好就行了。

后來自己來寫操作的時(shí)候是因?yàn)槠渌硕加惺旅α耍皇O挛覜]頁面要做了。


只能咬咬牙,上陣了,先是復(fù)制同事之前實(shí)現(xiàn)效果的腳本代碼,用到自己的網(wǎng)頁上,然后發(fā)現(xiàn)效果實(shí)現(xiàn)不了,接著對比差異,發(fā)現(xiàn)class名字不一,就這樣一步步的把代碼功能實(shí)現(xiàn)。


其中問了一次層級的問題,就是父級,同級,以及包含在這容器里面的要怎么找。

就這么一次,可能開竅了。然后對于其他的用法都可以通融理解了。我也不用麻煩其他同事來操作了。從jq到原生js,就這樣過渡過來了。


重點(diǎn)是理解DOM操作。


數(shù)據(jù)類型
面向?qū)ο?br>繼承
閉包
插件
作用域
跨域
原型鏈
模塊化
自定義事件
內(nèi)存泄漏
事件機(jī)制
異步裝載回調(diào)
模板引擎
JSON
ajax(這個(gè)我喜歡用jQuery的。不然要寫好多兼容。)

js事件觸發(fā)理解:

onkeypress 在用戶按下并放開任何字母數(shù)字鍵時(shí)發(fā)生。系統(tǒng)按鈕(例如,箭頭鍵和功能鍵)無法得到識別。[響應(yīng)一個(gè)鍵]onkeyup 在用戶放開任何先前按下的鍵盤鍵時(shí)發(fā)生。onkeydown 在用戶按下任何鍵盤鍵(包括系統(tǒng)按鈕,如箭頭鍵和功能鍵)時(shí)發(fā)生。[響應(yīng)幾個(gè)鍵的組合]可以響應(yīng)Ctrl、Alt、Shift等功能鍵和鍵的組合,而onkeypress不能onfocusout 失去光標(biāo)事件onfocus 獲得光標(biāo)事件onabort 圖片下載被打斷時(shí)onblur 元素失去焦點(diǎn)時(shí)onclick 鼠標(biāo)點(diǎn)擊ondblclick 鼠標(biāo)雙擊onerror 加載文檔或圖片發(fā)生錯(cuò)誤時(shí)onmousedown 鼠標(biāo)被按下時(shí)onmousemove 鼠標(biāo)被移動(dòng)時(shí)onmouseout 鼠標(biāo)離開元素時(shí)onmouseover 鼠標(biāo)經(jīng)過元素時(shí)onmouseup 釋放鼠標(biāo)按鍵時(shí)onunload 用戶離開頁面時(shí)

入手js功能,把平時(shí)網(wǎng)站上常用的一些實(shí)用功能代碼片段通:

100個(gè)直接可以拿來用的JavaScript實(shí)用功能代碼片段

這上面有很多實(shí)用的例子,可以看下是怎么實(shí)現(xiàn)的,然后學(xué)習(xí)理解他所用的知識點(diǎn)。

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


原生JavaScript實(shí)現(xiàn)字符串長度截取


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獲取域名主機(jī)


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實(shí)現(xiàn)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完美判斷是否為網(wǎng)址


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參數(shù)值


// 用法:如果地址是 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常用的正則表達(dá)式


//正整數(shù)/^[0-9]*[1-9][0-9]*$/;//負(fù)整數(shù)/^-[0-9]*[1-9][0-9]*$/;//正浮點(diǎn)數(shù)/^(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*))$/; //負(fù)浮點(diǎn)數(shù)/^(-(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //浮點(diǎn)數(shù)/^(-?/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字節(jié),允許字母數(shù)字下劃線)/^[a-zA-Z][a-zA-Z0-9_]{4,9}$/;//匹配空白行的正則表達(dá)式//n/s*/r/;//匹配中國郵政編碼/[1-9]/d{5}(?!/d)/;//匹配身份證//d{15}|/d{18}/;//匹配國內(nèi)電話號碼/(/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?)/;//匹配首尾空白字符的正則表達(dá)式/^/s*|/s*$/;//匹配HTML標(biāo)記的正則表達(dá)式< (/S*?)[^>]*>.*?|< .*? />;
原生JavaScript實(shí)現(xiàn)返回頂部的通用方法

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實(shí)現(xiàn)全選通用方法


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實(shí)現(xiàn)全部取消選擇通用方法

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獲取復(fù)選框的值


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;}
其實(shí)小編我做網(wǎng)站還是用jQuery

網(wǎng)上說擁抱原生,可是我還是覺得jQuery好用。


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

如果覺得有用贊一個(gè)唄。

關(guān)鍵詞:入手,日常

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉