Can I use multiple versions of jQuery on the same page?
<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>
<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>
Then, instead of $('#selector').function();, you'd do jQuery_1_3_2('#selector').function(); or jQuery_1_1_3('#selector').function();
DOM Traversing
<html>
<head>
<title>The JQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").eq(2).addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>
AJAX Call From JQuery
$.ajax({
type: "GET", //GET or POST or PUT or DELETE verb
url: ajaxUrl, // Location of the service
data: "", //Data sent to server
contentType: "", // content type sent to server
dataType: "json", //Expected data format from server
processdata: true, //True or False
success: function (json) {//On Successful service call
var result = json.name;
$("#dvAjax").html(result);
},
error: ServiceFailed // When Service call fails
});
<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>
<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>
Then, instead of $('#selector').function();, you'd do jQuery_1_3_2('#selector').function(); or jQuery_1_1_3('#selector').function();
DOM Traversing
<html>
<head>
<title>The JQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").eq(2).addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>
Filter Selectors
| Selector | Example | Description |
|---|---|---|
:first | $("p:first") | Selects the first <p> element. |
:last | $("p:last") | Selects the last <p> element. |
:even | $("tr:even") | Selects all even <tr> elements, zero-indexed. |
:odd | $("tr:odd") | Selects all odd <tr> elements, zero-indexed. |
:eq() | $("tr:eq(1)") | Select the 2nd <tr> element within the matched set, zero-based index. |
:not() | $("p:not(:empty)") | Select all <p> elements that are not empty. |
:lt() | $("ul li:lt(3)") | Select all <li> elements at an index less than three within the matched set (i.e. selects 1st, 2nd, 3rd list elements), zero-based index. |
:gt() | $("ul li:gt(3)") | Select all <li> elements at an index greater than three within the matched set (i.e. selects 4th, 5th, ... list elements), zero-based index. |
:header | $(":header") | Selects all elements that are headers, like <h1>, <h2>, <h3>and so on. |
:lang() | $(":lang(en)") | Selects all elements that have a language value "en" i.e. lang="en", lang="en-us" etc. |
:root | $(":root") | Selects the document's root element which is always <html>element in a HTML document. |
:animated | $(":animated") | Select all elements that are animating at the time the selector is run. |
Child Filter Selectors
| Selector | Example | Description |
|---|---|---|
:first-child | $("p:first-child") | Selects all <p> elements that are the first child of their parent. |
:last-child | $("p:last-child") | Selects all <p> elements that are the last child of their parent. |
:nth-child(n) | $("p:nth-child(3)") | Selects all <p> elements that are the 3rd child of their parent. |
:only-child | $("p:only-child") | Selects all <p> elements that are the only child of their parent. |
:first-of-type | $("p:first-of-type") | Selects all <p> elements that are the first <p>element of their parent. |
:last-of-type | $("p:last-of-type") | Selects all <p> elements that are the last <p>element of their parent. |
:only-of-type | $("p:only-of-type") | Selects all <p> elements that have no siblings with the same element name. |
:nth-last-child(n) | $("p:nth-last-child(3)") | Selects all <p> elements that are the 3rd-child of their parent, counting from the last element to the first. |
:nth-of-type(n) | $("p:nth-of-type(2)") | Selects all <p> elements that are the 2nd <p>element of their parent |
:nth-last-of-type(n) | $("p:nth-last-of-type(2)") | Selects all <p> elements that are the 2nd-child of their parent, counting from the last element to the first. |
Content Filter Selectors
| Selector | Example | Description |
|---|---|---|
:contains() | $('p:contains("Hello")') | Selects all <p> elements that contains the text "Hello". |
:empty | $("td:empty") | Selects all <td> elements that are empty i.e that have no children including text. |
:has() | $("p:has(img)") | Selects all <p> elements which contain at least one <img> element. |
:parent | $(":parent") | Select all elements that have at least one child node either an element or text. |
AJAX Call From JQuery
$.ajax({
type: "GET", //GET or POST or PUT or DELETE verb
url: ajaxUrl, // Location of the service
data: "", //Data sent to server
contentType: "", // content type sent to server
dataType: "json", //Expected data format from server
processdata: true, //True or False
success: function (json) {//On Successful service call
var result = json.name;
$("#dvAjax").html(result);
},
error: ServiceFailed // When Service call fails
});
