jQuery选择器 -- 笔记 - 图2层级选择器

ancestor_descendant

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Ancestor Descendant</title>
  6. <script type="text/javascript" src="js/jquery.js"></script>
  7. <script type="text/javascript">
  8.   $(document).ready(function() {
  9.     var summaries = $('aside summary');
  10.     console.log(summaries);
  11. });
  12. </script>
  13. </head>
  14. <body>
  15. <aside>
  16.     <details>
  17.         <summary>网页设计</summary>
  18.         <ul>
  19.             <li>Photoshop</li>
  20.             <li>Illustrator</li>
  21.             <li>Sketch</li>
  22.         </ul>
  23.     </details>
  24.     <details>
  25.         <summary>网站前端</summary>
  26.         <details>
  27.             <summary>结构层</summary>
  28.             <ul>
  29.                 <li>HTML</li>
  30.                 <li>Jade</li>
  31.             </ul>
  32.         </details>
  33.         <details>
  34.             <summary>表示层</summary>
  35.             <ul>
  36.                 <li>Css</li>
  37.                 <li>Less</li>
  38.                 <li>Sass</li>
  39.             </ul>
  40.         </details>
  41.         <details>
  42.             <summary>行为层</summary>
  43.             <ul>
  44.                 <li>JavaScript</li>
  45.                 <li>CoffeeScript</li>
  46.                 <li>TypeScript</li>
  47.             </ul>
  48.         </details>
  49.     </details>
  50.     <details>
  51.         <summary>网站后端</summary>
  52.         <ul>
  53.             <li>Asp</li>
  54.             <li>Jsp</li>
  55.             <li>PHP</li>
  56.             <li>Python</li>
  57.             <li>Golang</li>
  58.             <li>Node</li>
  59.         </ul>
  60.     </details>
  61.     <details>
  62.         <summary>数据库</summary>
  63.         <details>
  64.             <summary>关系型数据库</summary>
  65.             <ul>
  66.                 <li>Oracle</li>
  67.                 <li>DB2</li>
  68.                 <li>Microsoft SQL Server</li>
  69.                 <li>Microsoft Access</li>
  70.                 <li>MySQL</li>
  71.                 <li>SQLite</li>
  72.             </ul>
  73.         </details>
  74.         <details>
  75.             <summary>非关系型数据库</summary>
  76.             <ul>
  77.                 <li>NoSQL</li>
  78.                 <li>Cloudant</li>
  79.                 <li>MongoDB</li>
  80.                 <li>Redis</li>
  81.                 <li>HBase</li>
  82.             </ul>
  83.         </details>
  84.     </details>
  85. </aside>
  86. </body>
  87. </html>

parent_child

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parent > Child</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var details = $('aside > details');
    console.log(details);
});
</script>
</head>
<body>
<aside>
    <details>
        <summary>网页设计</summary>
        <ul>
            <li>Photoshop</li>
            <li>Illustrator</li>
            <li>Sketch</li>
        </ul>
    </details>
    <details>
        <summary>网站前端</summary>
        <details>
            <summary>结构层</summary>
            <ul>
                <li>HTML</li>
                <li>Jade</li>
            </ul>
        </details>
        <details>
            <summary>表示层</summary>
            <ul>
                <li>Css</li>
                <li>Less</li>
                <li>Sass</li>
            </ul>
        </details>
        <details>
            <summary>行为层</summary>
            <ul>
                <li>JavaScript</li>
                <li>CoffeeScript</li>
                <li>TypeScript</li>
            </ul>
        </details>
    </details>
    <details>
        <summary>网站后端</summary>
        <ul>
            <li>Asp</li>
            <li>Jsp</li>
            <li>PHP</li>
            <li>Python</li>
            <li>Golang</li>
            <li>Node</li>
        </ul>
    </details>
    <details>
        <summary>数据库</summary>
        <details>
            <summary>关系型数据库</summary>
            <ul>
                <li>Oracle</li>
                <li>DB2</li>
                <li>Microsoft SQL Server</li>
                <li>Microsoft Access</li>
                <li>MySQL</li>
                <li>SQLite</li>
            </ul>
        </details>
        <details>
            <summary>非关系型数据库</summary>
            <ul>
                <li>NoSQL</li>
                <li>Cloudant</li>
                <li>MongoDB</li>
                <li>Redis</li>
                <li>HBase</li>
            </ul>
        </details>
    </details>
