收藏
批改状态：未批改
老师批语：
将课堂未演示的常用选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器演示</title>
</head>
<body>
<div>
<p>西门大官人</p>
<p>金莲小妹妹</p>
<p>朱老师</p>
</div>
<div>
<h3>朱老师</h3>
</div>
<div></div>
<ul>
<li>item1</li>
<li class="red">item2</li>
<li>item3</li>
<li class="green">item4</li>
<li>item5</li>
</ul>
<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="10" disabled></textarea></label></p>
<p><button type="submit">提交</button></p>
</form>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
//层级选择器测试
console.log($('div p'));//`ancestor descendant`: 后代选择器, 中间用空格分隔
//基本筛选器
console.log($('div:first'));//选中第一个div中的第一元素
console.log($('div:last'));//选中div中的第最后一个元素
//内容筛选器
console.log($('p:contains(朱老师)'));//获取文本内容为朱老师的p标签
console.log($('div:parent'));//获取含有子元素的div：两个div
//内容选择器
console.log($('p[朱老师]'));
//可见性选择器
console.log($(':visible'));//显示所有可见的元素
//属性选择器
console.log($('li[class="green"]'));//选中ul内class为green的li
//子元素选择器
console.log($('ul :nth-child(2)'));//选中ul中第二个li
//表单选择器
$(':password').css('background-color', '#888');//将password所匹配的元素背景颜色设置成灰色
//控件状态选择器
$(':disabled').attr('disabled', false);//将不被编辑的元素改为可以编辑
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
最终效果：
演示DOM对象与jQuery对象之间的转换方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示DOM对象与jQuery对象之间的转换方式</title>
</head>
<body>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
// 原生JavaScript
//原生JavaScript改列表内一个li的样式方法1
var ul = document.getElementsByTagName('ul').item(0);//获取ul
var li3 = document.getElementsByTagName('li').item(2);//获取列表中的第三个li
li3.style.color = 'red';//给li定义样式
//原生JavaScript改列表内一个li的样式方法2
document.querySelector('ul li:nth-of-type(3)').style.color = 'blue';
//用jQuery的方法
//先将DOM对象转为Jquery对象
//方法1
$('ul li:nth-of-type(3)').css('color', 'red');//重新定义第三个li的样式
//jQuery对象转为DOM对象
var lis = $('li');//获取jQuery对象中的所有li
console.log(lis);//控制台中查看是否获取成功
//lis：实际上是一个类数组对象
console.log(lis[4] instanceof jQuery);//查看最后一个li是否为jQuery对象，正常返回值应该为false
console.log(lis[4] instanceof Object);//查看最后一个li是否为DOM对象，正常返回值应该为true
//方法2：$().get(n);
console.log(lis.get());//获取所有li，为类数组对象
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
控制台的输出：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
