JQuery - Selector - Revision history

Wikicatglobe at 02:09, 18 October 2013

2013-10-18T02:09:22Z

← Older revision		Revision as of 02:09, 18 October 2013
Line 1:		Line 1:
	<accesscontrol>~~Administrators,,Cem,,Maysunshine~~</accesscontrol>		<accesscontrol>Main:MyGroup</accesscontrol>
	[[Category:Miscellaneous]]		[[Category:Miscellaneous]]

Cg_pham at 10:05, 24 October 2011

2011-10-24T10:05:43Z

← Older revision		Revision as of 10:05, 24 October 2011
Line 1:		Line 1:
	<accesscontrol>Administrators,,Cem,,Maysunshine</accesscontrol>		<accesscontrol>Administrators,,Cem,,Maysunshine</accesscontrol>
	[[Category:~~Guidelines~~]]		[[Category:Miscellaneous]]

	= Foreword =		= Foreword =

Cg_pham at 06:58, 5 October 2011

2011-10-05T06:58:32Z

← Older revision		Revision as of 06:58, 5 October 2011
Line 1:		Line 1:
			<accesscontrol>Administrators,,Cem,,Maysunshine</accesscontrol>
			[[Category:Guidelines]]

	= Foreword =		= Foreword =
	You have all heard about jQuery and used it somewhere in your code. However, you might not notice about the constructor of jQuery $(). Currently we just us it something like this:		You have all heard about jQuery and used it somewhere in your code. However, you might not notice about the constructor of jQuery $(). Currently we just us it something like this:

Catglobe at 02:14, 3 April 2009

2009-04-03T02:14:38Z

