TechiWarehouse.Com


Top 3 Products & Services

1.
2.
3.

Dated: Dec. 20, 2012

Related Categories

JavaScript Programming

This jQuery Tutorial assumes that you have a little previous knowledge of jQuery.

It should be quite easy to follow it, if you go through each step, which will brought you at the end, before you move on to the next part of jQuery Tutorial.

ATTRIBUTtES

jQuery has it’s methods for working with DOM attribute elements. They are very simple and there are just a few of them. 

.ADDCLASS()

Adds a class or a group of classes to elements

1

$('p').addClass('myClass yourClass');

 

.HASCLASS()

Checks if the elements have the appropriate class

1

$('#mydiv').hasClass('foo');

 

.TOGGLECLASS()

Deletes or adds classes from elements depending on if the elements have a given class or not. If the element has a given class it’s deleted and vice versa

1

$('p').toggleClass('myClass');

 

.REMOVECLASS()

Deletes a certain class, multiple classes or all the classes from an element.

1

2

3

4

5

6

7

8

// Deletes one class

$('p').removeClass('myClass');

 

// Deletes multiple class

$('p').removeClass('myClass yourClass');

 

// Deletes all classes from an element

$('p').removeClass();

 

.ATTR()

Returns or enters any value for elements

1

2

3

4

5

// Return value

$('a').attr('title');

 

// Assigns value

$('a').attr('title', 'My link');

 

.REMOVEATTR()

Deletes a certain attribute from the elements

1

$('div.container').removeAttr('title');

 

.HTML()

Returns the HTML element content. If there is a forwarded value (HTML), it is entered in the same element

1

2

3

4

5

// Returns the HTML element content

$('div.container').html();

 

// Enters the HTML element content

$('div.container').html('<p>New paragraph</p>');

 

.VAL()

Returns or enters the given value to the elements. It is used for element forms that have the attribute value

1

2

3

4

5

// Returns value

$('input.name').val();

 

// Enters value

$('input.name').val('Peter');

 

jQuery Tutorial

 
This group represents a collection of jQuerys methods for getting information about elements in DOM (order, layout, parent-child  relationship etc.). Since there are many of them we will give only the most important ones.

 

.ADD()

Adds elements to selected elements. It can contain a selector, an already exisitng element or an HTML code

1

2

3

4

5

6

7

8

9

// Adding elements through selectors

$('div').add('p.myclass');

 

// Adding elements that already exist

var myElement = $('p#content');

$('div').add(myElement);

 

// Adding elements through HTML code

$('div').add('<p id="new">New paragraph </p>');

 

.PARENT()

Returns the first parent element. It is possible to forward a certain selector for checking a parent

1

2

3

4

5

// Returns all parent elements

$('div.myclass').parent();

 

// Returns parent elements only if they are this type <li>

$('div.myclass').parent('li');

 

.CHILDREN()

Returns all children elements. It is possible to forward a certain selector for filltering elements

1

2

3

4

5

// Returning all children elements

$('div').children();

 

// Returning only the children elements with the class .myclass

$('div').children('.myclass');

 

.FIND()

Returns all the children elements with a certain type of element (simillar to the .children() method).

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<div id="mydiv">

  <ul>

    <li>1</li>

    <li>

      <ul>

        <li>2.1</li>

        <li>

          <div>2.2</div>

        </li>

        <li>2.3</li>

      </ul>

    </li>

    <li>3</li>

    <li>

      <div>4</div>

    </li>

  </ul>

</div>

 

$('#mydiv').find('div');

In the example above, we have a HTML structure that is made of of two list inside each other. Every one of those lists contains one <div> element. Our .find()  method will select only those two elements.

 

.NEXT()

Returns the next element in a row besides the selected element. It is possible to forward the selector to search only for a certain element.

1

2

3

4

5

//Returns the next element

$('div.myclass').next();

 

// Returns the next element

Only if its the type <ul>

$('div.myclass').next('ul');

 

.PREV()

Returns the previous element in arow by the selected element. It is possible to forward the selector to just search for a certain element

1

2

3

4

5

// Returns the previous element

$('div.myclass').prev();

 

// Returns the previous element only if it’s the type <ul>

$('div.myclass').prev('ul');

 

.FILTER()

Returns only certain elements from selected elements

1

$('li').filter('.selected');

The stated example will return only those <li> elements that have the class selected in them

                                                                                                                       

.HAS()

Returns only elements that contain a certain element

1

$('div').has('ul');

The stated example will return only those <li> elements that contain a <ul> element

 

.NOT()

Returns all selected elements except a certain element. It accepts selectors or already existing elements

1

2

3

4

5

6

// Returns all <div> elements that don’t have an already existing selected element

var mylement = $('p.myclass');

$('div').not(myelement);

 

// Returns all <div> elements that don’t have the myclass class

$('div').not('.myclass');

 

.SLICE()

Limits searched elements to a certain amount according to the ordinal number starting with the given index. It is possible to forward another parameter that represents where the search should end. The first index enters in the search while the other one doesn’t.

Remark: indexing starts with 0

1

2

3

4

5

// Returns all elements after the third one

$('div').slice(2);

 

// returns 4, 5 i 6 element (the last index didn’t enter the group of returned elements)

$('div').slice(3,6);

 

 This was the second part of the lesson about jQuery read the next part of the jQuery tutorial tomorrow.

Now that you've gotten free know-how on this topic, try to grow your skills even faster with online video training. Then finally, put these skills to the test and make a name for yourself by offering these skills to others by becoming a freelancer. There are literally 2000+ new projects that are posted every single freakin' day, no lie!


Previous Article

Next Article