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

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

JavaScript中的this妙用實例分析

瀏覽:94日期: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
相關文章:
主站蜘蛛池模板: 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库-首页-东莞市傲马网络科技有限公司 | 手术室净化装修-手术室净化工程公司-华锐手术室净化厂家 | 艺术生文化课培训|艺术生文化课辅导冲刺-济南启迪学校 | 厂房出售_厂房仓库出租_写字楼招租_土地出售-中苣招商网-中苣招商网 | PCB设计,PCB抄板,电路板打样,PCBA加工-深圳市宏力捷电子有限公司 | 机械加工_绞车配件_立式离心机_减速机-洛阳三永机械厂 | 万濠投影仪_瑞士TRIMOS高度仪_尼康投影仪V12BDC|量子仪器 | 复合土工膜厂家|hdpe防渗土工膜|复合防渗土工布|玻璃纤维|双向塑料土工格栅-安徽路建新材料有限公司 | 环讯传媒,永康网络公司,永康网站建设,永康小程序开发制作,永康网站制作,武义网页设计,金华地区网站SEO优化推广 - 永康市环讯电子商务有限公司 | 仓储笼_金属箱租赁_循环包装_铁网箱_蝴蝶笼租赁_酷龙仓储笼租赁 测试治具|过炉治具|过锡炉治具|工装夹具|测试夹具|允睿自动化设备 | 低压载波电能表-单相导轨式电能表-华邦电力科技股份有限公司-智能物联网综合管理平台 | 专业生产动态配料系统_饲料配料系统_化肥配料系统等配料系统-郑州鑫晟重工机械有限公司 | 长沙中央空调维修,中央空调清洗维保,空气能热水工程,价格,公司就找维小保-湖南维小保环保科技有限公司 | 智能家居全屋智能系统多少钱一套-小米全套价格、装修方案 | 干洗加盟网-洗衣店品牌排行-干洗设备价格-干洗连锁加盟指南 | 地源热泵一体机,地源热泵厂家-淄博汇能环保设备有限公司 | 3dmax渲染-效果图渲染-影视动画渲染-北京快渲科技有限公司 | 十字轴_十字轴万向节_十字轴总成-南京万传机械有限公司 | 国产频谱分析仪-国产网络分析仪-上海坚融实业有限公司 | 气弹簧定制-气动杆-可控气弹簧-不锈钢阻尼器-工业气弹簧-可调节气弹簧厂家-常州巨腾气弹簧供应商 | 机制砂选粉机_砂石选粉机厂家-盐城市助成粉磨科技有限公司 | 宁夏活性炭_防护活性炭_催化剂载体炭-宁夏恒辉活性炭有限公司 | 广西教师资格网-广西教师资格证考试网| ETFE膜结构_PTFE膜结构_空间钢结构_膜结构_张拉膜_浙江萬豪空间结构集团有限公司 | 紫外可见光分光度计-紫外分光度计-分光光度仪-屹谱仪器制造(上海)有限公司 | 湖南档案密集架,智能,物证,移动,价格-湖南档案密集架厂家 | 湖南教师资格网-湖南教师资格证考试网| 天津散热器_天津暖气片_天津安尼威尔散热器制造有限公司 | 质检报告_CE认证_FCC认证_SRRC认证_PSE认证_第三方检测机构-深圳市环测威检测技术有限公司 | CTP磁天平|小电容测量仪|阴阳极极化_双液系沸点测定仪|dsj电渗实验装置-南京桑力电子设备厂 | 卫生人才网-中国专业的医疗卫生医学人才网招聘网站! | 低温柔性试验仪-土工布淤堵-沥青车辙试验仪-莱博特(天津)试验机有限公司 | 耐高温风管_耐高温软管_食品级软管_吸尘管_钢丝软管_卫生级软管_塑料波纹管-东莞市鑫翔宇软管有限公司 | 东莞注册公司-代办营业执照-东莞公司注册代理记账-极刻财税 | 道达尔润滑油-食品级润滑油-道达尔导热油-合成导热油,深圳道达尔代理商合-深圳浩方正大官网 | 破碎机锤头_合金耐磨锤头_郑州宇耐机械工程技术有限公司 | LED太阳能中国结|发光红灯笼|灯杆造型灯|节日灯|太阳能灯笼|LED路灯杆装饰造型灯-北京中海轩光电 | 低粘度纤维素|混凝土灌浆料|有机硅憎水粉|聚羧酸减水剂-南京斯泰宝 | 酒万铺-酒水招商-酒水代理| 示波器高压差分探头-国产电流探头厂家-南京桑润斯电子科技有限公司 | 【连江县榕彩涂料有限公司】官方网站|