Friday, November 12, 2010

Some useful jQuery small functions

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 jQuerySmooth Page Scroll to Top with jQueryScrolling to the Top and Bottom with jQuery       
              

No comments:

Post a Comment