← Older revision		Revision as of 02:14, 3 April 2009
Line 114:		Line 114:
	= Conclusion =		= Conclusion =
	The most important thing to remember in this post is the SELECTOR. By understanding the selector, you can make a better code in client side with well - organized and easy to read.		The most important thing to remember in this post is the SELECTOR. By understanding the selector, you can make a better code in client side with well - organized and easy to read.
	Selector is presenting for normal expression in css style syntax. Can you say in normal speed of this: "~~#gdEntries~~>tbody>tr>td[id^=Pk]"?		Selector is presenting for normal expression in css style syntax. Can you say in normal speed of this: "table>tbody>tr>td[id^=Pk]"?

	The post is based on this article, [http://www.west-wind.com/presentations/jQuery/default.aspx Click here] to get the full one.		The post is based on this article, [http://www.west-wind.com/presentations/jQuery/default.aspx Click here] to get the full one.

	Any contribution in this post are welcome		Any contribution in this post are welcome

Catglobe at 02:13, 3 April 2009

2009-04-03T02:13:51Z

← Older revision		Revision as of 02:13, 3 April 2009
Line 111:		Line 111:
	$("#gdEntries>tbody>tr>td[id^=Pk]").width(30);		$("#gdEntries>tbody>tr>td[id^=Pk]").width(30);
	</source>		</source>

			= Conclusion =
			The most important thing to remember in this post is the SELECTOR. By understanding the selector, you can make a better code in client side with well - organized and easy to read.
			Selector is presenting for normal expression in css style syntax. Can you say in normal speed of this: "#gdEntries>tbody>tr>td[id^=Pk]"?

			The post is based on this article, [http://www.west-wind.com/presentations/jQuery/default.aspx Click here] to get the full one.

			Any contribution in this post are welcome

Catglobe: New page: = Foreword = You have all heard about jQuery and used it somewhere in your code. However, you might not notice about the constructor of jQuery $(). Currently we just us it something like t...

2009-04-03T02:05:36Z

New page: = Foreword = You have all heard about jQuery and used it somewhere in your code. However, you might not notice about the constructor of jQuery $(). Currently we just us it something like t...

New page

= Foreword =
You have all heard about jQuery and used it somewhere in your code. However, you might not notice about the constructor of jQuery $(). Currently we just us it something like this:
<source lang="csharp">
$("#element_id").text("Set text for an element");
</source>
What does that mean? Just use jQuery to get an element and use text method, of course from jQuery library, to work with innerText of an DOM element.

Is it that the power of jQuery? NO.

Come back to the constructor, We have 2 things to consider here:
# What does it return?
# How does it work to get the elements?

= Constructor =

== Return what? ==
Let's look at the code below:
<source lang="csharp">
/// Return only ONE object by using id
var _obj1 = $("#element_id");
/// Return all rows inside a table specify by table_id, of course under tbody tag
var _obj2 = $("#table_id>tbody>tr");
</source>
jQuery always returns a jQuery object which contains an array of elements match the SELECTOR specified in constructor:
* Always returns an object -> NEVER CHECK IF IT IS NULL OR NOT.
* if _object1.length == 0 then there is no elements match the selector.

== Selector ==
jQuery uses selector to get the elements. The syntax is similar to CSS
You can select a single element:
<source lang="csharp">
$("#gdEntries").css("border", "solid 1px navy");
</source>

Or select by class (.):
<source lang="csharp">
$(".gridalternate").css("background", "lightsteelblue ");
</source>

or from a couple of classes (, like in CSS separates multiple selectors):
<source lang="csharp">
$(".gridrow,.gridalternate").attr("tag", "row");
</source>

You can also select elements (plain element) and apply filters to the elements. The following selects all buttons in a document and attaches a click handler:
<source lang="csharp">
$("input:button ").click(function(event) { alert("clicked"); });
</source>

A more complex example might select all rows in a table:
<source lang="csharp">
$("#gdEntries>tbody>tr").css("border", "solid 1px red");
</source>

If you’re at all familiar with CSS all of this should look familiar: You can use the same syntax in CSS stylesheets (with the exception of the :button filter – jQuery adds a host of custom filters) to find elements to style. The idea is simple: Use what you already know or at least use a standard mechanism rather than a custom selector syntax. CSS is quite powerful in selecting elements on a page and given a reasonably thoughtful HTML layout should make just about any element or group of elements easily selectable.

If you’re rusty on CSS, here are a few of the common jQuery/CSS selectors types that can be applied (full list):
{|class="VerticalTable sortable" border="1"
|-
! style="background-color: rgb(244,219,165); text-align: center" | Selector
! style="background-color: rgb(244,219,165); text-align: center" | Example
! style="background-color: rgb(244,219,165); text-align: center" | Description
|-
| style="text-align: left" | Element
| style="text-align: left" | $("td")
| style="text-align: left" | Select an HTML element tag
|-
| style="text-align: left" | #id
| style="text-align: left" | $("#divMessage")
| style="text-align: left" | Select an HTML element by its id
|-
| style="text-align: left" | .cssclass
| style="text-align: left" | $(".gridalternate")
| style="text-align: left" | Select HTML elements by having that css style
|-
| style="text-align: left" | selector,selector
| style="text-align: left" | $("input:button,input:text")
| style="text-align: left" | Multiple comma separated selectors can be combined into a single selection.
|-
| style="text-align: left" | ancestor descendant
| style="text-align: left" | $("#divMessage a")
| style="text-align: left" | A space between selectors/elements/tags finds nested elements. This syntax is similar to Css ancestor descendant syntax.
|-
| style="text-align: left" | parent > child
| style="text-align: left" | $("p > b")
| style="text-align: left" | Matches all immediate children of an element or selector expression that match the right element/selector.
|-
| style="text-align: left" | prev ~ siblings
| style="text-align: left" | $("#row_11:nth-child(2)~td")
| style="text-align: left" | Matches the next siblings at the sample level as the preceeding expression. Example, matches 3-nth columns of a table row. Best used as a find() or filter() against an existing jQuery instance.
|-
| style="text-align: left" | :filter
| style="text-align: left" | $("input:button")
| style="text-align: left" | : applies filters to the query. jQuery support CSS 3 filters plus a number of custom filters.
Examples: :not,:button,:visible,:hidden,:checked,:first,nth-child(1),:has,:is,:contains,:parent
|-
| style="text-align: left" | [@attribute]
| style="text-align: left" | $("p[class=gridalternate]")
| style="text-align: left" | Selects an attribute of an element
= equals string
^= startswith

$= endswith

*= contains
|}

Selectors can get quite sophisticated. Lets say you want to look for any cells in a table that start have an ID that starts with the value Pk:
<source lang="csharp">
$("#gdEntries>tbody>tr>td[id^=Pk]").width(30);
</source>