</aside>
</body>
</html>

prev_next

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prev + Next</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var uls = $('summary + ul');
    console.log(uls);
    var details = $('summary + details');
    console.log(details);
});
</script>
</head>
<body>
<aside>
    <details>
        <summary>网页设计</summary>
        <ul>
            <li>Photoshop</li>
            <li>Illustrator</li>
            <li>Sketch</li>
        </ul>
    </details>
    <details>
        <summary>网站前端</summary>
        <details>
            <summary>结构层</summary>
            <ul>
                <li>HTML</li>
                <li>Jade</li>
            </ul>
        </details>
        <details>
            <summary>表示层</summary>
            <ul>
                <li>Css</li>
                <li>Less</li>
                <li>Sass</li>
            </ul>
        </details>
        <details>
            <summary>行为层</summary>
            <ul>
                <li>JavaScript</li>
                <li>CoffeeScript</li>
                <li>TypeScript</li>
            </ul>
        </details>
    </details>
    <details>
        <summary>网站后端</summary>
        <ul>
            <li>Asp</li>
            <li>Jsp</li>
            <li>PHP</li>
            <li>Python</li>
            <li>Golang</li>
            <li>Node</li>
        </ul>
    </details>
    <details>
        <summary>数据库</summary>
        <details>
            <summary>关系型数据库</summary>
            <ul>
                <li>Oracle</li>
                <li>DB2</li>
                <li>Microsoft SQL Server</li>
                <li>Microsoft Access</li>
                <li>MySQL</li>
                <li>SQLite</li>
            </ul>
        </details>
        <details>
            <summary>非关系型数据库</summary>
            <ul>
                <li>NoSQL</li>
                <li>Cloudant</li>
                <li>MongoDB</li>
                <li>Redis</li>
                <li>HBase</li>
            </ul>
        </details>
    </details>
</aside>
</body>
</html>

prev_siblings

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prev ~ Siblings</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var uls = $('summary ~ ul');
    console.log(uls);
    var details = $('summary ~ details');
    console.log(details);
});
</script>
</head>
<body>
<aside>
    <details>
        <summary>网页设计</summary>
        <ul>
            <li>Photoshop</li>
            <li>Illustrator</li>
            <li>Sketch</li>
        </ul>
    </details>
    <details>
        <summary>网站前端</summary>
        <details>
            <summary>结构层</summary>
            <ul>
                <li>HTML</li>
                <li>Jade</li>
            </ul>
        </details>
        <details>
            <summary>表示层</summary>
            <ul>
                <li>Css</li>
                <li>Less</li>
                <li>Sass</li>
            </ul>
        </details>
        <details>
            <summary>行为层</summary>
            <ul>
                <li>JavaScript</li>
                <li>CoffeeScript</li>
                <li>TypeScript</li>
            </ul>
        </details>
    </details>
    <details>
        <summary>网站后端</summary>
        <ul>
            <li>Asp</li>
            <li>Jsp</li>
            <li>PHP</li>
            <li>Python</li>
            <li>Golang</li>
            <li>Node</li>
        </ul>
    </details>
    <details>
        <summary>数据库</summary>
        <details>
            <summary>关系型数据库</summary>
            <ul>
                <li>Oracle</li>
                <li>DB2</li>
                <li>Microsoft SQL Server</li>
                <li>Microsoft Access</li>
                <li>MySQL</li>
                <li>SQLite</li>
            </ul>
        </details>
        <details>
            <summary>非关系型数据库</summary>
            <ul>
                <li>NoSQL</li>
                <li>Cloudant</li>
                <li>MongoDB</li>
                <li>Redis</li>
                <li>HBase</li>
            </ul>
        </details>
    </details>
