jQuery Selectors: Appending a li to an ul element

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

Using jQuery selector, we can append a <li> item to a <ul> list.

We can use the same selector ul.rock to append an item to the second list.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Lists</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $('ul.rock').append('<li>Tracy Chapman</li>');
        });
    </script>
</head>
<body>

<h4>British Pop</h4>
<ul>
    <li>Cold Play</li>
    <li>Depeche Mode</li>
    <li>Adele</li>
</ul>

<h4>American Rock</h4>
<ul class='rock'>
    <li>Linkin Park</li>
    <li>Nirvana</li>
    <li>Metalica</li>
</ul>

</body>
</html>

jQuery Selector: Select elements where attribute attr=value

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

A way to use jQuery selectors is to select HTML elements by their attribute values.

Here we select a clear buton and when it is clicked, a message is displayed.

<!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='Clear']").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: 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>

 

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: Using meta or special characters

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

In the previous example, the image src url starts with https://codecrawl.com.

The 2 forward slashes // are meta characters.

If the image source has the below url, we would need to use escape character with 2 backslashes \\ in the selector.

<img src=’//codecrawl.com/code/images/ushuaia.jpg’>

The selector would need to be established asĀ $(“img[src^=’\\/\\/code’]”).

<!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^='\\/\\/code']").css('height', '200px');
        });
    </script>
</head>
<body>

<h4>Ushuaia</h4>

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

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

</body>
</html>