使用jquery选择器\n\n写一个网页,使用jquery的多种选择器(可以自选,不少于三种选择器)
时间: 2023-04-28 11:01:59 浏览: 257
巧用jQuery选择器提高写表单效率的方法
好的,以下是一个使用jQuery选择器的网页示例:
<!DOCTYPE html>
<html>
<head>
<title>使用jQuery选择器</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>使用jQuery选择器</h1>
<p>这是一个使用jQuery选择器的网页示例。</p>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>草莓</li>
<li>葡萄</li>
</ul>
<p>请选择您喜欢的水果:</p>
<select id="fruit-select">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
<option value="strawberry">草莓</option>
<option value="grape">葡萄</option>
</select>
<p id="result"></p>
<script>
// 使用id选择器
$('#result').text('您选择的水果是:' + $('#fruit-select option:selected').text());
// 使用class选择器
$('li').click(function() {
alert('您选择了' + $(this).text());
});
// 使用属性选择器
$('li[data-type="red"]').css('color', 'red');
</script>
</body>
</html>
这个网页使用了三种不同的jQuery选择器:id选择器、class选择器和属性选择器。其中,id选择器用于获取下拉框中选中的选项,并将结果显示在页面上;class选择器用于给水果列表中的每个水果添加点击事件,点击后弹出提示框;属性选择器用于给列表中的某些水果添加特殊样式(这里是红色字体)。
阅读全文