js 练习-层级选择器

练习

针对如下HTML结构：

<!-- HTML结构 -->

<div class="test-selector">
    <ul class="test-lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
    <ol class="test-lang">
        <li class="lang-swift">Swift</li>
        <li class="lang-java">Java</li>
        <li class="lang-c">C</li>
    </ol>
</div>

选出相应的内容并观察效果：

'use strict';
var selected = null;

// 分别选择所有语言，所有动态语言，所有静态语言，JavaScript，Lua，C等:
selected = $('div.test-selector li ');//所有语言
selected = $('ul.test-lang li');//动态语言
selected = $('ol.test-lang li')//静态语言
selected = $('ul.test-lang li.lang-javascript');//JavaScript
selected = $('ul.test-lang li:last-child');//Lua
selected = $('ol.test-lang li:last-child');//c

// 高亮结果:
if (!(selected instanceof jQuery)) {
    return console.log('不是有效的jQuery对象!');
}
$('#test-jquery').find('*').css('background-color', '');
selected.css('background-color', '#ffd351');