自定義屬性：
?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.card{width: 100px;height: 100px;background-color: aqua;border: 1px solid black;}</style>
</head>
<body><!-- 固有屬性 id class style src href --><!-- 自定義屬性 有時候我們希望自己存一些自己定義的屬性 作用：存值 --><!--我們希望就是目前是有一列商品 但是我希望點擊的時候 能夠跳轉到新的頁面 肉眼可見沒什么用，而是我們要想辦法就是讓程序也可以清晰可見 --><!-- 我們先自定義一個屬性名為Product-id 然后我點擊的時候我希望拿到這個屬性--><div class="card" product-id="1">商品</div><div class="card">商品</div><div class="card">商品</div><div class="card">商品</div><div class="card">商品</div></body>
<script>//我們先去拿到所有的商品 var getProducts=document.querySelectorAll('.card')console.log(getProducts);getProducts.forEach(function (ele,index) {// 拿到每一個div對象console.log(ele);console.log(ele.className);// 重點：這里我們取自定義屬性名的方法console.log(ele.getAttribute('product-id'));// 所以這里我們判斷 記住 null就是為false在前端是這樣的 我們用可以這種方法去存if(!ele.getAttribute('product-id')){// 大寫駝峰不識別ele.setAttribute('product-id',index)}})</script>
</html>?
事件:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 1.通過標簽屬性綁定點擊事件 div onclick="函數調用"></div> 滿足了三個條件 事件源：div 事件類型:onclick或者是一個鼠標鍵盤的行為 事件源程序：放到onclick里面的--><div onclick="testOne(this)">這是一行字</div><button class="btn">第二綁定方式</button><!-- --><span>xxxx</span><button class="demo-btn">這是第二個按鈕</button><!-- 表單輸入標簽 --><input type="text" class="box"></body>
<script>// 事件重點中的重點 事件字面上來說就是可以被js檢測到的行為，點擊，拖拽，鍵盤，鼠標，對我這個網頁的交互行為// 我們針對用戶的行為去做代碼上的指定事情// 表單標簽就有輸入事件// 事件的三大部分// 事件源：比如我點擊一個按鈕 這個按鈕就是事件源// 事件類型：事件的觸發方式：單擊，雙擊 長按// 事件程序：對于這個事件源我要做什么事情，比如我點擊一個按鈕 右側要打開一個列表 那么打開的這個過程就是我們要寫的// 記住只要是事件 都包含兩個參數 一個是事件參數event自帶（保存一些事件相關信息） 一個是事件源的指向（this 本質就是自身的DOM對象）// 開發者工具切換設備仿真 鼠標點擊 和手機觸摸// 綁定的三種方式// 聲明一個函數 源程序的function testOne(_this) {console.log('你觸發了我，我真的謝謝你！！！');// 現在這個this指向整個html對象上去了 通過標簽屬性綁定的是沒有this的 除非在()里面聲明 需要手動傳入console.log(_this.innerText);}// 2.通過DOM對象.事件的綁定var btn=document.querySelector('.btn')// 直接寫事件 btn.onclick=function testTwo() {console.log("Two Two Two");}// 利用DOM對象.addEventListener 傳兩個參數 一個是綁定參數的類型 一個是源程序 那么第一個參數中如果是前綴有on的都可以不用寫document.querySelector('span').addEventListener('click',function testThree() {console.log("this is the third Method");console.log(event);console.log(this.innerText);})
</script>
<script>// 鼠標懸浮事件 鼠標移進去就修改顏色樣式var demoBtn=document.querySelector('.demo-btn')demoBtn.onmouseover=function(){console.log('dnksmxksmxksmsd');//但是移出去還沒有設置變回來demoBtn.style.backgroundColor='red'}demoBtn.onmouseout=function(){demoBtn.style.backgroundColor='green' }// 鍵盤事件一般是用在表單輸入標簽上面 以及我們可以設置如果輸入非法字符就怎么樣的一個思路 以及視頻的快進（去判斷按的按鈕是否是左鍵右鍵 如果是前進幾秒倒退幾秒）var boxDom=document.querySelector('input')boxDom.onkeydown=function(){console.log(this);console.log(event);var test=''if(isNaN(event.key)){this.value=test}}// 文檔對象也能添加事件 表示說當我進入整個網站頁面 我點擊哪個觸發哪些事件</script>
</html>冒泡事件：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="father">父親<button class="child">孩子</button></div></body><script>// 冒泡事件觸發的前提條件：// 嵌套層級上有相同的觸發事件類型var father =document.querySelector('.father')var child=document.querySelector('.child')father.onclick=function(){console.log('點擊了父親');event.stopPropagation()}// 當我點擊孩子的時候 父親這時候也觸發了兩個都觸發了 這個就是冒泡排序 一層一層往上觸發 先自己 然后哪一層有 就往上觸發child.onclick=function(){console.log('點擊了孩子');// 所以我們必須禁止冒泡 因為假如一個界面一個商品的界面有幾個立即購買，查看商品詳情 那么我不可能點一下同時觸發兩次。只停止自己的// 所以這種嵌套我們必須每一個function里面都寫event.stopPropagation()}</script>
</html>默認事件：（了解 框架幫我們做好了）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="https://cn.bing.com/?form=000047&ocid=msedgntp&pc=CNNDDB&cvid=682bcc6ea3704a9688bbb3a3b06ac7b3&ei=10"><input type="text"><!-- 只要這邊有按鈕就會有提交效果，跳轉網頁到action的網址路徑中去 --><!-- 如果我要輸入值校驗 來不及校驗就走掉 我們要在標簽提交前 去做校驗 --><button>提交</button></form></body>
<script>// 該方法阻止默認事件 比較少用 但是冒泡事件用得會比較多document.querySelector('form button').onclick=function(){// 這樣子我就可以安安心心地拿到所有值去判斷event.preventDefault()}</script>
</html>節點操作：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father{width: 100px;height: 100px;border: 1px solid black;}.title{width: 100px;height: 100px;background-color: aqua;}</style>
</head>
<body><!-- 一個標簽（不是在js）一般都是元素節點 一個是文本節點 --><!-- innnerHTML兩個都能夠修改 --><!-- innerText只能夠修改文本內容 --><div class="father"><div class="child">孩子 <span>x</span> <span>xxx</span></div><div class="brother">兄弟</div></div><div class="news-model"></div><!-- 創建一個按鈕 與節點刪除做測試 --><button onclick="del()">delll</button>
</body>
<script>// 現在就是要通過child去找它的兄弟 需要通過節點操作 因為如果有七八個的話沒必要
// 節點操作后面也是很少用 但是這個克隆節點 比如說彈幕點擊可以彈一個窗口回復（原來的位置保持不變） 或者說鼠標到彈幕停止滾動var chid=document.querySelector('.father .child')// 通過孩子可以找到父節點console.log(chid.parentElement);// 獲取孩子的子節點 目前只有文本節點 我再加一個span 比較少去取文本console.log(chid.childNodes);// 一般用這種方法去取 子元素節點console.log(chid.children);// -----------------------------// 現在去拿到父親節點var father=document.querySelector('.father')// 拿到的是childconsole.log(father.firstElementChild);// 獲取下一個相鄰的兄弟console.log(chid.nextElementSibling);// child 找到里面的第一個span 然后可以一直往下找// console.log(chid.firstElementChild.nextElementSibling.nextElementSibling);// 優化 我們可以用這種方法直接找到最后一個span 基于已有childDOM對象再去找它內部的東西var spanDOM=chid.querySelector('span:last-child')console.log(spanDOM);// 我們真正項目很少去寫DOM// 就是說我們要把這些數據打到頁面上去 之前的思路就是在body創建三個標簽 然后分別設置樣式 現在就是我們要根據這個數據去創建這樣的標簽// 1.先創建節點 括號表示要什么樣的標簽// 2.現在在代碼上我們得想辦法加到頁面上去 現在上面創建一個存放新聞的面板var newDOMS=document.createElement('div')var data=["今天下雨","XXX","sjdjnsjd"]console.log(newDOMS);// 補充：我們一般是在加入之前 把標簽的內容等構建好再加newDOMS.innerText='12235'newDOMS.classList.add('title')// 3.找到要添加的目標var targetNewModel=document.querySelector('.news-model')// 在內部往后加 一般是往后 括號填入創建好的 最初都是創建好的定死的，數據不可控 沒辦法根據數據的內容和數量去創建targetNewModel.appendChild(newDOMS)// 動態添加創建節點data.forEach(function (ele) {var newDOMS=document.createElement('div')newDOMS.innerText=ele// 在這邊我們也可以去添加事件newDOMS.onclick=function(){console.log('別再點我了 謝謝');}newDOMS.classList.add('title')targetNewModel.appendChild(newDOMS)// 所以只要我有數據我就可以根據數據的量和數據的內容去創建，動態的把頁面構建出來 現在的網站都這樣 數據不是定死 刷新一下可能就變了 都是利用DOM去操作的})// 節點刪除var btn11=document.createElement('button')btn11.innerText='mashang'// 加在body的最后面 只是測試document.querySelector('body').appendChild(btn11)function del(){console.log(btn11);// 調用該函數 刪除 代碼層面上還在 頁面上已經不存在了 btn11.remove()}// 節點克隆// 我現在想要把整個father節點給它克隆出來 沒有true的話克隆的只有當前father的元素 true的話就是father里面的元素也能夠被克隆// 與被克隆毫無相關var getDivFatherByClone=document.querySelector('.father').cloneNode()console.log(getDivFatherByClone);</script>
</html>
![洛谷B3840 [GESP202306 二級] 找素數](http://pic.xiahunao.cn/洛谷B3840 [GESP202306 二級] 找素數)
