file browser

js/q01.php

<html id="q01Html">
 <head>
<script src="jquery-3.3.1/jquery.js"></script>
<script>
$().ready(function () {
    document.title = 'title from jQuery $().ready';
//    $('#a1').text($('#a1').text() + ' append from jQuery in ready ' + $('#a1').toString());
    $('#a1').text($('#a1').text() + ' +++ from $().ready: $().text()=' + $('#a1').text() + ', $(#a1)[0].toString()=' + $('#a1')[0].toString());
    $('div').each(function (i, e) {
        $(e).text($(e).text() + ' +++ from ready.$(div).each ' + i + ': ' + e.toString());
        });
        $('#sels').html(getSels());
    rsz();
    $(window).on('resize',rsz);
    });

    function rsz() {
    var t = $('#a1').html();
    if (t.indexOf('<ul>') >= 0)
        t = t.substr(0, t.indexOf('<ul>'));
    $('#a1').html(t + '<ul><li>window ' + window.innerWidth + 'x' + window.innerHeight + '</li>'
                                + '<li>jQuery(window) ' + $(window).width() + 'x' + $(window).height() + '</li>'
                                 + '<li>jQuery(window) inner' + $(window).innerWidth() + 'x' + $(window).innerHeight() + '</li>'
                               + '<li>screen ' + screen.width + 'x' + screen.height + '</li>'
                + '<li>body ' + $('body').width() + 'x' + $('body').css('height') + '</li>'
                + '<li>body ' + $('body').width() + 'x' + $('body').height() + ' offset ' + $('body').offset().left + 'x'  + $('body').offset().top + '</li>'
                + '<li>b1 display ' + $('#b1').css('display') + '</li></ul>');
    $('#b1').css({display: 'inline-block', verticalAlign: 'top', backgroundColor: 'green'}).width(200); 
    $('#b2').css({display: 'inline-block', verticalAlign: 'top', backgroundColor: 'yellow', width: (window.innerWidth - 245) + 'px'});
}

    let gg = '<li>global gg</li>';    
    function getSels() {
        gg += '<li> elmenttype: $(div) getAttribute(id) ==>'; 
        $('div').each(function(i, e) {gg += ' ' + i + '=' + e.getAttribute('id'); } ); // getAttribute is js dom method
        gg += "</li><li>attribute beginsWith $([id^='b']) id ==>";
        $("[id^='b']").each(function(i, e) {gg += ' ' + i + '=' + $(e).attr('id'); } ); // text is jquery method
        gg += "</li><li>children: $(#lst>*) text ==>";
        $('#lst>*').each(function(i, e) {gg += ' ' + i + '=' + $(e).text(); } );
        gg += "</li><li>descendants: $(#lst *) text ==>";
        $('#lst *').each(function(i, e) {gg += ' ' + i + '=' + $(e).text(); } );
        gg += "</li><li> root oder has child: $(:root,:has(#lst)) text ==>";
        $(':root,:has(#lst)').each(function(i, e) {gg += ' ' + i + '=' + e.toString() + '-' + $(e).attr('id'); } );
        gg += '</li>';
        return gg;
    }
</script>
 

  <title>q01 html title </title>
 </head>
 <body id="q01Body">

<h1>h1 jQuery example 01</h1>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="b1">b1</div>
<div id="b2">b2</div>
<div id="c1">c1</div>
<div id="c2">c2</div>

<ol id="lst">
<li>l1</li>
<li>l2</li>
<ul>
<li>l2A</li>
<li>l2B</li>
</ul>
<li>l3
<div id="l3D"> l3Div</div>
</li>
<li>l4</li>
</ol>

<h2>Selector ids</h2>
<ul id="sels">
    <li>empty</li>    
</ul>
<h1>Source <?php echo __file__; ?> </h1>
<?php highlight_file(__file__) ?>
 </body>
</html>