introduction CSQuery by Howard

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