jQuery选择器的那些事儿

最新推荐文章于 2020-12-08 20:38:33 发布

IT_石头

最新推荐文章于 2020-12-08 20:38:33 发布

阅读量1k

点赞数 2

分类专栏： nodeJs 文章标签： jquery选择器 jquery

本文链接：https://blog.csdn.net/yezhenxu1992/article/details/50847593

版权

nodeJs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言：
开学第二周，突然，就是不想学习，LOL也提不起我的兴趣。于是，盯着电脑，干白兑雪碧，配着两根双汇的火腿肠，发呆中。想想，前两天一鼓作气整理的基于NodeJs爬虫（手把手教你做爬虫—基于Nodejs），还留有点遗憾。索性，借着小小酒劲，粗糙地整理一下jQuery选择器的那些事，供大伙儿借鉴借鉴，哪怕只是干那么一丁点有意义的事，也才对得住北京少有的蓝天。

开始扯淡……

对了，为了分析网页源码，我特意下了chrome浏览器，确实比360浏览器好用多了，建议你也试看看。

还是直接进入代码吧，我一直喜欢那就话–“talk is cheap,show me the code !”

以 http://www.ss.pku.edu.cn/index.php/newscenter/news/2373这篇文章为例子。访问该url，进去页面后，右键点击”检查“，你就能看到一堆html内容了。遵循那就句经典台词“所见即所得”，你在网页上所能见到的东西，理论上都能设计相对应的选择器，然后爬下来。

例子1：如何抓取供稿单位？

这里写图片描述

右键点击”检查“，出现这个图片。

这里写图片描述

点击左上角那个箭头，然后再点击”供稿：综合办公室“ 这时候出现如下图：

这里写图片描述

终于可以撸起袖子干活了。

首先观察发现：
1）标签div，含有2个子标签a
2）所需内容 “供稿：综合办公室” 位于第一个子标签a下，a标签有两个属性，一个href属性，一个title属性。

所以选择器可以按如下多种方法设计：

1、$('a[title=供稿]').text().trim();

其中，a[title=供稿]，表示符合 “a标签下，属性title=供稿的元素”;

“.text()”表示文本内容，若是”.html()”表示整个html内容；

“.trim()”可以删去字符串前/后的空格及tab符号。

2、 $('div.article-info a ').eq(0).text().trim();

或者$('.article-info a ').eq(0).text().trim();

解释：’div.article-info a’表示符合div标签，且其div标签的属性为article-info范围下，所有a标签元素的集合（数组）。显然，供稿单位为第一个a标签的内容，所以 “.eq(0)”，代表数组的第一个元素。

3、$('.article-info a:first-child ').text().trim();

解释： ‘. article-info a’ 表示任意符合属性为article-info的标签下，
所有a标签元素的集合（数组）。其中，”:first-child”表示数组第一个元素。

4、$(".article-info a:contains('供稿')").text().trim();

解释：其中，”:contains(‘供稿’)”指的是，包含文本内容为供稿的元素。

……总有一种方法合你口味吧。

例子2：如何获取图片的地址及图片的标题？

这里写图片描述

首先观察发现：

1、文章所有图片的资源均位于标签（div class=”article-content”）下，且位于p标签中;

2、图片的地址位于p标签下，img标签中，且属性为src;

3、图片的标题：这是一件超级麻烦的事，因为网页的新闻不够规范，经过调试了X遍，总结了大部分规律:

 3.1） img标签元素自身的text()直接获取，对应代码： $(this).text().trim();

 3.2） img标签元素父节点的text()，对应代码： $(this).parent().text().trim(); 

 3.3） img标签元素父节点的下一个节点文字，对应代码：   $(this).parent().next().text().trim();

 3.4） img标签元素祖父节点的下一个节点文字，对应代码：$(this).parent().parent().next().text().trim();

 3.5） img标签元素曾祖父节点的下一个节点文字,对应代码： $(this).parent().parent().parent().next().text().trim();

 3.6）根本就没有标题！

所以选择器的设计如下：

  $('.article-content img').each(function (index, item) {

        var img_src = 'http://www.ss.pku.edu.cn' + $(this).attr('src'); //获取图片的地址

        var img_text=[];

        //img标签元素自身的text()直接获取
       img_text.push (($(item)text().trim());

        //img标签元素父节点的text()
       img_text.push($(item).parent().text().trim()); 

        //img标签元素父节点的下一个节点的text()
       img_text.push($(item).parent().next().text().trim()); 

        //img标签元素祖父节点的下一个节点的text()
 img_text.push($(item).parent().parent().next().text().trim()); 

        //img标签元素曾祖父节点的下一个节点的text()
 img_text.push($(item).parent().parent().parent().next().text().trim()); 

      //图片根本就没有标题
  var img_title="No_title"

for(var i in img_text) 
 {
     if(img_text[i]!="")
     {
       img_title=img_text[i];
       console.log(img_title); 
       break;
     }
  }