自己筆記。一些JS入門知識&個人有興趣的功能(個人完全不會 JS,最多如這樣去研究修改別人寫好的:
[css筆記] 滑鼠點擊開啟/隱藏 文字段落 @ 小無的不臘閣 )
和新版 CSS3 的新功能(雖然沒現在打算用到的功能~但忍不住去看看內容XD(但其實去年底打了輕小說網頁
就實際用過了一些↓↓↓ 用了@media偵測使用者螢幕尺寸而變動CSS版面;和花俏的3層+各方向文字陰影XD
[感想] 我成為了解決劇情需求的皇女角色 全故事時間軸&劇情大意 1~66話 +劇情討論區備份
※ 表格內灰藍色為引用之內文(非本人打字)
JS基本 / jQuery JavaScript 隱藏/顯示元素 |
|
JS實現"隱藏與顯示"功能(多種方法) | 程式前沿 通過getElementById()這個方法找到對應元素,進而控制它的style,以此來做對應的功能。這是一個比較簡單的方法。 |
JavaScript 隱藏/顯示元素 | D棧 - Delft Stack https://www.delftstack.com/zh-tw/howto/javascript/javascript-hide-show-elements/ 使用 style.visibility 屬性隱藏/顯示 HTML 元素 |
Style display 属性 | JavaScript在线参考手册,DOM接口速查表 | 踏得网 https://techbrood.com/jsref?p=prop-style-display |
JavaScript 移動元素 | D棧 - Delft Stack 使用 JavaScript 中的 appendChild() 函式將一個元素的子元素移動到另一個父元素 |
getElementById 的應用 - 專題 https://sites.google.com/site/coolteazhuanti/javascript/getelementbyid-de-ying-yong 字面上來看document.getElementById會取得指定的id名稱物件。以標準來說,是不允許有重複的id... |
製作簡單的 v-visible. 在自己的專案上製作 v-visible 功能。 | by Jay | Medium https://happyjayxin.medium.com/%E8%A3%BD%E4%BD%9C%E7%B0%A1%E5%96%AE%E7%9A%84-v-visible-6f198ef149b6 在 Vue 裡面如果想要想要將某區塊在條件下出現或隱藏,可以使用像是 v-show 、v-if 的指令。 兩者差別就在於 v-if 是會根據條件而渲染出來 v-show 都會渲染出來,但是會根據條件用 CSS 隱藏。 |
[jQuery] 筆記 (五) – 選擇器 (selector) - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 基本選擇器(三個) |
啟動JavaScript函數方式/JavaScript呼叫函式的方法 Load 事件與 DOMContentLoaded /resize 事件 |
Html5 頁面中 JavaScript 啟動呼叫的三種方法比較 - IT閱讀 https://www.itread01.com/p/683349.html |
Day17 舞DOM人生: 常用事件大全 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 https://ithelp.ithome.com.tw/articles/10202307 |
重新認識 JavaScript: Day 14 事件機制的原理 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 JavaScript 是一個事件驅動 (Event-driven) 的程式語言,當瀏覽器載入網頁開始讀取後,雖然馬上會讀取 JavaScript 事件相關的程式碼,但是必須等到「事件」被觸發(如使用者點擊、按下鍵盤等)後,才會再進行對應程式的執行。 |
[ 筆記 ] JavaScript - 02 函式 https://mtr04-note.coderbridge.io/2020/06/22/about-function/ |
2018 iT 邦幫忙鐵人賽:重新認識 JavaScript 系列 重新認識 JavaScript: Day 05 JavaScript 是「傳值」或「傳址」? - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 重新認識 JavaScript: Day 11 前端工程師的主戰場:瀏覽器裡的 JavaScript - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 |
重新認識 JavaScript: Day 17 函式裡的「參數」 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 重新認識 JavaScript: Day 16 那些你知道與不知道的事件們 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天https://ithelp.ithome.com.tw/articles/10192175 若是在網頁 load 完成後才註冊 error 事件的 handler,你只會看到叉燒包或者破圖的結果,因為 error 事件不會再次被觸發,後來掛上去的 handler 就等於沒有一樣。resize 事件:當瀏覽器 (window) 或指定元素 (element) 的「尺寸變更」時觸發。 scroll 事件:當瀏覽器 (window) 或指定元素 (element) 的「捲軸被拉動」時觸發。 DOMContentLoaded 事件: 類似於 load 事件,但不同的是,load 事件是在網頁「所有」資源都已經載入完成後才會觸發,而 DOMContentLoaded 事件是在 DOM 結構被完整的讀取跟解析後就會被觸發,不須等待外部資源讀取完成。 簡單來說, DOMContentLoaded 與 load 的時機可以用這張圖來解釋: |
重新認識 JavaScript 番外篇 (6) - 網頁的生命週期 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 https://ithelp.ithome.com.tw/articles/10197335 所以此時我們就必須要利用 DOMContentLoaded 或 load 事件,來確保 DOM 結構被完整的讀取跟解析。 |
load - Web API 接口参考 | MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Window/load_event 它与DOMContentLoaded不同,后者只要页面DOM加载完成就触发,无需等待依赖资源的加载。 |
[Day15] JavaScript - JavaScript 事件與事件處理 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 常用的 HTML 事件:Load 與 Unload 的處理 |
html body 中onload 属性的作用是什么??_奔跑的蜗牛-CSDN博客 https://blog.csdn.net/qq_27918787/article/details/52639358 html onload不起作用,body标签onLoad执行无效,为何?_鸥恬老爹的博客-CSDN博客 https://blog.csdn.net/weixin_33293848/article/details/118146600 关于JSP中<body onload="fun()">body标签中onload中函数不执行问题_weixin_33772645的博客-CSDN博客 https://blog.csdn.net/weixin_33772645/article/details/94650146?spm=1001.2101.3001.6650.1 |
JavaScript 中的視窗大小調整事件 | D棧 - Delft Stack 使用 JavaScript 中的 addEventListener() 函式新增調整大小事件 |
.resize() : 为 JavaScript 的 "resize" 事件绑定一个处理函数,或者触发元素上的该事件。 - jQuery API 中文文档 | jQuery 中文网 https://www.jquery123.com/resize/ |
JS resize事件:視窗重置 - tw511教學網 在 JavaScript 中,resize 事件是在瀏覽器視窗被重置時觸發的,如當使用者調整視窗大小,或者最大化、最小化、恢復視窗大小顯示時觸發 resize 事件。利用該事件可以跟蹤視窗大小的變化以便動態調整頁面元素的顯示大小。 |
原生JavaScript 觸發事件表 - Tail 工具網 https://ipph.net/javascript-click/ |
JavaScript event 事件 - Wibibi https://www.wibibi.com/info.php?tid=384 JavaScript onchange 事件 - Wibibi https://www.wibibi.com/info.php?tid=208 |
用 JS 來觸發事件 @ 大笨鳥的私房菜 :: 痞客邦 :: https://camuschou.pixnet.net/blog/post/11608548 |
JS 頁面載入觸發事件 document.ready和window.onload的區別 - IT閱讀 https://www.itread01.com/content/1549880853.html |
Day17 舞DOM人生: 常用事件大全 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 https://ithelp.ithome.com.tw/articles/10202307 |
CSS3 :條件隱藏元素 "calc()函數" CSS 自定義屬性 |
使用CSS隐藏元素滚动条 - SegmentFault 思否 https://segmentfault.com/a/1190000019710081 |
Start: (css)CSS 實現隱藏滾動條同時又可以滾動 https://lightwave88.blogspot.com/2017/03/csscss.html |
css 根据判断条件显示或隐藏某标签_纯CSS实现点击展开全文功能_weixin_40001372的博客-CSDN博客 https://blog.csdn.net/weixin_40001372/article/details/112111346 |
css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用_Amen的博客-CSDN博客_css适应不同分辨率 CSS3 @media screen and (判断属性){ CSS样式选择器 } |
2020不容错过!24个CSS新特性来了-阿里云开发者社区 https://developer.aliyun.com/article/775995 |
详解16个CSS新特性(2021最新版-上)_淘系技术-CSDN博客 https://blog.csdn.net/Taobaojishu/article/details/118561010 详解16个CSS新特性(2021最新版-下)_淘系技术-程序员ITS201 - 程序员ITS201 https://its201.com/article/Taobaojishu/120574222 |
CSS沒有極限 - CSS的神奇Calc運算 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 https://ithelp.ithome.com.tw/articles/10130065 |
CSS calc() 函数 | 菜鸟教程 https://www.runoob.com/cssref/func-calc.html |
使用CSS自定义属性(变量) - CSS(层叠样式表) | MDN https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties |
CSS變量(自定義屬性) https://tech-wiki.online/tw/css-variables.html [CSS] 自定義變數帶你隨心所欲,一鍵換膚_Apollozz - MdEditor https://www.gushiciku.cn/pl/2AUE/zh-tw 【译】CSS 自定义属性的策略指南 - 掘金 https://juejin.cn/post/6844903634048647182 |
:nth-child() & :nth-last-child() - 你覺得燒腦但其實根本不燒腦的選取器 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 https://ithelp.ithome.com.tw/articles/10227216 :first-child & :last-child 頭尾選取器 - 有頭有尾有始有終的選取器 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 https://ithelp.ithome.com.tw/articles/10225779 使用CSS3 :nth-child(n) 選取器教學 | CSS可樂 http://csscoke.com/2013/09/21/%E4%BD%BF%E7%94%A8css3-nth-childn-%E9%81%B8%E5%8F%96%E5%99%A8%E8%A9%B3%E8%A7%A3/ 超簡單格相簿效果教學,使用 CSS3 nth-child只要五步驟! | CSS可樂 http://csscoke.com/2015/07/31/nth-child_rwd_album/ |
javascript 高度設定: offsetHeight/window.screen.height/style.height 註冊 document.addEventListener |
在 JavaScript 中獲取 div 元素的高度 | D棧 - Delft Stack https://www.delftstack.com/zh-tw/howto/javascript/javascript-get-height-of-div/ |
js style動態設定table高度 | 程式前沿 https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/282969/ |
透過 JavaScript 動態修改CSS 樣式、屬性 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 https://ithelp.ithome.com.tw/articles/10226003 |
JavaScript 修改 CSS 的值 (設置讀取 CSS) http://www.eion.com.tw/Blogger/?Pid=1135 |
【Javascript】Javascript動態設定頁面高度 - IT閱讀 https://www.itread01.com/content/1542424447.html |
js/jQ各種取寬高與位置 | 個人前端筆記 https://icguanyu.github.io/jquery/getsize/ |
JavaScript中的各種寬高屬性的實現_程式設計_程式人生 https://www.796t.com/article.php?id=20397 window.location 和 document.location offsetWidth 與 offsetHeight |
用javascript控制css中style.height和style.width时应注意px单位问题_ 飞翔的熊blabla-CSDN博客 https://blog.csdn.net/sd19871122/article/details/52891926 js 中style.height和offsetHeight比较_Yelbosh的专栏-CSDN博客 https://blog.csdn.net/Yelbosh/article/details/17412473?spm=1001.2101.3001.6650.1 javascript控制css中style.width和style.height属性时单位px的问题_GreenOfBamboo的专栏-CSDN博客 https://blog.csdn.net/GreenOfBamboo/article/details/4650282?spm=1001.2101.3001.6661.1 |
事件 (Event) 的註冊、觸發與傳遞. 讓我們來聊聊 JavaScript 裡的 Event 與… | by realdennis | Medium https://realdennis.medium.com/javascript-%E4%BA%8B%E4%BB%B6-event-da8104c5c98c |
重新認識 JavaScript: Day 14 事件機制的原理 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 https://ithelp.ithome.com.tw/articles/10191970 事件的註冊綁定 剛剛我們看過 addEventListener 方法對事件的綁定,事實上綁定事件的方式還有其他方式,我們這裡來一一介紹。 |
*
留言列表