【前端】【利器】JQuery使用笔记：用途一网页结构提取

2021-3-15 MARK CLEMENS

JQuery使用笔记【利器】用途之一：网页结构提取

问题来由

• 为什么想起来要用JQuery 呢?
  • 有些非常冗长的文章，没有设置目录，这就让人很难把握这篇文章到底讲了些什么。
  • 另外的情况就是，想要快速地获取网页中数据——不太好进行人工提取的数据。
  • JQuery可以是一种极为简化且强大的JS编程语言，在浏览器的Console里面就能上手用。

1. JQuery简介

jQuery 是一个 JavaScript 函数库。

使用于网页：jQuery 库可以通过一行简单的标记被添加到网页中。

jQuery 库包含以下特性：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

来吧，上维基百科：

jQuery是一套跨浏览器的JavaScript函式库，简化HTML与JavaScript之间的操作。[1]由约翰·雷西格（John Resig）在2006年1月的BarCamp NYC上释出第一个版本。目前由Dave Methvin领导的团队进行开发。全球前10,000个访问最高的网站中，有65%使用了jQuery，是目前最受欢迎的JavaScript函式库[2][3]。

2. JQuery(元素)选择器

这里要写就比较多了，请直接看W3C 网站上的教程吧。

当做工具书来用就行，也不难。

资料连接：==W3C-JQuery==

• cheatsheets

• JQuery选择器   label .class [attr] #id
  $("h3:first").text()  选择匹配元素的内容 // 标签
  $("h3").html()  选择匹配元素的第一个出现的Html内容
  $("[value='[object Object]']").text()  // [属性=值]
  $(".question-title").text()  // .class的名称 #id的名称
  *
  $("tr").length
  $("tr:eq(0)").text()  选取标签为tr 第0个元素  :eq(n)
  $("[href=#]:eq(0)").attr("onclick")  // 第0个元素 .attr  #JSON.stringify(jsArr) obj2str
  * 
  

3. JQuery中的text(),html()和val()函数的区别

资料连接

• 首先，.html() .text() .val()三种方法都是用来读取选定元素的内容

默认是无参函数(本文使用也是把他们当做无参函数来用),如果给定参数，这些函数的作用就是找到目标元素，并根据你给的参数进行目标元素的替换。

• text() 方法方法设置或返回被选元素的文本内容
  • .html()是用来读取元素的html内容，
• html() 方法返回或设置被选元素的内容 (inner HTML)，包括标签。
  • .text()用来读取元素的纯文本内容，包括其后代元素
• val() 方法返回或设置被选元素的值。
  • 1. 该方法大多用于 input 元素。
  • 2. .val()是用来读取表单元素的"value"值。

4. 提取数据存在的问题

下面这条代码，可以提取你想要的数据（三级标题的文字），但是这些文字都是直接拼接为一个字符串了，根本无法使用。

$(“h3”).text()

out:

so:

所以，需要把三级标题一个个地进行提取和打印输出。这样才能看到规整的数据。

5. 数据提取的方案（省流助手：可以直接看这里）

直接用代码模板吧，下文代码亲测可行（两个版本的都行，有python内味儿了）。

//! F12 打开元素审查，选择console窗口，输入以下代码，回车执行。
//! 测试目标网站：https://www.nowcoder.com/discuss/452732

//易读代码版本 V1
let skey="h3"; // 替换这里的skey,即可使用本段代码
for(let i=0; i<$(skey).length; i++){
    let text = $(skey+":eq("+i+")").text(); //* $("h4").text() 根据标签，定位提取文字
    text = text.trim().replace(/\s/g,"");   //* trim 去除首位空白字符  \s 任何空白字符
    console.log(text);
}
//一行代码版本 V2
for(var i=0; i<$("h3").length; i++){console.log($("h3:eq("+i+")").text());}

END *