js圖片庫 案例

事件處理函數:事件處理函數的作用是,在特定事件發生時調用特定的JavaScript代碼。本例中想要在用戶點擊某個鏈接的時候觸發一個動作,所以需要使用onclick事件處理函數。

添加事件處理函數的語法:

event="JavaScript statement(s)"

js代碼包含在一對引號之間,可以把任意數量的js語句放在這對引號之間,只要把各條語句用分號隔開就可以。

οnclick="showPic(this);"//this表示這個對象,本例中即這個<a>元素標簽

事件處理函數的工作機制:在給某個元素添加了世間處理函數后,一旦事件發生,相應的js代碼就會執行。被調動的js會返回一個值,這個值將會被傳遞給那個時間處理函數。本例中當鏈接被點擊時,如果執行的js代碼返回true,事件處理函數就認為這個鏈接被點擊了,反之如果返回的值是false,onclick事件處理函數就認為這個鏈接沒有被點擊。return false;就會將false返回給事件處理函數,所以這個鏈接的默認行為沒有被觸發(打開圖片查看器。)

?

<!DOCTYPE html>
<html lang="en">
<head>
?? ?<meta charset="utf-8">
?? ?<title>Images</title>
</head>
<body>
<h1>圖片庫</h1>

<ul>
?? ?<li><a href="images/door.jpg" οnclick="showPic(this);return false;" title="red door">Door</a></li>//return false;事件處理函數工作機制
?? ?<li><a href="images/heart.jpg" οnclick="showPic(this);return false;" title="red heart">Heart</a></li>
?? ?<li><a href="images/lake.jpg" οnclick="showPic(this);return false;" title="Xuanwu Lake">Lake</a></li>
?? ?<li><a href="images/light.jpg" οnclick="showPic(this);return false;" title="lights">Light</a></li>
?? ?<li><a href="images/river.jpg" οnclick="showPic(this);return false;" title="Qinhuai River">River</a></li>
</ul>

<img id="placeholder" src="images/1.jpg" alt="my image gallery">//選用一個無用圖片做占位符圖片

<script type="text/javascript" >
?? ?function showPic(whichpic){
?? ??? ?var source = whichpic.getAttribute("href");
?? ??? ?var placeholder=document.getElementById("placeholder");
?? ??? ?placeholder.setAttribute("src",source);
?? ?}
</script>


</body>
</html>

?

?

childNodes屬性

在一顆節點樹上,childNodes屬性可以用來獲取任何一個元素的所有子元素,它是一個包含這個元素全部子元素的數組element.childNodes

childNodes返回的數組包含所有類型的節點,不僅僅是元素節點。

?

每個節點都有nodeType屬性,這個屬性讓我們知道正在與哪一種節點打交道。

語法:node.nodeType

nodeType的值是一個數字。

alert(body_element.nodeType)

nodeType屬性總共有12中可取值,但是其中僅有3種具有實用價值。

元素節點的nodeType屬性值是1;

屬性節點的nodeType屬性值是2;

文本節點的nodeType屬性值是3;

?

nodeValue屬性

如果想要改變一個文本節點的值,那就使用DOM提供的nodeValue屬性,它用來得到(和設置)一個節點的值:node.nodeValue;

不僅可以用來檢索節點的值,還可以用來設置節點的值。

?

firstChild和lastChild屬性

只要需要訪問childNodes數組中的第一個元素,都可以寫成firstChild?? node.firstChild ? ←==→ ? node.childNodes[0]

node.lastChild ? ←==→ ? node.childNodes[node.childNodes.length-1]

轉載于:https://www.cnblogs.com/yuanxinru321/p/6646126.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/393344.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/393344.shtml
英文地址,請注明出處:http://en.pswp.cn/news/393344.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

hitchhiker部署_《 Hitchhiker的React Router v4指南》:路由配置的隱藏值

hitchhiker部署Welcome to the Hitchhiker’s Guide to React Router v4, Part IV!歡迎來到《 React Router v4旅行者指南》&#xff0c;第四部分&#xff01; Now that we’ve learned about recursive routes, let’s get back to our initial boilerplate, to avoid mixing…

亮劍:PHP,我的未來不是夢(11)

2. 再說說“必備能力”說道能力&#xff0c;很多應屆畢業生都愿意給自己的點評是“我的學習能力很強”或者是“具有良好的學習意識”等。這里存在著這樣一個誤區&#xff01;把企業當成了學校&#xff01;當成了試驗室&#xff01;把老板當成了老師&#xff01;作為用人單位&am…

leetcode457. 環形數組循環

給定一個含有正整數和負整數的環形數組 nums。 如果某個索引中的數 k 為正數&#xff0c;則向前移動 k 個索引。相反&#xff0c;如果是負數 (-k)&#xff0c;則向后移動 k 個索引。因為數組是環形的&#xff0c;所以可以假設最后一個元素的下一個元素是第一個元素&#xff0c;…

Jquery的ajax提交成功后刷新頁面

轉載于:https://www.cnblogs.com/huoxiansudi/p/6646855.html

程序員編程經驗_在沒有實際編程的情況下成為更好的程序員

程序員編程經驗In this talk, Ryan Johnson explains what was for him the invisible step to becoming a better developer.在演講中&#xff0c;瑞安約翰遜(Ryan Johnson)解釋了對他來說&#xff0c;成為更好的開發人員這一無形的步驟。 You can watch the full video on t…

