电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

JavaScript中的this妙用實例分析

瀏覽:91日期:2023-10-28 18:50:13

本文實例講述了JavaScript中的this妙用。分享給大家供大家參考,具體如下:

JavaScript關鍵字this始JS腳本能夠根據使用這個關鍵字的上下文將值傳遞給函數。

我們先來看如下一個網頁,在用戶單擊鏈接之后,彈出一個alert框,然后再轉到href屬性所指的網頁

HTML:

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>JavaScript中的this妙用</title> <script type='text/javascript' src='http://www.hdgsjgj.cn/bcjs/js/script.js'></script></head><body> <p style='text-algin:center;'> 你好,點擊這里去<a rel='external nofollow' >舊物商店</a> </p></body></html>

JS:

window.onload = initAll;function initAll(){ document.getElementById('redirect').onclick = initRedirect;}function initRedirect(){ alert('這是我創建的舊物商城,歡迎訪問!'); window.location = this; return false;}

你可能會主要到,代碼中并沒有引用特定的網頁——這是this關鍵字的作用之一。this替我們完成的工作之一是從HTML鏈接獲得URL(也就是a標簽的href屬性)。由于采用這種方式,如果以后腳本改為指向其他的頁面而不是舊物商店頁面,就不必修改JS。實際上,可以讓WEB站點上的所有鏈接都調用這個相同的JS代碼,這一行代碼都會自動獲得相應的href值。

這樣寫還有一個好處:如果用戶的瀏覽器不理解JavaScript(比如禁用了JS),那么它只會加載HTML頁面,而不顯示alert提示,當他們點擊鏈接時,會像一般情況下那樣加載頁面,不會發生錯誤,沒有任何問題。我們在來看一個switch/case例子,創建如下頁面:

JavaScript中的this妙用實例分析

HTML:

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>JavaScript中的this妙用</title> <script type='text/javascript' src='http://www.hdgsjgj.cn/bcjs/js/script.js'></script></head><body> <h2>閑置二手圖書</h2> <form action='#'> <input type='button' value='Java' /> <input type='button' value='JavaScript' /> <input type='button' value='MySQL' /> <input type='button' value='HTML5' /> </form></body></html>

JS:

window.onload = initAll;function initAll(){ document.getElementById('Java').onclick = viewDetail; document.getElementById('JavaScript').onclick = viewDetail; document.getElementById('MySQL').onclick = viewDetail; document.getElementById('Html').onclick = viewDetail;}function viewDetail(){ console.log('this.id='+this.id); switch(this.id){ case 'Java' : alert('《Java程序員基本功》這本書是李剛寫的,在我的商店售價30元!'); break; case 'JavaScript' : alert('《JavaScript語言精粹》這本書是Yahoo的一位工程師寫的,在我的商店售價15元!'); break; case 'MySQL' : alert('《MySQL入門很簡單》這本書附帶關盤,這個年代其實沒什么卵用了,它在我的商店售價28元!'); break; case 'Html' : alert('《HTML5秘籍》這本書是圖靈系統的圖書,非常值得擁有,它在我的商店售價25元,賣的非常好!'); break; default : alert('沒有這本書'); }}

