![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：这与原生的document.querySelectorAll()对应
Collection
Collection
<body><input type="text" id="user" value="admin"><input type="text" class="phone" value="13912312345"><p id="paragraph">段落</p><script type="text/javascript">//id选择器 $('#ID')var user = $('#user').val();//类选择器，$('.class')，class若有多个，取第一个var phone = $('.phone').val();//元素选择器 $('element')var paragraph = $('p').text();console.log( user );console.log( phone );console.log( paragraph );</script></body>
<body><div class="mydiv" style="background-color: #000;" id="div_black">黑色</div><div class="mydiv" style="background-color: #ff0000;" id="div_red">红色</div><p id="1">我是p标签</p><div class="mydiv" style="background-color: #00ff00;" id="div_green"><p id="a">div中的p标签</p><div><p id="b">div中div中的p标签</p><p id="c">P3</p></div><p id="d">div中的p标签</p></div><p id="2">我是p标签</p><p id="3">我是p标签</p><script type="text/javascript">// 与$('div p')效果一样，但可读性高var divp1 = $('#div_green p'); // 后代 (子孙代)console.log( divp1 );var divp2 = $('#div_green > p'); // 子代console.log( divp2 );var divp3 = $('#div_green ~ p'); // 后面所有兄弟元素，console.log( divp3 );var divp4 = $('#div_green + p'); // 后面第一个兄弟元素console.log( divp4 );</script></body>
天蓬老师