jQuery - 獲取內容和屬性

Query 擁有可操作 HTML 元素和屬性的強大方法。

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。

獲得內容 - text()、html() 以及 val()

三個簡單實用的用于 DOM 操作的 jQuery 方法：

text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值

下面的例子演示如何通過 jQuery text() 和 html() 方法來獲得內容：

實例

$("#btn1").click(function(){alert("Text: " + $("#test").text());});$("#btn2").click(function(){alert("HTML: " + $("#test").html());});

嘗試一下 ?

下面的例子演示如何通過 jQuery val() 方法獲得輸入字段的值：

實例

$("#btn1").click(function(){alert("值為: " + $("#test").val());});

獲取屬性 - attr()

jQuery attr() 方法用于獲取屬性值。

下面的例子演示如何獲得鏈接中 href 屬性的值：

實例

$("button").click(function(){alert($("#runoob").attr("href"));});

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

DOM = Document Object Model（文檔對象模型）

DOM 定義訪問 HTML 和 XML 文檔的標準：

"W3C 文檔對象模型獨立于平臺和語言的界面，允許程序和腳本動態訪問和更新文檔的內容、結構以及樣式。"

C#中，你可以使用System.Net.Http.HttpClient來從網頁獲取HTML內容，然后使用System.Text.RegularExpressions.Regex來解析和提取HTML中的<title>標簽內容。以下是一個簡單的示例，演示了如何執行此操作：

csharpusing System;
using System.Net.Http;
using System.Text.RegularExpressions;
using System.Threading.Tasks;

class Program
{
    static readonly HttpClient client = new HttpClient();

    static async Task Main(string[] args)
    {
        try
        {
            // 要抓取內容的網頁URL
            string url = "http://example.com";
            
            // 發送HTTP GET請求獲取網頁內容
            string htmlContent = await client.GetStringAsync(url);

            // 正則表達式，用于匹配<title>標簽內的內容
            string titlePattern = @"<title>(.+?)</title>";

            // 使用Regex.Match方法查找匹配項
            Match match = Regex.Match(htmlContent, titlePattern);

            // 如果找到了匹配項
            if (match.Success)
            {
                // 提取<title>標簽內的內容
                string title = match.Groups[1].Value;

                // 輸出提取到的title
                Console.WriteLine("網頁標題: " + title);
            }
            else
            {
                Console.WriteLine("未找到<title>標簽。");
            }
        }
        catch (HttpRequestException e)
        {
            Console.WriteLine("\nException Caught!");
            Console.WriteLine("Message :{0} ", e.Message);
        }
    }
}

在這個示例中，我們首先創建了一個HttpClient實例，然后使用GetStringAsync方法異步獲取網頁的HTML內容。接下來，我們定義了一個正則表達式titlePattern，用于匹配<title>標簽中的文本。Regex.Match方法用于在HTML內容中查找匹配項。如果找到匹配項，我們就從匹配結果中提取出標題文本并打印出來。

請注意，使用正則表達式解析HTML可能不是最可靠的方法，因為HTML的結構可能會非常復雜，并且正則表達式可能無法正確處理所有情況。在實際應用中，建議使用HTML解析庫（如AngleSharp或HtmlAgilityPack）來解析HTML文檔，這樣可以更健壯和準確地提取所需的信息。

下面是一個使用HtmlAgilityPack庫提取網頁標題的示例：

csharpusing System;
using System.Net.Http;
using HtmlAgilityPack;
using System.Threading.Tasks;

class Program
{
    static readonly HttpClient client = new HttpClient();

    static async Task Main(string[] args)
    {
        try
        {
            // 要抓取內容的網頁URL
            string url = "http://example.com";
            
            // 發送HTTP GET請求獲取網頁內容
            string htmlContent = await client.GetStringAsync(url);

            // 加載HTML內容到HtmlDocument對象
            HtmlDocument doc = new HtmlDocument();
            doc.LoadHtml(htmlContent);

            // 使用XPath查詢找到<title>元素并獲取其InnerText
            var titleNode = doc.DocumentNode.SelectSingleNode("//title");
            if (titleNode != null)
            {
                string title = titleNode.InnerText;
                Console.WriteLine("網頁標題: " + title);
            }
            else
            {
                Console.WriteLine("未找到<title>標簽。");
            }
        }
        catch (HttpRequestException e)
        {
            Console.WriteLine("\nException Caught!");
            Console.WriteLine("Message :{0} ", e.Message);
        }
    }
}

