js(Dom+Bom)第三天（2）

webAPI

0-操作標簽屬性

  1. 系統屬性

    • 作用:

      1. 可以操作標簽身上的任何一個系統中的自帶屬性 (id, class, name ....)
2. 還可以操作用戶自定義的屬性

    • dom.getAttribute(屬性名)；

      作用: getAttribute(屬性名) 方法 就是用來獲取標簽身上屬性的備注:
1. getAttribute() 方法中放的是一個屬性的名字
2. getAttribute() 方法中只能獲取對應的一個屬性
3. getAttribute() 方法如果沒有獲取到對應的屬性值,那么就返回 null ,代表沒有

    • dom.setAttribute(屬性名,值);

      作用: 給標簽設置屬性(系統屬性 + 自定義屬性)例如:
div.setAttribute('id', 'one');
div.setAttribute('myage', '18');

    • dom.removeAttribute(屬性名)；

      作用: 將標簽身上的屬性移除(系統屬性 + 自定義屬性)例如:
div.removeAttribute('myname');
div.removeAttribute('id');

  2. 自定義屬性

    • 標簽屬性(自定義屬性)的作用是什么?

      屬性就是用來保存數據的.

    • 什么是自定義屬性?

      • 自定義屬性: 程序員自己定義的一個屬性

      • 為什么會有自定義屬性?

        自定義屬性: 為了保存程序自己的一些數據.

    • 最新的最標準的自定義屬性的寫法

      所有的自定義的屬性, 以  'data-'開始<div myname='dhl'   data-myname='zs'></div>

    • 設置自定義屬性

      dom.dataset.自定義屬性名稱 = 值;

    • 獲取自定義屬性

      dom.dataset備注:
1. 只能獲取自定義屬性, 不能獲取系統屬性
2. dataset 存放的結果是一個對象
3. 訪問dataset對象中的值,不能 帶有 'data-';

  3. 總結

  4. 課堂練習-自定義屬性tab欄切換案例

1-文本框事件

  1. onfocus事件

    當輸入框獲取鼠標焦點的時候,就會觸發該事件

  2. onblur事件

    當輸入框失去焦點的時候,就會觸發onblur事件

  3. 課堂案例-搜索框案例

2-鼠標事件

  1. onmouseenter 事件

    當鼠標進入時候觸發的一個事件

  2. onmouseleave 事件

    當鼠標離開時候觸發的一個事件

  3. onmouseover 事件

    當鼠標懸停到標簽之上觸發的一個事件

  4. onmouseout 事件

    當鼠標離開時候觸發的一個事件

  5. 課堂案例-鼠標進入隔行變色案例

  6. 課堂案例-ta欄切換

3-回顧獲取頁面元素

  1. 通過標簽ID
  2. 通過標簽名稱
  3. 通過選擇器

4-通過DOM節點方式獲取元素

4-0注意事項

下面的內容都在在文檔樹上直接操作的 (節點 + 元素)重點是: 與元素相關的內容

4-1與父節點相關的操作方式

4-1-1.知識點-判斷父元素中是否有子節點

語法:
DOM.hasChildNodes();
  • 總結:
    1. 該方法返回的是一個布爾類型的結果
    2. 該方法會將元素中所有的節點都獲取（包括空格，回車符，文字，標簽等）

4-1-2.知識點-獲取父元素中所有子元素

語法:
DOM.children
  • 總結:
    1. chiledren是一個屬性，不是一個方法
    2. 該屬性返回父元素中所有子元素（只包含標簽），不包括空格，回車符，純文本等
    3. 返回一個偽數組
    4. 通過dom.children.length來判斷是否存在子元素(長度是為0)

4-1-3.知識點-獲取父元素中第一個子元素

語法:
DOM.firstElementChild
  • 總結:
    1. 通過該屬性可以將父元素中的第一個子元素獲取到【標簽】
    2. 該屬性只能獲取標簽，無法獲取文字，空格，回車符等節點

4-1-4.知識點-獲取父元素中最后一個子元素

語法:
DOM.lastElementChild
  • 總結
    1. 通過該屬性可以將父元素中最后一個子元素獲取到【標簽】
    2. 該屬性只能獲取標簽，無法獲取文字，空格，回車符等節點

4-1-5.知識點-獲取父元素中所有子節點(了解)

語法:
DOM.childNodes
  • 總結
    1. childNodes是一個屬性，不是一個方法
    2. 該屬性將父元素中所有節點返回（包括回車，空格等特殊符號）
    3. 該屬性將回車符看做是一個空的文本

4-1-6.知識點-獲取父元素中第一個子節點(了解)

語法:
DOM.firstChild
  • 總結
    1. 通過該屬性可以將父元素中第一個節點得到
    2. 節點中包括文字，回車符，換行符等

