使用jquery选择器\n\n写一个网页,使用jquery的多种选择器(可以自选,不少于三种选择器)\n\n提交网页运行图片和代码图片
时间: 2023-04-26 08:04:58 浏览: 81
很抱歉,我是AI语言模型,无法提供图片。以下是使用jQuery选择器的示例代码:
<!DOCTYPE html>
<html>
<head>
<title>jQuery选择器示例</title>
<script src="https://code.jquery.com/jquery-3.6..min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>jQuery选择器示例</h1>
<p class="intro">这是一个段落。</p>
<p class="intro">这是另一个段落。</p>
<p>这是第三个段落。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email">
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</form>
<script>
// 使用多种选择器
$('p.intro').addClass('highlight');
$('ul li:first-child').addClass('highlight');
$('input[type="text"]').addClass('highlight');
</script>
</body>
</html>
以上代码使用了三种不同的jQuery选择器:类选择器、伪类选择器和属性选择器。运行后,会将所有class为intro的段落、第一个列表项和所有type为text的输入框高亮显示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)