Q)No conflict in jquery example
As you already know; jQuery uses the $ sign as a
shortcut for jQuery.
There are many other popular JavaScript frameworks
like Angular, Backbone, Ember, Knockout, and more.
What
if other JavaScript frameworks also use the $ sign as a shortcut?
If two different frameworks are using the same
shortcut, one of them might stop working.
Therefore, noConflict method is implemented.
Syntax:
$.noConflict();
Parameters:
It does not accept any parameter.
Return
Value: It does not return anything.
Ex:
src="prototype.js"
src="jquery.js"
In above example, there are two JavaScript libraries
used in same file and both of them using same “$” sign to select elements. Now
the conflict arise and may one of the libraries fails to access the
element using “$” sign. By applying the noConflict()
method, jQuery tells other libraries that “$” shortcut does not belong to
jQuery anymore. The noConflict() method releases the hold on the “$” shortcut identifier,
so that other scripts can use it.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var jQuery = $.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery is still working!");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Test jQuery</button>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------Q) jquery dynamic events:
Use the jQuery on() method
If you try to do something with the elements that are dynamically added to DOM
using the jQuery click() method it will not work, because it bind the
click event only to the elements that exist at the time of binding. To bind the
click event to all existing and future elements, use the jQuery on() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Bind Click Event to
Dynamically added Elements</title>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ol").append("<li>list item <a
href='javascript:void(0);'
class='remove'>×</a></li>");
});
$(document).on("click", "a.remove" , function() {
$(this).parent().remove();
});
});
</script>
</head>
<body>
<button>Add new list item</button>
<p>Click the above button to dynamically add new list items. You
can remove it later.</p>
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
</body>
</html>
Q) Selectors in JQuery:
jQuery Selectors are used to selecting and manipulate HTML
elements. They are a very important part of the jQuery library.
With jQuery selectors, you can find or select HTML elements
based on their id, classes, attributes, types, and much more from a DOM.
In simple words, you can say that selectors are used to select
one or more HTML elements using jQuery and once the element is selected then
you can perform various operations on that.
All jQuery selectors start with a dollar sign and parenthesis e.g. $(). It is known as the factory function.
|
Selector |
Example |
Description |
|
* |
$("*") |
It is used to select
all elements. |
|
#id |
$("#firstname") |
It will select the
element with id="firstname" |
|
.class |
$(".primary") |
It will select all
elements with class="primary" |
|
class,.class |
$(".primary,.secondary") |
It will select all
elements with the class "primary" or "secondary" |
|
element |
$("p") |
It will select all p
elements. |
|
el1,el2,el3 |
$("h1,div,p") |
It will select all
h1, div, and p elements. |
|
:first |
$("p:first") |
This will select the
first p element |
|
:last |
$("p:last") |
This will select he
last p element |
|
:even |
$("tr:even") |
This will select all
even tr elements |
|
:odd |
$("tr:odd") |
This will select all
odd tr elements |
|
:first-child |
$("p:first-child") |
It will select all p
elements that are the first child of their parent |
|
:first-of-type |
$("p:first-of-type") |
It will select all p
elements that are the first p element of their parent |
|
:last-child |
$("p:last-child") |
It will select all p
elements that are the last child of their parent |
|
:last-of-type |
$("p:last-of-type") |
It will select all p
elements that are the last p element of their parent |
|
:nth-child(n) |
$("p:nth-child(2)") |
This will select all
p elements that are the 2nd child of their parent |
|
:nth-last-child(n) |
$("p:nth-last-child(2)") |
This will select all
p elements that are the 2nd child of their parent, counting from the last
child |
|
:nth-of-type(n) |
$("p:nth-of-type(2)") |
It will select all p
elements that are the 2nd p element of their parent |
|
:nth-last-of-type(n) |
$("p:nth-last-of-type(2)") |
This will select all
p elements that are the 2nd p element of their parent, counting from the last
child |
|
:only-child |
$("p:only-child") |
It will select all p
elements that are the only child of their parent |
|
:only-of-type |
$("p:only-of-type") |
It will select all p
elements that are the only child, of its type, of their parent |
|
parent > child |
$("div >
p") |
It will select all p
elements that are a direct child of a div element |
|
parent descendant |
$("div p") |
It will select all p
elements that are descendants of a div element |
|
element + next |
$("div +
p") |
It selects the p
element that are next to each div elements |
|
element ~ siblings |
$("div ~
p") |
It selects all p
elements that are siblings of a div element |
|
:eq(index) |
$("ul
li:eq(3)") |
It will select the
fourth element in a list (index starts at 0) |
|
:gt(no) |
$("ul
li:gt(3)") |
Select the list
elements with an index greater than 3 |
|
:lt(no) |
$("ul
li:lt(3)") |
Select the list
elements with an index less than 3 |
|
:not(selector) |
$("input:not(:empty)") |
Select all input
elements that are not empty |
|
:header |
$(":header") |
Select all header
elements h1, h2 ... |
|
:animated |
$(":animated") |
Select all animated
elements |
|
:focus |
$(":focus") |
Select the element
that currently has focus |
|
:contains(text) |
$(":contains('Hello')") |
Select all elements
which contains the text "Hello" |
|
:has(selector) |
$("div:has(p)") |
Select all div
elements that have a p element |
|
:empty |
$(":empty") |
Select all elements
that are empty |
|
:parent |
$(":parent") |
Select all elements
that are a parent of another element |
|
:hidden |
$("p:hidden") |
Select all hidden p
elements |
|
:visible |
$("table:visible") |
Select all visible
tables |
|
:root |
$(":root") |
It will select the
document's root element |
|
:lang(language) |
$("p:lang(de)") |
Select all p
elements with a lang attribute value starting with "de" |
|
[attribute] |
$("[href]") |
Select all elements
with a href attribute |
|
[attribute=value] |
$("[href='default.htm']") |
Select all elements
with a href attribute value equal to "default.htm" |
|
[attribute!=value] |
$("[href!='default.htm']") |
It will select all
elements with a href attribute value not equal to "default.htm" |
|
[attribute$=value] |
$("[href$='.jpg']") |
It will select all
elements with a href attribute value ending with ".jpg" |
|
[attribute|=value] |
$("[title|='Tomorrow']") |
Select all elements
with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow'
followed by a hyphen |
|
[attribute^=value] |
$("[title^='Tom']") |
Select all elements
with a title attribute value starting with "Tom" |
|
[attribute~=value] |
$("[title~='hello']") |
Select all elements
with a title attribute value containing the specific word "hello" |
|
[attribute*=value] |
$("[title*='hello']") |
Select all elements
with a title attribute value containing the word "hello" |
|
:input |
$(":input") |
It will select all
input elements |
|
:text |
$(":text") |
It will select all
input elements with type="text" |
|
:password |
$(":password") |
It will select all
input elements with type="password" |
|
:radio |
$(":radio") |
It will select all
input elements with type="radio" |
|
:checkbox |
$(":checkbox") |
Itwill select all
input elements with type="checkbox" |
|
:submit |
$(":submit") |
It will select all
input elements with type="submit" |
|
:reset |
$(":reset") |
It will select all
input elements with type="reset" |
|
:button |
$(":button") |
It will select all
input elements with type="button" |
|
:image |
$(":image") |
It will select all
input elements with type="image" |
|
:file |
$(":file") |
It will select all
input elements with type="file" |
|
:enabled |
$(":enabled") |
Select all enabled
input elements |
|
:disabled |
$(":disabled") |
It will select all
disabled input elements |
|
:selected |
$(":selected") |
It will select all
selected input elements |
|
:checked |
$(":checked") |
It will select all
checked input elements |
----------------------------------------------------------------------------------------------------------------------------
Q)
Jquery Ajax:
AJAX
stands for "Asynchronous JavaScript and XML". JavaScript includes
features of sending asynchronous HTTP requests using XMLHttpRequest object. Ajax is about using this ability of
JavaScript to send asynchronous HTTP requests and get the XML data as a response
(also in other formats) and update the part of a web page (using JavaScript)
without reloading or refreshing the entire web page.
Jquery
Methods:
ajax() Sends
asynchronous HTTP requests to the server.
get() Sends
HTTP GET request to load the data from the server.
Post() Sends
HTTP POST request to submit or load the data to the server.
getJSON() Sends
HTTP GET request to load JSON encoded data from the server.
getScript() Sends
HTTP GET request to load the JavaScript file from the server and then executes
it.
load() Sends HTTP requests to load the HTML or text content from the server and add them to
DOM element(s).
Jquery
Ajax events:
ajaxComplete() Register
a handler function to be called when Ajax requests are complete.
ajaxError() Register
a handler function to be called when Ajax requests complete with an error.
ajaxSend() Register
a handler function to be called before Ajax request is sent.
ajaxStart() Register
a handler function to be called when the first Ajax request begins.
ajaxStop() Register
a handler function to be called when all the Ajax requests have been completed.
ajaxSuccess() Register
a handler function to be called when Ajax request completes successfully.
Advantages
of jQuery Ajax():
Cross-browser support
Simple methods to use
Ability to send GET and POST requests
Ability to Load JSON, XML, HTML or Scripts----------------------------------------------------------------------------------------------------------------------------
jQuery
attr() Method
$("button").click(function(){
$("img").attr("width","500");
});
The attr() method sets or returns attributes and values
of the selected elements.
When this method is used to return the attribute
value, it returns the value of the FIRST matched element.
When this method is used to set attribute values, it
sets one or more attribute/value pairs for the set of matched elements.
Return the value of an attribute:
$(selector).attr(attribute)
Set the attribute and value:
$(selector).attr(attribute,value)
Set attribute and value using a function:
$(selector).attr(attribute,function(index,currentvalue))
Set multiple attributes and values:
$(selector).attr({attribute:value,
attribute:value,...})
Parameters:
attribute: This parameter specifies the name of the
attribute.
value: This parameter specifies the value of the
attribute.
function(index, current value): This parameter
specifies a function that returns the attribute value to set.
index: This parameter receives the index position of an element in the set.
currentValue: This parameter receives the current
attribute value of selected elements.
jQuery
prop() Method: This method sets/returns properties and
values of the matched elements. If this method is used to return the property
value, it returns the value of the first selected element. If this method is
used to set property values, it sets one or more property/value pairs for the
set of selected elements.
Syntax:
Return the value of an property:
$(selector).prop(property)
Set the property and value:
$(selector).prop(property, value)
Set property and value using a function:
$(selector).prop(property, function(index,
currentvalue))
Set multiple properties and values:
$(selector).prop({property:value, property:value,
...})
Parameters:
property: This parameter specifies the name of the
property.
value: This parameter specifies the value of the
property.
function(index, current value): This parameter
specifies a function that returns the property value to set.
index: This parameter receives the index position of an element in the set.
currentValue: This parameter receives the current
property value of selected elements.
----------------------------------------------------------------------------------------------------------------------------
Count the number of checkboxes with
JavaScript/jQuery
$(document).ready(function() {
$('#select').click(function() {
var
checkboxes = $('input[type="checkbox"]').length;
alert(checkboxes);
})
});
It can be shortened to
$('input:checkbox')
$(document).ready(function() {
$('#select').click(function() {
var
checkboxes = $('input:checkbox').length;
alert(checkboxes);
})
});
To get a list of all checked checkboxes, you can use the :checked selector like $('input:checkbox:checked').
$(document).ready(function() {
$('#select').click(function() {
var
checkboxes = $('input:checkbox:checked').length;
alert(checkboxes);
})
});
Alternatively, to get all unchecked checkboxes, you
can use the :not() pseudo-class, which selects any elements that don’t match
the specified selectors.
$(document).ready(function() {
$('#select').click(function() {
var
checkboxes = $('input:checkbox:not(":checked")').length;
alert(checkboxes);
})
});
Using
JavaScript:
With pure JavaScript, you can use the Document
method querySelectorAll(), which returns a list of the document’s elements that
match the specified group of selectors.
document.getElementById('select').onclick =
function() {
var
checkboxes =
document.querySelectorAll('input[type="checkbox"]:checked');
alert(checkboxes.length);
}
----------------------------------------------------------------------------------------------------------------------------
No comments:
Post a Comment