jQuery Selectors: Matches the end of the attribute value E[attr$=value]

This entry is part 13 of 33 in the series jQuery Selectors

E[attr$=value]

Matches any element E whose attribute attr ends in value.

In other words, the value matches the end of the attribute value.

In the example below, we use preventdefault function to prevent the default event, which is to follow the link, to happen.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>codecrawl.com</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $("a[href$='.com']").click(function (event) {
                event.preventDefault();
            });
        });
    </script>

</head>
<body>
<a href='http://google.com'>This is to google</a>
<br>
<a href='http://yahoo.com'>This is to yahoo</a>
</body>
</html>

If we have an element with a class name topMenu, we can also match it with class$=Menu.

jQuery Selectors: Attribute attr not equal to a value

This entry is part 11 of 33 in the series jQuery Selectors

We could have $(‘[attr=value]’), we could also negate the value using $(‘[attr!=value]’).

So only clicking on Clear button below will display a message.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $("input[value!='Send']").click(function () {
                $('.message').show();
            });
        });
    </script>
</head>
<body>
<br>
Name: <input type='text' name='name'>
<br>
Phone: <input type='text' name='phone'>
<br>

Comments:
<br>
<textarea name='comment' rows='3'></textarea>
<br>
<input type='submit' value='Send'>
<input type='reset' value='Clear'>

<p class='message' style='display: none; color: grey'>Inputs Cleared</p>

</body>
</html>

jQuery Selectors: Attribute attr begins with a value

This entry is part 9 of 33 in the series jQuery Selectors

Here we use jQuery selectors to select an <img> elements whose src attribute starts with http.

The image is sized to a height of 200px through a jQuery selector.

The syntax is $(‘[attr^=value]’).

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Image</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $("img[src^='http']").css('height', '200px');
        });
    </script>
</head>
<body>

<h4>Ushuaia</h4>

<p>Southernmost city in the world.</p>

<img src='https://codecrawl.com/code/images/ushuaia.jpg'>

</body>
</html>

 

jQuery Selectors: Select all elements that match a substring

This entry is part 8 of 33 in the series jQuery Selectors

As in CSS3 selectors, we can select elements that match a substring in a class.

For example, the 2 classes below both contain the substring Line.

Its syntax is E[attr*=value].

<!DOCTYPE html>
<html>
<head>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $('p[class*=Line]').css('color', 'blue');
        });
    </script>
</head>
<body>
<h4>Ushuaia</h4>

<p>Southernmost city in the world.</p>

<p class='firstLine'>The city centered around a prison built by the Argentine government.</p>

<p class='secondLine'>They also built a railway to the settlement, now a tourist attraction known as the End of the World Train, the
    southernmost railway in the world.</p>

<a href='http://en.wikipedia.org/wiki/Ushuaia'>Visit us here.</a>
</body>
</html>