Category Archives: Jquery

July 9, 2015   Jquery

jQuery removeAttr Method

jQuery removeAttr method : The primary use of the removeAttr method is used to remove attribute from the html element. Below is simple example with demo and online editor.

jQuery removeAttr Method Syntax

Here is syntax to remove attributes from html elements.

$(selector).removeAttr('attr_name');

attr_name: It is name of attribute which you want to remove.

jQuery removeAttr Method Example

Here is an example of jQuery remove Attribute method-

jQuery removeAttr() Method – Example –

Try it »

This will produce the following output –

Note : This is screenshot of the output. To run this demo click on the above Try it button.

jQuery removeAttr Method

Read More
July 9, 2015   Jquery

jQuery attr Method

jQuery attr() method : is used to add new attribute and their value or get value of an attribute. You can use this method for both adding attribute value and getting attribute value. This method is an important method for attribute of elements. You can dynamically create new attribute and assign to the elements with the help of attributes.

Syntax of jQuery attr method

Set and get Attribute value is explained with the example and demo below-

Get attribute Value :

To get attribute value only attribute name is needed as first parameter.

Note : It will return value of first matching selector.

Here is syntax to get value from attribute.

$(selector).attr('attr_name');

attr_name: It is name of attribute whose value you want to access.

jQuery attr Method Example 1

Here is example of add attribute example –

jQuery attr() Method get the attribute val

Try it »

Add Attr

To set attribute value add value of attribute as second parameter.

Note : Second parameter is mandatory for adding value of attribute.

Here is syntax to get value from attribute.

$(selector).attr({Attr_name:Attr_val});

jQuery attr method Example 2

Here is example of Set attribute value example –

jQuery attr() Method -Add Attr

Try it »

The above example will produce the following output where Background is added using attr method set value.

jQuery attr Method Example and Demo

Read More
July 9, 2015   Jquery

jQuery val Method

jQuery val method : is used to get and set value in form fields.

Syntax of jQuery val() method

Get Value

$(selector).val();

Note : It does not accepts any argument.
It is used to get form field value.

jQuery val Method Example 1

jQuery val() Method – Example 1 – Get The val

Try it »

Set Val

$(selector).val(value);

value:value to be set.

jQuery val method Example 2

jQuery val() Method – Example 2 – Set The val/h3>

Try it »

Read More
July 9, 2015   Jquery

jQuery html method

jQuery html method : is used to get the html of the given element.

Syntax of jQuery html() method

Get Html

$(selector).html();

Note : It does not accepts any argument.

jQuery html Method Example 1

jQuery html() Method – Example 1 – Get The Html

Try it »

Set Html

$(selector).html(html-data);

html-data: string containing the html.

jQuery html() method Example 2

jQuery html Method – Example 2 – Set The Html/h3>

Try it »

Read More
July 7, 2015   Jquery

jQuery text method

jQuery text method : is used to read or write the text in the html.

Syntax of jQuery text() method

Get Text

$(selector).text();

Note : It does not accepts any argument.

jQuery text Method with syntax

jQuery text() Method – Example 1 – Get The Text

Try it »

Set Text

$(selector).text(text);

text: String,Number or Boolean to be set as content.

jQuery text Method with syntax

jQuery text() Method – Example 2 – Set The Text

Try it »

Read More
June 27, 2015   Jquery

jQuery Traversing

jQuery traversing : jQuery Traversing stands traverse the Html DOM based on the element’s relationship. jQuery Traversing is used to filter the html elements based on the element’s relationship with the other elements.

Basic Example Of jQuery Traversing

Lets Start with very basic example.

      
    

    
        


            June 27, 2015
              Jquery

                 
        

        
        
jQuery CallBack

           
        

            
                        
            


jQuery Callback function is called when current action is completed. Example – When slideDown effect(action) is completed.




jQuery CallBack functions example


In the below example callback function is executed when the show effect is completed.




jQuery CallBack functions example








    









Try it »



        

        
                

            Read More
        

                
    
    
    

    
        


            June 26, 2015
              Jquery

                 
        

        
        
jQuery Chaining

           
        

            
                        
            

In jQuery you can link more then one jquery actions together.




jQuery Chaining Example And Code




jQuery Chaining Example








    









Try it »



Some Important Points about jQuery chaining :


    

  • It Improves Performance
    • 

  • Method called in sqquence of right to left ie. method added first will be called first and method added in last will be called in last. 
     In the above example first .animate(),.css() and then slideUp() is called  
    • 



jQuery Chaining Most Used Examples


[table width=”100%” colwidth=”20|190|50″ colalign=”left|left|center|left|right”]

No, Slide Animate Effect ,Syntax, Example & Demo

1, jQuery selector chaining example,$(“selector1\,selector2\,selector3\, selector4….”).method();, Example And Demo

2, jQuery chaining animations,—–, Example And Demo

[/table]


        

        
                

            Read More
        

                
    
    
    

    
        


            June 22, 2015
              Jquery

                 
        

        
        
jQuery Animate

           
        

            
                        
            


jQuery animate() Creates custom animations on the elements.




Syntax of jQuery animate


$(selector).animate({parameters},speed,callback);





Animate Example
















Try it »




Animate More Examples




Animate Example With milliseconds
















Try it »




Animate Some Common Examples


[table width=”100%” colwidth=”20|190|50″ colalign=”left|left|center|left|right”]

No, Slide Animate Effect ,Syntax, Example & Demo

1,Animate Background Color, $(selector).animate({background:’yellow’});,See Detail & Demo »

2,Animate Background Color “slow”, $(selector).animate({background:’yellow’}\,”slow”);,See Detail & Demo »

3,Animate Background Color “fast”, $(selector).animate({background:’yellow’}\,”fast”);,See Detail & Demo »

4,Animate Background Color “milliseconds”, $(selector).animate({background:’yellow’}\,1000);,See Detail & Demo »

[/table]


        

        
                

            Read More
        

                
    

    

        
        
« Older posts

        
Newer posts »