</aside>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>[attribute]</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var all = $('[class]');
    console.log(all);
    var tool = $('[class=tool]');
    console.log(tool);
    var notool = $('[class!=tool]');
    console.log(notool);
    var tools = $('[class^=tool_]');
    console.log(tools);
    var vs = $('[class$=vs]');
    console.log(vs);
    var vses = $('[class*=vs]');
    console.log(vses);
    var scripts = $('[type][src]');
    console.log(scripts);
    var jq = $('[class][class*=lang][class$=y]');
    console.log(jq);
});
</script>
</head>
<body>
<details class="tool">
    <summary>开发工具</summary>
    <p class="tool_sublime">Sublime Text</p>
    <p class="tool_webstrom">WebStorm</p>
    <p class="tool_vs">Visual Studio</p>
    <p class="tool_vscode">Visual Studio Code</p>
</details>
<details class="lang">
    <summary>开发语言</summary>
    <p class="lang_html">HTML</p>
    <p class="lang_css">Css</p>
    <p class="lang_js">JavaScript</p>
    <p class="lang_jquery">jQuery</p>
</details>
</body>
</html>

过滤器

child

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:child</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var first = $('details > p:first-child');
    console.log(first);
    var last = $('details > p:last-child');
    console.log(last);
    var nthF = $('details > p:nth-child(2)');
    console.log(nthF);
    var nthL = $('details > p:nth-last-child(2)');
    console.log(nthL);
    var only = $('details > p:only-child');
    console.log(only);
});
</script>
</head>
<body>
<details class="tool" open="open">
    <summary>编辑器</summary>
    <p class="tool_sublime">Sublime Text</p>
</details>
<details class="ide" open="open">
    <summary>IDE</summary>
    <p class="tool_webstrom">WebStorm</p>
    <p class="tool_vs">Visual Studio</p>
    <p class="tool_vscode">Visual Studio Code</p>
</details>
<details class="lang" open="open">
    <summary>开发语言</summary>
    <p class="lang_html">HTML</p>
    <p class="lang_css">Css</p>
    <p class="lang_js">JavaScript</p>
    <p class="lang_jquery">jQuery</p>
</details>
</body>
</html>

type

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:type</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var first = $('details > p:first-of-type');
    console.log(first);
    var last = $('details > p:last-of-type');
    console.log(last);
    var nthF = $('details > p:nth-of-type(2)');
    console.log(nthF);
    var nthL = $('details > p:nth-last-of-type(2)');
    console.log(nthL);
    var only = $('details > p:only-of-type');
    console.log(only);
    var ps = $('p:nth-of-type(3n)');
    console.log(ps);
});
</script>
</head>
<body>
<details class="tool" open="open">
    <summary>编辑器</summary>
    <p class="tool_sublime">Sublime Text</p>
</details>
<details class="ide" open="open">
    <summary>IDE</summary>
    <p class="tool_webstrom">WebStorm</p>
    <p class="tool_vs">Visual Studio</p>
    <p class="tool_vscode">Visual Studio Code</p>
</details>
<details class="lang" open="open">
    <summary>开发语言</summary>
    <p class="lang_html">HTML</p>
    <p class="lang_css">Css</p>
    <p class="lang_js">JavaScript</p>
    <p class="lang_jquery">jQuery</p>
</details>
</body>
</html>

