![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
1、常用选择器演示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器简介</title>
</head>
<body>
<!--内容选择器-->
<div>
<p>内容选择器1</p>
</div>
<div>
<h3>内容选择器2</h3>
</div>
<div></div>
<!--子元素选择器-->
<ul>
<li>子元素选择器1</li>
<li class="red">子元素选择器2</li>
<li>子元素选择器3</li>
<li class="green">子元素选择器4</li>
<li>子元素选择器5</li>
</ul>
<!--层级选择器-->
<ul>
<li>层级选择器1</li>
<li class="gray">层级选择器2</li>
<li class="pink">层级选择器3</li>
</ul>
<!--基本筛选器-->
<div>
<h4 class="jb_sxq">基本筛选器1</h4>
<h4 class="jb_sxq">基本筛选器2</h4>
<h4 class="jb_sxq">基本筛选器3</h4>
</div>
<!--可见性选择器-->
<div id = kjx>
<input id="n5" type="hidden" value="可见性选择器1">
<p><label>可见性选择器2<input></label></p>
<span id="n6" style="visibility: hidden;">可见性选择器3</span>
</div>
<!--表单选择器-->
<form action="" onsubmit="return false">
<p><label>帐号:<input type="text"></label></p>
<p><label>密码:<input type="password" disabled></label></p>
<p><label>记住<input type="checkbox" checked></label></p>
<p>
<label>语言:
<select name="lang">
<option value="cn">中文</option>
<option value="en" selected>英文</option>
<option value="jp">甲骨文</option>
</select>
</label>
</p>
<p><label>备注:<textarea name="" cols="30" rows="5"></textarea></label></p>
<p><button type="submit">提交</button></p>
</form>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
// has(selector): 选中包含有<h3>元素的<div>
$('div:has(h3)').css('color', 'red');
$('div:has(p)').css('background-color','blue');
// parent: 返回以指定元素为父元素的元素
var res = $('div:parent');
console.log(res); // 只返回前二个<div>
// 返回以<div>为父元素的元素, 显然第三个<div>不满足条件
// nth-child(n): 返回上下文中指定索引的子元素(从1开始)
$('ul :nth-child(2)').css('color', 'red');
$('ul .red:nth-child(2)').css('color', 'blue');
// nth-of-type(): 返回指定索引,且限定类型的元素
// 如果前面没有添加类型限制,则与nth-child()功能相同
$('ul :nth-of-type(3)').css('color', 'green');
$('ul .red:nth-of-type(3)').css('color', 'green'); // 类型不符,无效
$('ul .green:nth-of-type(4)').css('color', 'yellow'); // 索引类型全对,有效
// 设置所有input控制背景色
$(':input').css('background-color', 'pink');
// 测试复选框背景色
var bgColor = $('input[type="checkbox"]').css('background-color');
console.log(bgColor);// rgb(255, 192, 203), 检查器也可以查看
// 取消当前用户的选择
$('input:checked').attr('checked', false);
// 将禁用元素的背景换色, 这里限定了元素类型,所有密码框未变化
$('textarea:disabled').css('background-color', 'lightgreen');
// 如果取消元素类型限制,则密码框也会变化
$(':disabled').css('background-color', 'lightgreen');
// 层级选择器
$('.red + li').css('background-color','gray');
$('.green ~ li').css('background-color','pink');
// 基本筛选器
$('ul li:first').css('color','yellow');
$('div h4:first').css('background-color','pink');
$('div h4:odd').css('font-size','19px');
$('div :eq(0)').css('font-size','22px');
$('div :header').css('color','purple');
// 可见性选择器
$('div').css('background-color','white');
$('#kjx :visible').css('background-color','teal');
$('#kjx :hidden').css('background-color','white');
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、演示DOM对象与jQuery对象之间的转换方式
①、DOM对象转jQuery对象
普通的Dom对象一般可以通过$()转换成jQuery对象。
如：$(document.getElementById("id"))
返回的就是jQuery对象，可以使用jQuery的方法。
②、jQuery对象转DOM对象
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项，一般可通过索引取出。
如： $("#id")[0]，$("div").eq(1)[0]，$("div").get()[1]
这些都是Dom对象，可以使用Dom中的方法，但不能再使用jQuery的方法。