收藏
批改状态：未批改
老师批语：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery选择器</title>
</head>
<body>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery选择器</title>
</head>
<body>
<!-- 选择器的种类：
1.基本选择器：元素 ，类，ID，通配符*；
2.层级选择器；类似css选择器，其中大于是gt，小于是lt，其他even为偶数选择器，odd为奇数选择器
3.内容选择器；$()选定的当前标签+：containes"包含内容"，其他有empty为空选择器，has包含选择器，parnent选择器：所有包含于该标签的内容，not选择器
4.表单form选择器：选择当前所有控件，如果选择当前标签为input前面加input：，也可根据文件类型来选择，
5.其他常用选择器：.get（）数字，.eq（），.first（），.last（），.find（）,.toArray（）返回数组需要添加函数.children所有子元素，.each（）需要添加函数，.next（）.prev（），.prevAll（），.add()添加元素，.filter（）从结果中仅返回符合条件，.not（）与filter相反，.slice（）起止序号，不包括最后一个， -->
<h2>Jquery选择器</h2>
<div>
<ul>
<li>选择方式一：标签选择器</li>
<li>选择方式二：层级选择器</li>
<li>选择方式三：内容选择器</li>
<li>选择方式四：表单选择器</li>
<li>选择方式五：.get()选择器</li>
<li>选择方式六：.find()选择器</li>
</ul>
<p>这是一个注册表单</p>
<form action="" method="">
<fieldset>
<legend>
用户注册
</legend>
<p>用户名：<input type="text" name="name" required=""> </p>
<p>邮箱：<input type="email" name="email" required=""> </p>
<p>密码：<input type="text" name="pws" required=""> </p>
<p>确定密码：<input type="text" name="pws" required=""> </p>
<p>
性别：<input type="radio" name="xingbie" value="nan" checked="">男
<input type="radio" name="xingbie" value="nv" checked="">女
</p>
<p><input type="file" name=""></p>
</fieldset>
</form>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 元素选择器
$('li').css('background-color','green')
.css('list-style','none')
// 层级选择器
$('li:nth-child(2)+li').css('color','white')
// 内容选择器
$('ul:contains("选择器")').css('color','red')
// 表单选择器
$('input').css('background-color','blue')
$('input:file').css('color','brown')
// .find()选择器 .get（）选择器
$('li').get(3).style.color="black"
$('ul').find('li').css('color','blue')
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