粘貼復制

方法1: 方法二: 方法三: // 第三種 ios 設備和 android設備均正常,但是pc端沒有//定義函數window.Clipboard (function(window, document, navigator) { var textArea, copy; // 判斷是不是ios端 function isOS() { return navigator.userAgent.mat…

leetcode109. 有序鏈表轉換二叉搜索樹(遞歸)

給定一個單鏈表&#xff0c;其中的元素按升序排序&#xff0c;將其轉換為高度平衡的二叉搜索樹。本題中&#xff0c;一個高度平衡二叉樹是指一個二叉樹每個節點 的左右兩個子樹的高度差的絕對值不超過 1。示例:給定的有序鏈表&#xff1a; [-10, -3, 0, 5, 9],一個可能的答案是…

mxnet教程

官方教程&#xff0c;講的還行&#xff0c;我用自己的實例講解。自己如何設計網絡&#xff0c;自己的迭代器 1&#xff1a;引入module&#xff1a; import mxnet as mx import numpy as np import cv2 import matplotlib.pyplot as plt import logginglogger logging.getLogge…

web動畫_Web動畫簡介

web動畫by CodeDraken由CodeDraken Web動畫簡介 (An Introduction to Web Animations) In this introduction to web animations article, we will cover basic CSS animations using pseudo-classes, transitions, and transformations.在此Web動畫簡介中&#xff0c;我們將介…

java統計空間占用_JVM —— Java 對象占用空間大小計算

引用類型(reference type&#xff1a; Integer)在 32 位系統上每一個占用 4bytes(即32bit&#xff0c; 才干管理 2^324G 的內存), 在 64 位系統上每一個占用 8bytes(開啟壓縮為 4 bytes)。四. 對齊填充HotSpot 的對齊方式為 8 字節對齊。不足的須要 Padding 填充對齊&#xff0…

源于十年來的點滴積累——《變革中的思索》印行出版

源于歸國十年來的點滴積累, 集結成書的《變革中的思索》&#xff0c;日前由電子工業出版社刊印出版。 這本書共有五個章節&#xff0c;分別是解碼創新、中國智造、管理心得、我和微軟、心靈記憶——前三章偏重技術&#xff0c;更多理性的思考; 后兩章則工作生活中的所見所聞&am…

SpringBoot聲明式事務

目錄 事務的基本特征隔離級別傳播行為Transcation事務的基本特征&#xff08;ACID&#xff09; Atomic&#xff08;原子性&#xff09; 事務中包含的操作被看作一個整體的業務單元&#xff0c;這個業務單元中的操作要么全部成功&#xff0c;要么全部失敗&#xff0c;不會出現部…

leetcode1437. 是否所有 1 都至少相隔 k 個元素

給你一個由若干 0 和 1 組成的數組 nums 以及整數 k。如果所有 1 都至少相隔 k 個元素&#xff0c;則返回 True &#xff1b;否則&#xff0c;返回 False 。 示例 1&#xff1a; 輸入&#xff1a;nums [1,0,0,0,1,0,0,1], k 2 輸出&#xff1a;true 解釋&#xff1a;每個 1 …

數據結構教程網盤鏈接_數據結構101:鏈接列表

數據結構教程網盤鏈接by Kevin Turney凱文特尼(Kevin Turney) Like stacks and queues, Linked Lists are a form of a sequential collection. It does not have to be in order. A Linked list is made up of independent nodes that may contain any type of data. Each no…

多線程之間的通信(等待喚醒機制、Lock 及其它線程的方法)

一、多線程之間的通信。 就是多個線程在操作同一份數據&#xff0c; 但是操作的方法不同。     如&#xff1a; 對于同一個存儲塊&#xff0c;其中有兩個存儲位&#xff1a;name sex&#xff0c; 現有兩個線程&#xff0c;一個向其中存放數據&#xff0c;一個打印其中的數…

Linux iptables 配置詳解

一、配置一個filter表的防火墻 1. 查看本機關于 iptables 的設置情況 # iptables -L -n Chain INPUT (policy ACCEPT) target prot opt source destination Chain FORWARD (policy ACCEPT) target prot opt source destination Chain OUTPUT (policy ACCEPT) …

06 Nginx

1.檢查linux上是否通過yum安裝了nginx rpm -qi nginx2.解決安裝nginx所依賴包 yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel ope…

java編寫安卓程序代碼,安卓:從Android的Java源代碼code創建UML

i am looking for a program that can create automatically an Uml from my Java-Android source code.I have tested ArgoUml, but it does not support Android.Have any one a suggestion?Thanks!解決方案I can second what Tom Morris wrote in the comment above. Even …

leetcode1052. 愛生氣的書店老板(滑動窗口)

今天&#xff0c;書店老板有一家店打算試營業 customers.length 分鐘。每分鐘都有一些顧客&#xff08;customers[i]&#xff09;會進入書店&#xff0c;所有這些顧客都會在那一分鐘結束后離開。 在某些時候&#xff0c;書店老板會生氣。 如果書店老板在第 i 分鐘生氣&#xf…

amazon alexa_在Amazon Alexa上推出freeCodeCamp編碼瑣事測驗

amazon alexaNow you can learn coding concepts hands-free using an Amazon Echo.現在&#xff0c;您可以使用Amazon Echo免提學習編碼概念。 freeCodeCamp.org contributor David Jolliffe created a quiz game with questions on JavaScript, CSS, networking, and comput…