jQuery: not

This entry is part 31 of 33 in the series jQuery Tutorial

For not method, the supplied selector is tested against each element; the elements that don’t match the selector will be included in the result.

<!doctype html>
<html>
<head>
    <title>not demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        div {
            width: 50px;
            height: 50px;
            margin: 10px;
            float: left;
            background: yellow;
            border: 2px solid white;
        }

        .green {
            background: #8f8;
        }

        .gray {
            background: #ccc;
        }

        #blueone {
            background: #99f;
        }
    </style>
</head>
<body>

<div></div>
<div id='blueone'></div>
<div></div>
<div class='green'></div>
<div class='green'></div>
<div class='gray'></div>
<div></div>

<script>
    $('div').not('.green, #blueone')
            .css('border-color', 'red');
</script>

</body>
</html>

Post Your Gameplays

In this example, class=’green’ and id=’blueone’ will be excluded when applying the .css method.

jQuery: .each()

This entry is part 32 of 33 in the series jQuery Tutorial

The .each(function()) will iterate over a jQuery object, executing a function for each matched element.

Each time the callback or function runs, it is passed the current loop iteration, beginning from 0.

More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

<!doctype html>
<html>
<head>
    <title>each demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        ul {
            font-size: 18px;
            margin: 0;
        }

        span {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }

        .example {
            font-style: italic;
        }
    </style>
</head>
<body>

To do list: <span>(click here to change)</span>
<ul>
    <li>Eat</li>
    <li>Sleep</li>
    <li>Be merry</li>
</ul>

<script>
    $('span').click(function () {
        $('li').each(function () {
            $(this).toggleClass('example');
        });
    });
</script>

</body>
</html>

Submit Video

In this case, this is referred to the li element.

jQuery: A simple slider

This entry is part 33 of 33 in the series jQuery Tutorial

This is a simple jQuery slider and notice how I have used the if else statement to determine the state of the slider.

<!DOCTYPE html>
<html>
    <head>
        <style>
            #hideme { 
                background:#de9a44; 
                width:120px;
                height:25px; 
                display:none; 
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <p>Hover On Me!</p>
        <div id="hideme"><h3>Rock & Roll</h3></div>

        <script>
            $(document.body).hover(function () {
                if ($("#hideme").is(":hidden")) {
                    $("#hideme").slideDown("slow");
                } else {
                    $("#hideme").hide();
                }
            });

        </script>

    </body>
</html>

Try The Code