[jQuery] attribute Selector -Trickcode

 [jQuery] attribute Selector

• Attribute Selectors are select an element from a selected attribute element.
• The following example will clear the doubt about the Attributes.

Example

• <input id="txtinput" name="user" / >
• 
  
• Here ID, Name attributes.
• An element selected based on Attribute is known as Attributes Selectors.

Based name

• Jquery name-based attribute selectors are select.
• This jquery selector gets an element and gives it to jquery manipulation.

Example

$(document).ready(function () {
    $('button').click(function () {
        alert($('h1[title|= head]').text());

    });
});

• This example shows the content which has the title attribute value in the head. 
• Here, one more Example explains how to define more attributes in a single selector.

Example

$(document).ready(function () {
    $('button').click(function () {
        alert($('h1[title|= head][name=first]').text());

    });
});

It's pre-owned which element has these two attributes then it will be elected.

Based on starting value

• In this selection based on only which element value has the matched value.
• The cap symbol represents the starting value.

Example

$(document).ready(function () {
    $('button').click(function () {
        alert($('h1[title^= head]').text());

    });
});

• It selects which title attribute value starts with 'head'.

Based on Ending Value

• In this selector elect a set of matched elements based on their ending value.
• This method has very helpful to find out the file extension.

• Example

$(document).ready(function () {
    $('button').click(function () {
        alert($('a[href$=.png]').text());

    });
});

• This example derives the text which links have the extension of 'png'.
• The $ dollar symbol represents the ending notation.

Based on Sibling

• In this jquery selector method used to obtain a set of the element based on their sideway or sibling values.
• The bellow denotation will clear the sibling attribute selectors.

<a href="www.abc.com title="head section">

Example

 $(document).ready(function () {
    $('button').click(function () {
        alert($('a[title~=section]').text());

    });
 });      

• It prefers element which has one of the title value has to section.
• The ~ symbol denotes the sibling methods.

Based on Not

• It selects which set of the element didn't have a marched attribute value.

Example

$(document).ready(function () {
    $('button').click(function () {
        alert($('h1[title!= head]').text());

    });
});  

• It prefers which title attribute didn't have the head value.
• Mainly it used to extract the element.