4-1-7.知識點-獲取父元素中最后一個子節點(了解)

語法:
DOM.lastChild
  • 總結
    1. 通過該屬性將父元素中最后一個節點得到
    2. 節點中包括文字，回車符，換行符等

4-2與子節點相關的操作方式

4-2-1.知識點-獲取上一個兄弟元素

語法:
DOM.previousElementSibling

4-2-2.知識點-獲取下一個兄弟元素

語法:
DOM.nextElementSibling

4-2-3.知識點-獲取下一個兄弟節點

語法:
DOM.nextSibling

4-2-4.知識點-獲取上一個兄弟節點

語法:
DOM.previousSibling

4-2-5.知識點-根據子節點獲取父元素

語法:
DOM.parentNode

4-3節點屬性

4-3-1.知識點-獲取節點類型

語法:
DOM.nodeType總結:
1.  如果nodeType返回值是1，那么代表當前節點是一個標簽
2.  如果nodeType返回值是3，那么代表當前節點是一個文本
3.  如果nodeType返回值是2，代表標簽中的一個屬性

4-3-2.知識點-獲取節點名稱

語法:
DOM.nodeName總結:
1. 如果當前節點是一個標簽，那么通過該屬性返回該標簽的名稱
2. 如果當前節點是一個文本，那么通過該屬性返回 #text

5-動態創建元素

  1. 知識點-通過document.write動態創建元素

  2. 知識點-通過innerHTMl動態創建元素

  3. 知識點-通過document.createElement()方式創建元素

    • 步驟:
      • document.createElement(‘標簽名’)
      • 通過appendChild(‘子元素’)添加到父元素中

  4. 課堂練習-根據數組動態創建列表

    var ary = ['張三', '李四', '王五', '趙六'];

  5. 課堂案例-根據數組動態創建英雄列表

    var heads = ['姓名', '年齡', '性別', '學號', '薪資', '城市', '操作'];