表单相关

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单相关</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var inputs = $(':input');
    console.log(inputs);
    var texts = $(':text');
    console.log(texts);
    var enabled = $(':enabled');
    console.log(enabled);
    var disabled = $(':disabled');
    console.log(disabled);
    var checked = $(':checked');
    console.log(checked);
    var selected = $(':selected');
    console.log(selected);
});
</script>
</head>
<body>
<form>
    <div>
        <input type="hidden" value="id">
    </div>
    <div>
        <label>用户名：</label>
        <input type="text" placeholder="用户名">
    </div>
    <div>
        <label>密码：</label>
        <input type="password" placeholder="密码">
    </div>
    <div>
        <label>姓名：</label>
        <input type="text" placeholder="姓名" disabled>
    </div>
    <div>
        <label>性别：</label>
        <input type="radio" name="sex" checked>男
        <input type="radio" name="sex">女
        <input type="radio" name="sex" disabled>其他
    </div>
    <div>
        <label>出生日期：</label>
        <input type="date">
    </div>
    <div>
        <label>电话：</label>
        <input type="tel" placeholder="电话">
    </div>
    <div>
        <label>邮箱：</label>
        <input type="email" placeholder="邮箱">
    </div>
    <div>
        <label>QQ：</label>
        <input type="number" placeholder="QQ">
    </div>
    <div>
        <label>爱好：</label>
        <input type="checkbox" checked>吃
        <input type="checkbox">喝
        <input type="checkbox">玩
        <input type="checkbox">乐
    </div>
    <div>
        <label>血型：</label>
        <select>
            <option selected>选择血型</option>
            <option>A</option>
            <option>B</option>
            <option>AB</option>
            <option>O</option>
            <option>RH-AB</option>
        </select>
    </div>
    <div>
        <label>头像：</label>
        <input type="file" enabled>
    </div>
    <div>
        <label>个人简介：</label>
        <textarea></textarea>
    </div>
    <div>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="按钮">
        <input type="image" value="个性提交">
        <button>按钮</button>
    </div>
</form>
</body>
</html>

查找和过滤

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查找和过滤</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var js = $('aside').find('.javascript');
    console.log(js);
    var details = $('aside').children('details');
    console.log(details);
    var js_parent = js.parent();
    console.log(js_parent);
    var less = $('.less');
    console.log(less);
    var sass = less.next();
    console.log(sass);
    var css = less.prev();
    console.log(css);
    var li = $('li').eq(8);
    console.log(li);
    var php = $('.php');
    console.log(php);
    var lis = php.siblings();
    console.log(lis);
    var allLis = $('li');
    console.log(allLis);
    var python = allLis.filter('.python');
    console.log(python);
    var obj = allLis.filter(function(index) {
        console.log(index);
    });
});
</script>
</head>
<body>
<aside>
    <details open="open">
        <summary>网页设计</summary>
        <ul>
            <li class="ps">Photoshop</li>
            <li class="ai">Illustrator</li>
            <li class="sketch">Sketch</li>
        </ul>
    </details>
    <details open="open">
        <summary>网站前端</summary>
        <details open="open">
            <summary>结构层</summary>
            <ul>
                <li class="html">HTML</li>
                <li class="jade">Jade</li>
            </ul>
        </details>
        <details open="open">
            <summary>表示层</summary>
            <ul>
                <li class="css">Css</li>
                <li class="less">Less</li>
                <li class="sass">Sass</li>
            </ul>
        </details>
        <details open="open">
            <summary>行为层</summary>
            <ul>
                <li class="javascript">JavaScript</li>
                <li class="coffeescript">CoffeeScript</li>
                <li class="typescript">TypeScript</li>
            </ul>
        </details>
    </details>
    <details open="open">
        <summary>网站后端</summary>
        <ul>
            <li class="asp">Asp</li>
            <li class="jsp">Jsp</li>
            <li class="php">PHP</li>
            <li class="python">Python</li>
            <li class="golang">Golang</li>
            <li class="node">Node</li>
        </ul>
    </details>
    <details open="open">
        <summary>数据库</summary>
        <details open="open">
            <summary>关系型数据库</summary>
            <ul>
                <li class="oracle">Oracle</li>
                <li class="db2">DB2</li>
                <li class="sqlserver">Microsoft SQL Server</li>
                <li class="access">Microsoft Access</li>
                <li class="mysql">MySQL</li>
                <li class="sqlite">SQLite</li>
            </ul>
        </details>
        <details open="open">
            <summary>非关系型数据库</summary>
            <ul>
                <li class="nosQL">NoSQL</li>
                <li class="cloudant">Cloudant</li>
                <li class="mongodb">MongoDB</li>
                <li class="redis">Redis</li>
                <li class="hbase">HBase</li>
            </ul>
        </details>
    </details>
</aside>
</body>
</html>