• Like
20131108 cs query by howard
Upcoming SlideShare
Loading in...5
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Promises sample •
  • 12. Reference • https://github.com/jamietre/CsQuery
  • 13. Q&A