node 服务端的jquery---cheerio
来源:互联网 发布:范志毅女儿走红网络 编辑:程序博客网 时间:2024/06/07 20:18
现在有了node的出现,我们可以用Js来开发服务端。
前端常用的肯定是jquery,服务端想操作html如何做呢?
用cheerio
npm install cheerio
var cheerio = require('cheerio'),
//load用来引入需要解析的Html;//test设置文本$ = cheerio.load('<h2 class="title">Hello world</h2>');$('h2.title').text('Hello there!');$('h2').addClass('welcome');$.html();//=> <h2 class="title welcome">Hello there!</h2>
//$('ul .xx')//$('li[class=a]')//$().attr(id,'c')//$().removeAttr('id');
以下转于:https://cnodejs.org/topic/5203a71844e76d216a727d2e
$('input[type="text"]').val()
.hasClass( className ).removeClass([className]).is.(selector)
.is(function(index))
.find(selector)
$('#fruits').find('li').length
.parent([selector])
获得每个匹配元素的parent,可选择性的通过selector筛选。
$('.pear').parent().attr('id')//=> fruits
.parents([selector])
获得通过选择器筛选匹配的元素的parent集合。
$('.orange').parents().length// => 2$('.orange').parents('#fruits').length// => 1
.closest([selector])
对于每个集合内的元素,通过测试这个元素和DOM层级关系上的祖先元素,获得第一个匹配的元素
$('.orange').closest()// => []$('.orange').closest('.apple')// => []$('.orange').closest('li')// => [<li class="orange">Orange</li>]$('.orange').closest('#fruits')// => [<ul id="fruits"> ... </ul>]
.next()获得第一个本元素之后的同级元素
$('.apple').next().hasClass('orange')//=> true
.nextAll()
获得本元素之后的所有同级元素
$('.apple').nextAll()//=> [<li class="orange">Orange</li>, <li class="pear">Pear</li>]
.prev()
获得本元素之前的第一个同级元素
$('.orange').prev().hasClass('apple')//=> true
.preAll()
$('.pear').prevAll()//=> [<li class="orange">Orange</li>, <li class="apple">Apple</li>]
获得本元素前的所有同级元素
.slice(start,[end])
获得选定范围内的元素
$('li').slice(1).eq(0).text()//=> 'Orange'$('li').slice(1, 2).length//=> 1
.siblings(selector)
获得被选择的同级元素,除去自己??
$('.pear').siblings().length//=> 2$('.pear').siblings('.orange').length//=> 1
.children(selector)
获被选择元素的子元素
$('#fruits').children().length//=> 3$('#fruits').children('.pear').text()//=> Pear
.each(function(index,element))
迭代一个cheerio对象,为每个匹配元素执行一个函数。When the callback is fired, the function is fired in the context of the DOM element, so this refers to the current element, which is equivalent to the function parameter element.要提早跳出循环,返回false.
var fruits = [];$('li').each(function(i, elem) { fruits[i] = $(this).text();});fruits.join(', ');//=> Apple, Orange, Pear
.map(function(index,element))
迭代一个cheerio对象,为每个匹配元素执行一个函数。Map会返回一个迭代结果的数组。the function is fired in the context of the DOM element, so this refers to the current element, which is equivalent to the function parameter element
$('li').map(function(i, el) { // this === el return $(this).attr('class');}).join(', ');//=> apple, orange, pear
.filter(selector)
.filter(function(index))
迭代一个cheerio对象,滤出匹配选择器或者是传进去的函数的元素。如果使用函数方法,这个函数在被选择的元素中执行,所以this指向的手势当前元素。
Selector:
$('li').filter('.orange').attr('class');//=> orange
Function:
$('li').filter(function(i, el) { // this === el return $(this).attr('class') === 'orange';}).attr('class')//=> orange
.first()
会选择chreeio对象的第一个元素
$('#fruits').children().first().text()//=> Apple
.last()
$('#fruits').children().last().text()//=> Pear
会选择chreeio对象的最后一个元素
.eq(i)
通过索引筛选匹配的元素。使用.eq(-i)就从最后一个元素向前数。
$('li').eq(0).text()//=> Apple$('li').eq(-1).text()//=> Pear
###Manipulation
改变DOM结构的方法
.append(content,[content…])
在每个元素最后插入一个子元素
$('ul').append('<li class="plum">Plum</li>')$.html()//=> <ul id="fruits">// <li class="apple">Apple</li>// <li class="orange">Orange</li>// <li class="pear">Pear</li>// <li class="plum">Plum</li>// </ul>
.prepend(content,[content,…])
在每个元素最前插入一个子元素
$('ul').prepend('<li class="plum">Plum</li>')$.html()//=> <ul id="fruits">// <li class="plum">Plum</li>// <li class="apple">Apple</li>// <li class="orange">Orange</li>// <li class="pear">Pear</li>// </ul>
.after(content,[content,…])
在每个匹配元素之后插入一个元素
$('.apple').after('<li class="plum">Plum</li>')$.html()//=> <ul id="fruits">// <li class="apple">Apple</li>// <li class="plum">Plum</li>// <li class="orange">Orange</li>// <li class="pear">Pear</li>// </ul>
.before(content,[content,…])
在每个匹配的元素之前插入一个元素
$('.apple').before('<li class="plum">Plum</li>')$.html()//=> <ul id="fruits">// <li class="plum">Plum</li>// <li class="apple">Apple</li>// <li class="orange">Orange</li>// <li class="pear">Pear</li>// </ul>
.remove( [selector] )
从DOM中去除匹配的元素和它们的子元素。选择器用来筛选要删除的元素。
$('.pear').remove()$.html()//=> <ul id="fruits">// <li class="apple">Apple</li>// <li class="orange">Orange</li>// </ul>
.replaceWith( content )
替换匹配的的元素
var plum = $('<li class="plum">Plum</li>')$('.pear').replaceWith(plum)$.html()//=> <ul id="fruits">// <li class="apple">Apple</li>// <li class="orange">Orange</li>// <li class="plum">Plum</li>// </ul>
.empty()
清空一个元素,移除所有的子元素
$('ul').empty()$.html()//=> <ul id="fruits"></ul>
.html( [htmlString] )
获得元素的HTML字符串。如果htmlString有内容的话,将会替代原来的HTML
$('.orange').html()//=> Orange$('#fruits').html('<li class="mango">Mango</li>').html()//=> <li class="mango">Mango</li>
.text( [textString] )
获得元素的text内容,包括子元素。如果textString被指定的话,每个元素的text内容都会被替换。
$('.orange').text()//=> Orange$('ul').text()//=> Apple// Orange// Pear
###Rendering
如果你想呈送document,你能使用html多效用函数。
$.html()//=> <ul id="fruits">// <li class="apple">Apple</li>// <li class="orange">Orange</li>// <li class="pear">Pear</li>// </ul>
如果你想呈送outerHTML,你可以使用 $.html(selector)
$.html('.pear')//=> <li class="pear">Pear</li>
默认的,html会让一些标签保持开标签的状态.有时候你想呈现一个有效的XML文档.例如下面这个:
$ = cheerio.load('<media:thumbnail url="http://www.foo.com/keyframe.jpg" width="75" height="50" time="12:05:01.123"/>');
然后为了呈现这个XML,你需要使用xml
这个函数:
$.xml()//=> <media:thumbnail url="http://www.foo.com/keyframe.jpg" width="75" height="50" time="12:05:01.123"/>
###Miscellaneous
不属于其它地方的DOM 元素方法
.toArray()
取得所有的在DOM元素,转化为数组、
$('li').toArray()//=> [ {...}, {...}, {...} ]
.clone()
克隆cheerio对象
var moreFruit = $('#fruits').clone()
###Utilities
$.root有时候你想找到最上层的root元素,那么$.root()
就能获得:
$.root().append('<ul id="vegetables"></ul>').html();//=> <ul id="fruits">...</ul><ul id="vegetables"></ul>
$.contains( container, contained )
查看cotained元素是否是container元素的子元素
$.parseHTML( data [, context ] [, keepScripts ] )
将字符串解析为DOM节点数组。context参数对chreeio没有意义,但是用来维护APi的兼容性。
- node 服务端的jquery---cheerio
- cheerio - 服务端的 jQuery
- cheerio为nodejs定制的JQuery。
- Node.js npm cheerio
- node.js:利用cheerio编写的小爬虫程序
- Node.js中cheerio详解
- 使用node.js cheerio抓取网页数据
- cheerio node爬虫开发小记录
- 使用node.js cheerio抓取网页数据
- 使用node.js cheerio抓取网页数据
- Node.Js cheerio模块--操作/解析Html
- Node.Js cheerio模块简单API
- node小爬虫(cheerio相当于jq)
- node.js使用cheerio制作网络爬虫
- node.js 爬虫乱码问题 cheerio
- node.js使用cheerio制作网络爬虫
- 服务端的未来属于Node.js
- Node.js服务端的javascript脚本
- Android Drawable (android 6.0)
- 如何解决eclipse导入项目时,出现jar没有导入的错误提示
- Android性能优化典范(B1)
- 详解前端模块化工具-Webpack
- 我的后端开发书架2015
- node 服务端的jquery---cheerio
- hdu 2196 Computer 树形dp 树中点最大距离
- ARM硬件平台上基于UCOS移植Lwip网络协议栈
- 数据库三大范式
- Java函数的不定参数
- Ubuntu从图形界面不小心进入下图界面,(ctrl+Alt+Fn)(n(1~6))
- tableView 的headView黏性问题
- iOS 扫描二维码
- IOS:导入自己创建的framework出错