Here is some small jQuery functions.
(1) ready and load functions
- ready and load functions
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
alert("document is ready");
});
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
alert("window is loaded");
});
- hide the div on ready with the given class name
jQuery(document).ready(function () {
jQuery("div[class='class1 class2']").hide();
});
(2) set the text of the label
jQuery("#Label1").text("Label1");
text
(3) set the attribute(attr())
//set single attribute
jQuery("#img").attr("src", "../images/up.png");
//set multiple attributes at once
$("#img").attr({
alt: 'This is alt',
title: 'This is title'
});
attr
(4) set the css for the div
jQuery("#div").css("display") = "none"
css
(5) show the div
jQuery("#div").show();
show
(6) hide the div
jQuery("#div").hide();
hide
(7) addClass/remove class
Hello
and
Goodbye
$("p:last").addClass("selected"); //adds the class to
$('p').removeClass('myClass noClass').addClass('yourClass') //removes class and add new one
addClass
(8) find the length of the textbox value
var myLength = $("#TextBox1").val().length;
length
(9) Check the browser
- returns true if browser is Internet Explorer
$.browser.msie
- Check whether the browser if mozilla
if($.browser.msie)
alert("Do stuff for IE");
else alert("Do stuff for firefox"); });
(10) working with substring
- check whether the substring is there or not
$.isSubstring("hello world", "world")); // true;
- gets the substring from o start position to 40 end position
$("#TextBox1").val().substring(0, 40);
(11) string uppercase & lowercase
//Lowercase
$("#TextBox1").val().toLowerCase();
//Uppercase
$("#TextBox1").val().toUpperCase();
(12) split the word
var element = $("#TextBox1").text().split(" ");
alert(element);
text
(13) Create new element
//append some text to the p element
$("p").append("Hello");
//to append new element to div main
$('My Anchor').appendTo('div#main');
//Crteate an element
$("").appendTo('body'); //This will append div to body
appendTo
(14) create clone of the element
a paragraph
$("p").clone().add("Again").appendTo(document.body);
clone
(15) Replacing using jQuery
replaceWith
(16) s ways to remove all of the information bound to an elemtnt
$("div").removeData();
removeData
$("div").remove();
remove
(17) to remove the attribute
jQuery("#" + "<%=TextBox1.ClientID %>").removeAttr("disabled");
removeAttr
(18) trim string using jQuery
var myString = " an example of a string ";
myString = jQuery.trim(myString);
trim
(19) //Determinig the width
- find the width of the element
$("#main").innerWidth();
innerWidth
- find the width of the window
$(window).width();
width
(20) binding the click event
$('#table td ').click(function() {
alert("The TD you clicked contains '" + $(this).text() + "'");
});
$('#table td ').bind('click', function() {
alert("The TD you clicked contains '"+$(this).text()+"'");
});
click
(21) check all checkbox using jQuery
Where
(1) "selectAll" is button on click of the checkboxes should be checked
(2) on click of the button it will loop through the all the checkbox items and check one by one
SelectAll CheckBox
(22) how to fill full calender using the jQuery
(23) check whether the checkboxes provided are checked or not, if not then prompt message for the same
$("#<%= Button1.ClientID %>").click(function () {
var n = $("input:checked").length;
if (n > 0)
return true;
else {
alert('Please select checkboxes.');
return false;
}
});
(24) confirming the gridview onclick of the remove
$(document).ready(function() {
//To remove the row on click on click of the row
$("#<%=grdStudent.ClientID%> tr").click(function() {
//Get confirmation from the user
var answer = confirm('Are you sure you want to delete->' + $(this).find("td:first").html());
//if answer is true remove the row(here you can remove row from database)
if (answer) {
//Change the backgroupd color while removing the GridView row and fade out feel to the user
$(this).css("background-color", "green");
$(this).fadeOut(500, function() {
$(this).remove();
});
}
});
});
GridView and jQuery Confirm
(25) Validate inputboxes using jQuery
(26) Load Page Content
ASP.NET MVC Loading a page content into a div using JQuery
load
(27) validation method required
Plugins/Validation/Methods/required
(28) scroll webpage to top of the page
- Go to top of the page using jQuery
- How do I scroll to the top of the page with jQuery?- Scroll to the top of a webpage with jQuery- Smooth Page Scroll to Top with jQuery- Scrolling to the Top and Bottom with jQuery
