DOM in jQuery

DOM Content Demo
overloaded val(), text(), and html() methods allow getting and setting content
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>DOM Content Demo</title>
        <!-- get jQuery from Google's CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            window.onload = function () {
                // note : selector uses # before element id - here 'the title' is found
                var title = $('#title').text();
                console.log(title);
                alert($('#title').text());

                // note : without # selector gets element with tag name - here 'DOM Content Demo' is found
                title = $('title').text();
                console.log(title);
                alert($('title').text());

                // returns raw HTML inside the tags
                console.log($('ul').html());
                alert($('ul').html());

                // when multiple elements are found the text of the elements is concatenated
                console.log($('li').text());
                alert($('li').text());

                // returns the attribute value of the named attribute - here 'test()' is found
                console.log($('button').attr('onclick'));
                alert($('button').attr('onclick'));
            }

            // returns text from the input element
            function test() {
                console.log($('input').val());
                alert($('input').val());
            }

            // change the text of an element
            function changeTitleText() {
                $('#title').text('a new title');
            }

            // change the text of the page title
            function changePageTitle() {
                $('title').text('a new page title');
            }

            // change the HTML in all the p tags
            function changeParagraphElements() {
                $('p').html('new text');
            }

            // set value of the input element
            function setInputValue() {
                $('input').val('my new value');
            }
        </script>
    </head>
    <body>
        <h1 id="title">the title</h1>
        <p class="paragraph">paragraph text 1</p>
        <p class="paragraph">paragraph text 2</p>
        <input type="text" />
        <button onclick="test()">Test</button>
        <br />
        <br />
        <button onclick="changeTitleText()">Change h1 Text</button>
        <br />
        <br />
        <button onclick="changePageTitle()">Change Page Title</button>
        <br />
        <br />
        <button onclick="changeParagraphElements()">Change Paragraph Elements</button>
        <br />
        <br />
        <button onclick="setInputValue()">Set Input Value</button>
        <ul>
            <li>List element 1</li>
            <li>List element 2</li>
            <li>List element 3</li>
            <li>List element 4</li>
            <li>List element 5</li>
        </ul>
    </body>
    </html>
        
Top

Index

DOM Structure Demo
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>DOM Structure Demo</title>
        <!-- get jQuery from Google's CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            window.onload = function () {

            }
            function addLi() {
                var count = $('ul').children().length + 1;
                var txt = "List element " + count;
                var newLi = $('<li></li>').text(txt);
                $('ul').append(newLi);
            }
            function removeLi() {
                if ($('ul').children().length > 0) {
                    $('ul li:last').remove();
                }
            }
        </script>
    </head>
    <body>
        <h1 id="title">the title</h1>
        <p class="paragraph">paragraph text 1</p>
        <p class="paragraph">paragraph text 2</p>
        <input type="text" />
        <p />
        <button onclick="addLi()">Add</button>
        <p />
        <button onclick="removeLi()">Remove</button>

        <ul>
            <li>List element 1</li>
            <li>List element 2</li>
            <li>List element 3</li>
            <li>List element 4</li>
            <li>List element 5</li>
        </ul>
    </body>
    </html>
        
Top

Index

DOM Traversal Demo
below is HTML in which the snippets run in the window.onload method
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>DOM Structure Demo</title>
        <!-- get jQuery from Google's CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            window.onload = function () {

            }
        </script>
    </head>
    <body>
        <h1 id="title">the title</h1>
        <p class="paragraph">paragraph text 1</p>
        <p class="paragraph">paragraph text 2</p>
        <input type="text" />
        <ul>
            <li>List element 1</li>
            <li>List element 2</li>
            <li class='active'>List element 3</li>
            <li>List element 4</li>
            <li>List element 5</li>
        </ul>
    </body>
    </html>
            
this snippet outlines ul's child elements
    $('ul').children().css('outline', '1px solid red');
        
this snippet outlines body's child elements
    $('body').children().css('outline', '1px solid blue');
                    
this snippet sets the bottom border of p elements
    $('body').children('p').css('border-bottom', '2px solid red');    
      
this snippet sets the top border of elements with class name
    $('body').children('.paragraph').css('border-top', '2px solid red');
                    
this snippet sets the top border of elements with id
    $('body').children('#title').css('border-top', '2px solid red');
                    
this snippet changes all siblings except the one used by the selector
    $('h1').siblings().css('color', 'red');     
       
this snippet changes next sibling of the one used by the selector
    $('h1').next().css('color', 'blue');       
     
this snippet changes all sibling after the one used by the selector until the tag used as arg to nextUntil method
    $('p:last').nextUntil('ul').css('background-color', 'yellow');
    
prev, prevAll, prevUntil methods work the same way except in reverse direction

this snippet changes ul border

    $('li:first').parent().css('outline', '3px dotted yellow');
            
this snippet changes ul and body borders
    $('li:first').parents().css('outline', '3px dotted yellow');        
        
parentsUntil method works similar

these two snippets work the same way
changes first li

    $('li').first().css('outline', '3px dotted red');
    $('li:first').css('outline', '3px dotted red');     
     
this snippet changes li with index equal to arg (zero-based)
    $('li').eq(2).css('outline', '3px dotted red');      
      
this snippet outlines the li element with the class active
    $('li').filter('.active').css('outline', '1px solid red');
        
this snippet outlines all the li elements except the class active
    $('li').filter('.active').css('outline', '1px solid red');
        
Top

Index

n4jvp.com