整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

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编程工具

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 锦江区 桥东区 迎泽区 迁西县 洛宁县 香格里拉县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服