當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

网页的行为

發布時間：2023/12/19 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了网页的行为小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

總第62篇

本篇為爬蟲基礎知識第三篇，JavaScript篇，JavaScript是描述網站行為的，是為了增加與用戶的交互，前兩篇傳送地址：

網頁是怎么構成的？

網頁的修飾

01|JavaScript是什么：

JavaScript 是一種輕量級的編程語言。
JavaScript 是可插入 HTML 頁面的編程代碼。
JavaScript 插入 HTML 頁面后，可由所有的現代瀏覽器執行，以此來增加HTML頁面的交互性。

02|JavaScript怎么用：

1、HTML 中的腳本放在<script>和</script>標簽之間。腳本可被放置在 HTML 頁面的<body>和<head>部分中，或者同時存在于兩個部分中。

<body><p>JavaScript 能夠直接寫入 HTML 輸出流中：</p><script>document.write("<h1>這是一個標題</h1>");document.write("<p>這是一個段落。</p>");</script></body><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <script>function myFunction(){document.getElementById("demo").innerHTML="我的第一個 JavaScript 函數";}</script></head>

2、注釋

我們可以添加注釋來對 JavaScript 進行解釋，或者提高代碼的可讀性。單行注釋以 /**/ 開頭。多行注釋以 /?/開始，以 / /結尾。

03|JavaScript有什么用：

1、直接寫入HTML輸出流

<body><p>JavaScript 能夠直接寫入 HTML 輸出流中：</p><script>document.write("<h1>這是一個標題</h1>");document.write("<p>這是一個段落。</p>");</script></body>

2、對事件作出反應

<body><h1>我的第一個 JavaScript</h1> <p> JavaScript 能夠對事件作出反應。比如對按鈕的點擊： </p> <button type="button" onclick="alert('歡迎!')">點我!</button> //alert()表示彈出警告信息</body>

Button 對象代表一個按鈕。在 HTML 文檔中標簽每出現一次，Button 對象就會被創建。button有type和value兩個屬性，type表示按鈕類型，其屬性值有submit(提交)、button(點擊)、reset（重置）；value表示設置或返回顯示在按鈕上的文本。

3、改變HTML內容：

<body><p id="demo"> JavaScript 能改變 HTML 元素的內容。 </p><script> function myFunction() {x=document.getElementById("demo"); ?// 找到元素x.innerHTML="Hello JavaScript!"; ? ?// 改變內容 } </script><button type="button" onclick="myFunction()">點擊這里</button></body>

getElementById() 方法返回指定 ID 的第一個對象的引用。innerHTML 屬性設置或返回開始和結束標簽之間的 HTML。除了getElementById() 之外，還有getElementsByName() 和 getElementsByTagName()。

4、改變HTML樣式

<body><p id="demo"> JavaScript 能改變 HTML 元素的樣式。 </p><script> function myFunction() {x=document.getElementById("demo") // 找到元素x.style.color="#ff0000"; ? ? ? ? ?// 改變樣式 } </script><button type="button" onclick="myFunction()">點擊這里</button></body>

04|jQuery

jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。

jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。

1、基本選擇器

2、屬性過濾器

3、過濾選擇器

05|JavaScript HTML Dom：

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。HTML DOM 模型被構造為對象的樹：

通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。

1、通過Id查找HTML元素

document.getElementById()

<p id="intro">你好世界!</p> <p>該實例展示了 <b>getElementById</b> 方法!</p><script> x=document.getElementById("intro"); document.write("<p>文本來自 id 為 intro 段落: " + x.innerHTML + "</p>"); </script>//輸出結果為：文本來自 id 為 intro 段落: 你好世界!

2、通過標簽名查找HTML元素

document.getElementsByTagName()

<div id="main"> <p> DOM 是非常有用的。</p> <p>該實例展示了 ?<b>getElementsByTagName</b> 方法</p> </div><script> var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); document.write('id="main"元素中的第一個段落為：' + y[0].innerHTML); </script>//輸出結果為：id="main"元素中的第一個段落為： DOM 是非常有用的。

3、通過類名查找HTML元素

document.getElementsByClassName()

<p class="intro">你好世界!</p> <p>該實例展示了 <b>getElementsByClassName</b> 方法!</p> <script> x=document.getElementsByClassName("intro"); document.write("<p>文本來自 class 為 intro 段落: " + x[0].innerHTML + "</p>"); </script>//輸出結果為：文本來自 class 為 intro 段落: 你好世界!

總結

以上是生活随笔為你收集整理的网页的行为的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

网页