var datas = [
{name:'歐陽霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'上海'},
{name:'令狐霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'諸葛霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'南京'},
{name:'西門霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'深圳'},
{name:'鳩摩智',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'段延慶',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'段正淳',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'容子矩',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'崔綠華',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'梅超風',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'魯有腳',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'焦木和尚',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'韓小瑩',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'侯通海',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'歐陽克',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'歐陽峰',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'玄真道人',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'司徒伯雷',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'陳近南',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'張康年',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'吳大鵬',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'西奧圖三世',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'任盈盈',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'林遠圖',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'鄭鏢頭',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'張金鏊',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'陳歪嘴',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'洪人雄',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'余人彥',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'勞德諾',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'玉鐘子',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'史鏢頭',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'東方不敗',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}];

    • 移除子元素

      父元素.removeChild(子元素);

  6. 課堂案例-動態創建英雄圖片

6-其他方式創建元素

  1. 父節點.insertBefore(“新的節點”,“舊的子節點”)

    通過insertBefore可以在父元素中某一個子元素的前面添加一個新元素

  2. 父節點.replaceChild(“新節點”,“舊節點”)

    通過新節點將原來的節點替換掉

  3. 元素.cloneNode(true| false)

    true: 代表克隆元素內部的所有信息
false: 默認。只克隆外邊的標簽

  4. 課堂案例-微博案例

  5. oninput事件

    DOM.oninput = function() {}

7-注冊事件

  1. 知識點-通過 on 方式給元素注冊事件

  2. 知識點-通過addEventListener方式注冊事件

    • 語法

      DOM.addEventListener('事件類型',function(){});例如:
div.addEventListener('click', function(){});注意:
通過addEventListener元素注冊事件的時候,事件類型前不需要加 'on'

    • 特點

  3. 知識點-移除事件

    • 移除 on方式注冊的事件

      DOM.事件類型 = null;

    • 移除addEventListener注冊的事件

      DOM.removeEventListener('事件類型', 函數名)注意:
如果要通過removeEventListener移除事件的時候,那么addEventListener注冊事件的時候需要是命名函數

8-事件流

  1. 知識點-事件冒泡
  2. 知識點-事件捕獲
  3. 知識點-事件執行
  4. 知識點-事件委托
  5. 知識點-事件對象參數
    • e.target : 獲取真正觸發事件的對象
    • e.type： 事件類型
    • e.clientX
      • 特點: 相對body
    • e.clientY
    • e.offsetX
      • 特點:相對父元素左上角
    • e.offsetY
    • e.pageX
      • 特點:相對整個頁面包括滾動出去的位置
    • e.pageY
    • e.screenX
      • 特點:相對整個電腦屏幕
    • e.screenY
    • e.stopPropagation() 阻止事件冒泡
  6. 課堂案例-鼠標移動案例

9.鍵盤事件

  1. 知識點-onkeydown事件

  2. 知識點-onkeyup事件

  3. 知識點-onkeypress事件

  4. 鍵盤事件對象參數

    • e.key

    • e.keyCode

  5. 課堂案例-鍵盤移動案例

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

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

相關文章

xshell使用指南

xshell使用指南

shell使用指南 ZMODEM功能 yum install lrzsz rz 上傳 sz 下載 快捷鍵 alt o 打開終端 alt 1-9 切換 ctrl alt 切換 ctrl shift n 打開新選項卡 vim的小鍵盤不能使用的問題 在會話的屬性中&#xff0c;將VT模式的初始數字鍵盤設置為普通 配色方案 保存成xcs文件&#xff0c…
閱讀更多...
C#Socket編程詳解（一）TCP與UDP簡介

C#Socket編程詳解（一）TCP與UDP簡介

一、TCP與UDP&#xff08;轉載&#xff09; 1、TCP 1.1 定義 TCP&#xff08;TransmissionControl Protocol&#xff09;傳輸控制協議。 是一種可靠的、面向連接的協議&#xff08;eg:打電話&#xff09;、傳輸效率低全雙工通信&#xff08;發送緩存&接收緩存&#xff09;、…
閱讀更多...
動態創建表格數據

動態創建表格數據

<input type"button" value"創建"><style>*{margin: 0;padding: 0;}table{width: 980px;margin: 50px auto;}table,th,tr,td{text-align: center;border: 1px solid #ccc;}</style><script>var heads [姓名, 年齡, 性別, 學號, 薪…
閱讀更多...
第四節：EF Core的并發處理

第四節：EF Core的并發處理

1.說明 和EF版本的并發處理方案一致&#xff0c;需要知道樂觀并發和悲觀并發的區別&#xff0c;EF Core只支持樂觀并發&#xff1b;監控并發的兩種方案&#xff1a;監測單個字段和監測整條數據&#xff0c;DataAnnotations 和 FluentApi的兩種配置方式。 &#xff08;PS&#x…
閱讀更多...
js(Dom+Bom)第四天（1）

js(Dom+Bom)第四天（1）

webAPI 1-通過DOM節點方式獲取元素 1-0注意事項 下面的內容都在在文檔樹上直接操作的 (節點 元素)重點是: 與元素相關的內容1-1與父節點相關的操作方式 1-1-1.知識點-判斷父元素中是否有子節點 語法: DOM.hasChildNodes();總結: 該方法返回的是一個布爾類型的結果該方法會…
閱讀更多...
vue官方eslint插件配置eslint-plugin-vue-libs

vue官方eslint插件配置eslint-plugin-vue-libs

由于eslint-config-vue已經被廢棄&#xff0c;于是總結了一下eslint-plugin-vue-libs的eslint config配置&#xff0c;如下&#xff1a; module.exports {extends: [plugin:vue/essential],plugins: [vue-libs],parserOptions: {parser: require.resolve(babel-eslint),ecmaVe…
閱讀更多...
JS中的prototype

JS中的prototype

JS中的phototype是JS中比較難理解的一個部分(轉自出處&#xff1a;&#xff08;http://www.cnblogs.com/yjf512/&#xff09;) 本文基于下面幾個知識點: 1 原型法設計模式 在.Net中可以使用clone()來實現原型法 原型法的主要思想是&#xff0c;現在有1個類A,我想要創建一個類B,…
閱讀更多...
微博發布案例

微博發布案例

推薦在寫動態生成標簽數據的時候&#xff0c;提前寫一遍htmlcss的結構&#xff0c;方便提供寫照模板 <div class"box"><!-- 頂部搜索框 --><div class"inputBox"><textarea maxlength"200"></textarea></div&…
閱讀更多...
1.3 Go語言基礎之數據類型

1.3 Go語言基礎之數據類型

Go語言中有豐富的數據類型&#xff0c;除了基本的整型、浮點型、布爾型、字符串外&#xff0c;還有數組、切片、結構體、函數、map、通道&#xff08;channel&#xff09;等。Go 語言的基本類型和其他語言大同小異。 一、整型 1.1 基本類型 整型分為以下兩個大類&#xff1a; 按…
閱讀更多...
Oracle新建用戶并授權

Oracle新建用戶并授權

使用擁有dba權限的用戶都可以新建用戶以及授權 1、新建用戶 create user 用戶名 identified by 密碼&#xff1b; 2、授權 grant connect, resource to 用戶名; grant dba to 用戶名; 轉載于:https://www.cnblogs.com/langgj/p/11387485.html
閱讀更多...
【網絡安全】關于ARP攻擊的原理以及在Kali Linux環境下的實現

【網絡安全】關于ARP攻擊的原理以及在Kali Linux環境下的實現

轉自&#xff1a;https://www.cnblogs.com/rebrust/p/6096101.html 全文摘要 本文講述內容分為兩部分&#xff0c;前半部分講述ARP協議及ARP攻擊原理&#xff0c;后半部分講述在Kali Linux環境下如何實現ARP攻擊以及ARP欺騙&#xff0c;如果對于ARP攻擊的背景和原理不感興趣的話…
閱讀更多...
動態創建英雄圖片

動態創建英雄圖片

推薦在寫動態生成標簽數據的時候&#xff0c;提前寫一遍htmlcss的結構&#xff0c;方便提供寫照模板 <input type"button" value"按鈕"><style type"text/css">* {margin: 0;padding: 0;list-style: none;}ul {width: 600px;margin…
閱讀更多...
第五節：EF Core中的三類事務(SaveChanges、DbContextTransaction、TransactionScope)

第五節：EF Core中的三類事務(SaveChanges、DbContextTransaction、TransactionScope)

一. 說明 EF版本的事務介紹詳見&#xff1a; 第七節: EF的三種事務的應用場景和各自注意的問題(SaveChanges、DBContextTransaction、TransactionScope)。 本節主要介紹EF Core下的三種事務的用法和各自的使用場景&#xff0c;其中SaveChanges和DBContextTransaction事務與EF版…
閱讀更多...
教你簡單理解分布式與傳統單體架構的區別

教你簡單理解分布式與傳統單體架構的區別

教你簡單理解分布式與傳統單體架構的區別 原文:教你簡單理解分布式與傳統單體架構的區別分布式是一種系統架構方式&#xff0c;而在分布式系統中一般基于中間件進行開發&#xff0c;消息中間件是分布式系統中比較核心的中間件之一。這三樣東西隨便拿出一個來都可能要說上半天&a…
閱讀更多...
js(Dom+Bom)第五天（1）

js(Dom+Bom)第五天（1）

JavaScript BOM介紹 概念 BOM&#xff08;Browser Object Model&#xff09;即瀏覽器對象模型。 本質&#xff1a; 通過對象抽象瀏覽器中的一些功能 例如&#xff1a;&#xff08;刷新頁面&#xff0c;alert,confirm,pormpt,跳轉 ...&#xff09;BOM頂級對象 window對象是js中…
閱讀更多...
第六節：深究事務的相關性質、隔離級別及對應的問題、死鎖相關

第六節：深究事務的相關性質、隔離級別及對應的問題、死鎖相關

一. 相關概念 前面系列中的章節的&#xff1a; 第二十二節: 以SQLServer為例介紹數據庫自有的鎖機制(共享鎖、更新鎖、排它鎖等&#xff09;和事務隔離級別 介紹了各種鎖以及事務的隔離級別&#xff0c;是從數據庫的角度進行介紹的&#xff0c;本章節是通過EF Core為載體&…
閱讀更多...
js(Dom+Bom)第五天（2）

js(Dom+Bom)第五天（2）

webAPI 01-事件監聽 為什么要學事件監聽 之前給元素注冊事件的時候,同一個事件會被覆蓋掉事件監聽的本質 通過另外一種方式給元素注冊事件, 同時可以解決同一個事件不會被覆蓋掉.知識點-通過 on 方式給元素注冊事件 之前注冊事件的方式:事件源.onclick function() {}on是一種…
閱讀更多...
UIAutomator簡介

UIAutomator簡介

簡介 Android 4.3發布的時候包含了一種新的測試工具–uiautomator&#xff0c;uiautomator是用來做UI測試的。也就是普通的手工測試&#xff0c;點擊每個控件元素 看看輸出的結果是否符合預期。比如 登陸界面 分別輸入正確和錯誤的用戶名密碼然后點擊登陸按鈕看看是否能否登陸以…
閱讀更多...
從零開始實現ASP.NET Core MVC的插件式開發(五) - 插件的刪除和升級

從零開始實現ASP.NET Core MVC的插件式開發(五) - 插件的刪除和升級

標題&#xff1a;從零開始實現ASP.NET Core MVC的插件式開發(五) - 使用AssemblyLoadContext實現插件的升級和刪除 作者&#xff1a;Lamond Lu 地址&#xff1a;https://www.cnblogs.com/lwqlun/p/11395828.html 源代碼&#xff1a;https://github.com/lamondlu/Mystique 前景回…
閱讀更多...
JDBC Druid式link

JDBC Druid式link

準備工作&#xff1a;導入包------druid-1.0.9.jar src文件夾下放下druid.properties文件 且其中的url和數據庫名要配置完備 import JdbcUtils.JDBCUtils;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.PseudoColumnUsage;import java.sql…
閱讀更多...
最新文章

Copyright @ 2022~2023