直接用this.id作為switch的參數也是可以的。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容可查看本站專題:《JavaScript常用函數技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 宿舍管理系统_智慧园区系统_房屋/房产管理系统_公寓管理系统 | 专业的新乡振动筛厂家-振动筛品质保障-环保振动筛价格—新乡市德科筛分机械有限公司 | 车充外壳,车载充电器外壳,车载点烟器外壳,点烟器连接头,旅行充充电器外壳,手机充电器外壳,深圳市华科达塑胶五金有限公司 | 塑胶地板-商用PVC地板-pvc地板革-安耐宝pvc塑胶地板厂家 | 小程序开发公司_APP开发多少钱_软件开发定制_微信小程序制作_客户销售管理软件-济南小溪畅流网络科技有限公司 | 课件导航网_ppt课件_课件模板_课件下载_最新课件资源分享发布平台 | 河北中仪伟创试验仪器有限公司是专业生产沥青,土工,水泥,混凝土等试验仪器的厂家,咨询电话:13373070969 | 磁力抛光机_磁力研磨机_磁力去毛刺机_精密五金零件抛光设备厂家-冠古科技 | 找培训机构_找学习课程_励普教育 | 全温恒温摇床-水浴气浴恒温摇床-光照恒温培养摇床-常州金坛精达仪器制造有限公司 | 网站制作优化_网站SEO推广解决方案-无锡首宸信息科技公司 | 掺铥光纤放大器-C/L波段光纤放大器-小信号光纤放大器-合肥脉锐光电技术有限公司 | 儿童乐园|游乐场|淘气堡招商加盟|室内儿童游乐园配套设备|生产厂家|开心哈乐儿童乐园 | H型钢切割机,相贯线切割机,数控钻床,数控平面钻,钢结构设备,槽钢切割机,角钢切割机,翻转机,拼焊矫一体机 | 废水处理-废气处理-工业废水处理-工业废气处理工程-深圳丰绿环保废气处理公司 | 护栏打桩机-打桩机厂家-恒新重工| 集菌仪厂家_全封闭_封闭式_智能智能集菌仪厂家-上海郓曹 | 氟氨基酮、氯硝柳胺、2-氟苯甲酸、异香兰素-新晨化工 | 天津试验仪器-电液伺服万能材料试验机,恒温恒湿标准养护箱,水泥恒应力压力试验机-天津鑫高伟业科技有限公司 | 游动电流仪-流通式浊度分析仪-杰普仪器(上海)有限公司 | 不干胶标签-不干胶贴纸-不干胶标签定制-不干胶标签印刷厂-弗雷曼纸业(苏州)有限公司 | 北京工业设计公司-产品外观设计-产品设计公司-千策良品工业设计 北京翻译公司-专业合同翻译-医学标书翻译收费标准-慕迪灵 | 门禁卡_智能IC卡_滴胶卡制作_硅胶腕带-卡立方rfid定制厂家 | 渣土车电机,太阳能跟踪器电机,蜗轮蜗杆减速电机厂家-淄博传强电机 | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 耐酸碱泵-自吸耐酸碱泵型号「品牌厂家」立式耐酸碱泵价格-昆山国宝过滤机有限公司首页 | 阜阳在线-阜阳综合门户 | 蔬菜配送公司|蔬菜配送中心|食材配送|饭堂配送|食堂配送-首宏公司 | 合肥礼品公司-合肥礼品定制-商务礼品定制公司-安徽柏榽商贸有限公司 | 学校用栓剂模,玻璃瓶轧盖钳,小型安瓿熔封机,实验室安瓿熔封机-长沙中亚制药设备有限公司 | 药品仓库用除湿机-变电站用防爆空调-油漆房用防爆空调-杭州特奥环保科技有限公司 | 气力输送设备_料封泵_仓泵_散装机_气化板_压力释放阀-河南锐驰机械设备有限公司 | 臭氧实验装置_实验室臭氧发生器-北京同林臭氧装置网 | 常州减速机_减速机厂家_常州市减速机厂有限公司 | 武汉天安盾电子设备有限公司 - 安盾安检,武汉安检门,武汉安检机,武汉金属探测器,武汉测温安检门,武汉X光行李安检机,武汉防爆罐,武汉车底安全检查,武汉液体探测仪,武汉安检防爆设备 | 日本SMC气缸接头-速度控制阀-日本三菱伺服电机-苏州禾力自动化科技有限公司 | 领先的大模型技术与应用公司-中关村科金 | 采暖炉_取暖炉_生物质颗粒锅炉_颗粒壁炉_厂家加盟批发_烟台蓝澳采暖设备有限公司 | 坏男孩影院-提供最新电影_动漫_综艺_电视剧_迅雷免费电影最新观看 | 手机存放柜,超市储物柜,电子储物柜,自动寄存柜,行李寄存柜,自动存包柜,条码存包柜-上海天琪实业有限公司 | 艾默生变频器,艾默生ct,变频器,ct驱动器,广州艾默生变频器,供水专用变频器,风机变频器,电梯变频器,艾默生变频器代理-广州市盟雄贸易有限公司官方网站-艾默生变频器应用解决方案服务商 |