在這個示例中，我們使用了HtmlAgilityPack庫來加載HTML內容，并使用XPath查詢來定位<title>標簽。這種方法通常比使用正則表達式更加穩定和可靠。在使用HtmlAgilityPack之前，你需要通過NuGet安裝它：

bashInstall-Package HtmlAgilityPack

或者，如果你使用.NET Core CLI，可以運行：

Query 中包含更改和操作 HTML 元素和屬性的強大方法。我們可以通過這些方法來獲取 HTML 元素中的文本內容、元素內容（例如HTML標簽）、屬性值等。

text()方法

text() 方法可以用于設置或獲取所選元素的文本內容。

示例：

例如我們獲取下列 <p> 標簽中的文本內容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    var content = $('.hello').text();
    alert(content);
  });
</script>
</head>
<body>
  <p class="hello">你好，歡迎來到俠課島!</p>
  <div>
    <p>希望俠課島中有適合你的編程課程。</p>
  </div>
</body>
</html>

在瀏覽器中演示效果：

除了獲取文本內容，text() 還可以用于設置文本內容，我們可以來看一下。

示例：

例如通過 text() 將 .content 的文本內容設置為 hello, xkd!：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $('.content').text("hello, xkd!");
    });
  });
</script>
</head>
<body>
  <p class="content">你好，歡迎來到俠課島!</p>
  <p><button>點擊按鈕</button></p>
</body>
</html>

在瀏覽器中演示效果：

html()方法

html() 方法用于設置或返回所選元素的內容（包括HTML標記）。

示例：

通過 html() 方法獲取 p 元素的內容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    var content = $('.hello').html();
    alert(content);
  });
</script>
</head>
<body>
  <p class="hello">你好，歡迎來到俠課島!</p>
</body>
</html>

在瀏覽器中演示效果：

除此之外，我們還可以使用 html() 方法來設置指定元素的內容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $('.hello').html('你好，歡迎來到俠課島!');
  });
</script>
</head>
<body>
  <p>向下面的p標簽中添加文本內容：</p>
  <p class="hello"></p>
</body>
</html>

在瀏覽器中演示效果：

val()方法

val() 用于設置或返回表單字段的值。該方法大多時候用于 input 元素。

示例：

例如獲取輸入框 input 中的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      alert($('input').val());
    });
  });
</script>
</head>
<body>
  文本輸入框：<input type="text" name="name" value="summer" />
  <p>
    <button>獲取輸入框的值</button>
  </p>
</body>
</html>

在瀏覽器中演示效果：

如果要使用 val() 方法設置 value 的值，我們可以像下面這樣做：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $('input').val('summer')
    });
  });
</script>
</head>
<body>
  文本輸入框：<input type="text" name="name" value="" />
  <p>
    <button>獲取輸入框的值</button>
  </p>
</body>
</html>

在瀏覽器中演示效果：

attr()方法

attr() 方法用于設置或返回被選元素的屬性值。

示例：

例如下面這個例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    alert($('div').attr("class"));
  });
</script>
</head>
<body>
  <div class="xkd">獲取class屬性的值</div>
</body>
</html>

在瀏覽器中演示效果：

attr() 方法除了獲取元素的屬性值，還可以設置元素的屬性值，我們來看一下。

示例：

將下面 <div> 標簽中的 class 屬性的值設置為 summer：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $('div').attr("class", "summer")
  });
</script>
</head>
<body>
  <div>設置class屬性的值</div>
</body>
</html>

在瀏覽器中演示效果：

鏈接：https://www.9xkd.com/

在線咨詢

上一篇：「javascript」練習題整理(持續更新)
下一篇：資深程序員推薦七大JavaScript編程工具