MAP
$.map([10,20,30], function(n,i) { return n+i;}); //[10, 21, 32]
Jquery Reverse Order of Child Elements (ul & li):
var list = $('ul');
var listItems = list.children('li');
list.append(listItems.get().reverse());
$('ul li')[0] //<li>AAA</li>
$('ul li')[0].innerHTML //AAA
$("ul li").eq(7).css("border", "1px solid #000000"); //Applies style to 8th element
Apply Style to Even & Odd rows:
$("ul li:even").addClass("even");
$("ul li:odd").addClass("odd");
(or)
$("ul li").each(function(i) {
if (i % 2 == 1)
{
$(this).addClass("odd"); //$(this).css("background-color", 'red')
}
else
{
$(this).addClass("even"); //$(this).css("background-color", 'yellow')
}
});
if ($('#elem').is(':hidden')) {
// Do something conditionally
}
$('p:visible').hide(); // Hiding only elements that are currently visible
$('ul').siblings().length //Siblings of <ul> element
To Get Immediate Children
<a href="/category">Category</a>
<ul id="nav">
<li><a href="#anchor1">Anchor 1</a></li>
<li><a href="#anchor2">Anchor 2</a></li>
<li><span><a href="#anchor3">Anchor 3</a></span></li>
</ul>
$('li > a').length => 2 (only in immediate direct children)
$('li a').length => 3 (all anchor tags )
$('li').children()
or
$('li > *')
or
$('li').find('> *')
Stop Event Bubbling:
return false; => event.stopPropagation(); + event.preventDefault();
event.stopImmediatePropagation(); => stops immediately without executing handlers of same element.
event.stopPropagation(); => stops executing handlers of parent elements, but executes that of same element
end()
You can return to the previous set of DOM elements that were selected before using a destructive method.
<p>text 1 </p>
<p class="test_class">text 2
<span>AAA</span>
</p>
<p>text 3 </p>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
console.log($('p').filter('.test_class').length); // 1
console.log($('p').filter('.test_class').end().length); // 3
console.log($('p').filter('.test_class').find('span').end().end().length); // 3
</script>
filter() vs find()
find() will operates the children of the current set
filter() will only operate on the current set of elements.
On the same level: (FILTER)
$('div').filter('.x').length
or
$('div.x').text()
Inner level search (FIND)
$('div').find('.x').length
or
$('div .x').text()
Jquery - Save File:
$('#ajax-loader').show();
$.post("/test/return/data/", snddata,
function callbackHandler(data, textstatus){
$('#ajax-loader').hide();
if(data.status == 1){
str = data.encrypted_data
saveData(str, "download_file_name")
}
else{
alert(data.msg);
}
},
"json"
);
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
var json = data,
blob = new Blob([json], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
& issues while passing from template to server
str = ''
document.location = '/test/url/' + encodeURIComponent(str);
!important
!important (It will override the CSS definition in header classes)
<style type="text/css">
.bst_popover{
max-width: 500px !important;
}
</style>
Choose a specific parent
$(this).parents("tr:first");
$(this).closest("tr");
$.map([10,20,30], function(n,i) { return n+i;}); //[10, 21, 32]
Jquery Reverse Order of Child Elements (ul & li):
var list = $('ul');
var listItems = list.children('li');
list.append(listItems.get().reverse());
$('ul li')[0] //<li>AAA</li>
$('ul li')[0].innerHTML //AAA
$("ul li").eq(7).css("border", "1px solid #000000"); //Applies style to 8th element
Apply Style to Even & Odd rows:
$("ul li:even").addClass("even");
$("ul li:odd").addClass("odd");
(or)
$("ul li").each(function(i) {
if (i % 2 == 1)
{
$(this).addClass("odd"); //$(this).css("background-color", 'red')
}
else
{
$(this).addClass("even"); //$(this).css("background-color", 'yellow')
}
});
if ($('#elem').is(':hidden')) {
// Do something conditionally
}
$('p:visible').hide(); // Hiding only elements that are currently visible
$('ul').siblings().length //Siblings of <ul> element
To Get Immediate Children
<a href="/category">Category</a>
<ul id="nav">
<li><a href="#anchor1">Anchor 1</a></li>
<li><a href="#anchor2">Anchor 2</a></li>
<li><span><a href="#anchor3">Anchor 3</a></span></li>
</ul>
$('li > a').length => 2 (only in immediate direct children)
$('li a').length => 3 (all anchor tags )
$('li').children()
or
$('li > *')
or
$('li').find('> *')
Stop Event Bubbling:
return false; => event.stopPropagation(); + event.preventDefault();
event.stopImmediatePropagation(); => stops immediately without executing handlers of same element.
event.stopPropagation(); => stops executing handlers of parent elements, but executes that of same element
end()
You can return to the previous set of DOM elements that were selected before using a destructive method.
<p>text 1 </p>
<p class="test_class">text 2
<span>AAA</span>
</p>
<p>text 3 </p>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
console.log($('p').filter('.test_class').length); // 1
console.log($('p').filter('.test_class').end().length); // 3
console.log($('p').filter('.test_class').find('span').end().end().length); // 3
</script>
filter() vs find()
find() will operates the children of the current set
filter() will only operate on the current set of elements.
On the same level: (FILTER)
$('div').filter('.x').length
or
$('div.x').text()
Inner level search (FIND)
$('div').find('.x').length
or
$('div .x').text()
Jquery - Save File:
$('#ajax-loader').show();
$.post("/test/return/data/", snddata,
function callbackHandler(data, textstatus){
$('#ajax-loader').hide();
if(data.status == 1){
str = data.encrypted_data
saveData(str, "download_file_name")
}
else{
alert(data.msg);
}
},
"json"
);
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
var json = data,
blob = new Blob([json], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
& issues while passing from template to server
str = ''
document.location = '/test/url/' + encodeURIComponent(str);
!important
!important (It will override the CSS definition in header classes)
<style type="text/css">
.bst_popover{
max-width: 500px !important;
}
</style>
Choose a specific parent
$(this).parents("tr:first");
$(this).closest("tr");
Thank you much more for sharing the worthful post. Your post is very inspiring for me and kindly updating...
ReplyDeleteExcel Training in Chennai
Excel Course in Chennai
Tableau Training in Chennai
Linux Training in Chennai
Oracle Training in Chennai
Job Openings in Chennai
Spark Training in Chennai
Pega Training in Chennai
corporate training in chennai
Power BI Training in Chennai
Excel Training in Tambaram
I really enjoyed to read this blog...i got lot of useful information from this blog…
ReplyDeleteAWS Training in Chennai
AWS Training in Bangalore
AWS Training in BTM
AWS Training in Marathahalli
Best AWS Training in Marathahalli
PHP Training in Bangalore
Spoken English Classes in Bangalore
Best AWS Training in Bangalore
Data Science Courses in Bangalore
DevOps Training in Bangalore
Great Blog!!! Thanks for sharing this wonderful post with us.
ReplyDeletePython Training in Chennai
Python course in Chennai
Python Training Institute in Chennai
Best Python Training in Chennai
Python training in porur
Python training in OMR
Big data training in chennai
Android Training in Chennai
IOS Training in Chennai
Selenium Training in Chennai
Hi there, There's no doubt that your site could possibly be having browser compatibility issues. Whenever blog info I take a look at your website in Safari, it looks fine but when opening in Internet Explorer, it's got some overlapping issues. I merely wanted to provide you with a quick heads up! Besides that, great site!
ReplyDelete