20131108 cs query by howard


Published on

introduction CSQuery by Howard

Published in: Technology
1 Comment
1 Like
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

20131108 cs query by howard

  1. 1. CsQuery CsQuery is a jQuery port for .NET 4. It implements all CSS2 & CSS3 selectors, all the DOM manipulation methods of jQuery, and some of the utility methods. Howard 2013/11/07
  2. 2. Why CsQuery? • Standards Compliant HTML parsing  CSS selectors and jQuery make it really easy to access and manipulate HTML on the client. • CSS3 Selectors and jQuery methods  CsQuery implements all CSS2 and CSS3 selectors and filters, and a comprehensive DOM model. • Fast, indexed CSS selectors  The CSS selector engine fully indexes each document on tag name, id, class, and attribute. • It's incredibly easy
  3. 3. CQ vs jQuery • dom["<div></div>"] <===> $('<div></div>') • dom["div"] <===> $('div') • dom.Select("div") <===> $('div') • dom["div"][0] <===> dom.Select("div")[0] <===> $('div')[0]
  4. 4. CQ • CQ object exposes an IEnumerable<IDomObject> interface  You can use LINQ to simplify many operations.  You have all the tools that you're used to from jQuery.  public partial class CQ : IEnumerable<IDomObject> • • Like in jQuery, each CQ object is made up of DOM elements. In CsQuery, the basic node is an IDomObject  is analagous to an HTML element or other node (like a text node or comment node)
  5. 5. CQ CQ dom = "<div>Hello world! <b>I am feeling bold!</b> What about <b>you?</b></div>"; • use CSS to choose first node only  string bold = dom["div > b:first-child"].Text(); • use LINQ First to get the first item, and the DOM node "InnerText" method  string bold = dom["b"][0].InnerText; • use indexer to get the first item, and "Select" instead of the indexer to make it more readable  string bold = dom.Select("b")[0].InnerText; • Use jQuery "contents" method to return the text node children  string bold = dom["b"].Contents()[0].NodeValue
  6. 6. Create • Create from a string of HTML, a TextReader, a Stream, or an existing CQ object or DOM elements  var dom = CQ.Create(html); • Create from a URL (synchronously)  var dom = CQ.CreateFromUrl("http://www.jquery.com"); • Create from a URL (asynchronously)  CQ. CreateFromUrlAsync("http://www.jquery.com", successDelegate, failureDelegate);  IPromise promise = CQ. CreateFromUrlAsync("http://www.jquery.com");  returns an IPromise object, which can be used to manage resolution of deferred events without blocking the code flow
  7. 7. Output as HTML • Render the entire DOM  string html = dom.Render(); • You can render any DOM element individually  string elementHtml = dom[2].Render(); • You can render just the elements that are part of the selection  string selectionHtml = dom[".just-this-class"].RenderSelection();
  8. 8. Manipulate the DOM with jQuery methods dom.Select("div > span") .Eq(1) .Text("Change the text content of the 2nd span child of each div"); • Use Find (like in jQuery) to access only child elements of a selection:  var childSpans = dom["body"].Find(":first-child"); • CssSet VS CSS  rowsWithClass .CssSet(new { width="100px", height=20 });  rowsWithClass.CssSet("{"width":"100px", "height":"100px"}")  rowsWithClass.Css("width",100).Css("height","20px");
  9. 9. Accessing DOM elements directly • The property indexer is overloaded as a simple list element indexer returning the DOM element at that position, just like $(...)[n]. • IDomObject element = dom[0]; • string id = element.Id; • string classes = element.ClassName;
  10. 10. Promises • More recent versions jQuery introduced a "deferred" object for managing callbacks using a concept called Promises. • The CQ.CreateFromUrlAsync method can return an IPromise<ICsqWebResponse> object.
  11. 11. Promises sample •
  12. 12. Reference • https://github.com/jamietre/CsQuery
  13. 13. Q&A