jquery里面odd使用示例
时间: 2023-06-28 16:04:46 浏览: 42
在 jQuery 中,odd() 方法用于选择表格中奇数行的元素。它可以与其他选择器一起使用,例如与class选择器结合使用。以下是一个简单的示例:
HTML代码:
```
<table>
<tr><td>1</td></tr>
<tr><td class="odd">2</td></tr>
<tr><td>3</td></tr>
<tr><td class="odd">4</td></tr>
<tr><td>5</td></tr>
</table>
```
jQuery代码:
```
$(document).ready(function(){
$("tr:odd").css("background-color", "gray");
$(".odd").css("color", "red");
});
```
在上面的代码中,我们使用 odd() 方法选择了表格中的奇数行,并将其背景颜色设置为灰色。同时,我们也使用了 class 选择器选择了具有 odd 类的元素,并将其文字颜色设置为红色。
相关问题
jquery 选择器
jQuery选择器是一种用于选择HTML元素的语法。它可以根据元素的ID、类、类型、属性、属性值等进行选择。以下是一些常见的jQuery选择器:
1. 根据元素类型选择:$("p") 选取所有 <p> 元素。
2. 根据元素ID选择:$("#id") 选取 ID 为 "id" 的元素。
3. 根据元素类选择:$(".class") 选取所有 class 为 "class" 的元素。
4. 根据元素属性选择:$("[attribute]") 选取带有 attribute 属性的元素。
5. 根据元素属性值选择:$("[attribute=value]") 选取 attribute 属性值为 "value" 的元素。
6. 根据元素属性值选择(部分匹配):$("[attribute*=value]") 选取 attribute 属性值包含 "value" 的元素。
7. 根据元素属性值选择(以某个值开头):$("[attribute^=value]") 选取 attribute 属性值以 "value" 开头的元素。
8. 根据元素属性值选择(以某个值结尾):$("[attribute$=value]") 选取 attribute 属性值以 "value" 结尾的元素。
9. 根据元素属性值选择(以某个值开头且包含某个值):$("[attribute|=value]") 选取 attribute 属性值以 "value" 开头且包含 "value" 的元素。
10. 根据元素的位置选择:$("selector:first") 选取第一个匹配的元素,$("selector:last") 选取最后一个匹配的元素,$("selector:even") 选取偶数位置的元素,$("selector:odd") 选取奇数位置的元素,$("selector:eq(index)") 选取索引为 index 的元素,$("selector:gt(index)") 选取索引大于 index 的元素,$("selector:lt(index)") 选取索引小于 index 的元素。
11. 根据元素的关系选择:$("parent > child") 选取 parent 元素的直接子元素 child,$("prev + next") 选取 prev 元素后面的第一个同辈元素 next,$("prev ~ siblings") 选取 prev 元素后面的所有同辈元素 siblings。
以下是一个例子:
```javascript
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraphs</button>
</body>
</html>
```
当用户点击按钮时,所有的段落元素都会被隐藏起来。
jQuery选择器页面
以下是一些jQuery选择器及其用法:
1. 元素选择器:选择特定的HTML元素,例如div、p、a等。示例:$("div")、$("p")、$("a")
2. ID选择器:选择具有特定ID的HTML元素。示例:$("#myid")
3. 类选择器:选择具有特定类的HTML元素。示例:$(".myclass")
4. 属性选择器:选择具有特定属性的HTML元素。示例:$("[type='text']")
5. 子元素选择器:选择某个元素的直接子元素。示例:$("ul > li")
6. 后代元素选择器:选择某个元素的后代元素。示例:$("ul li")
7. 兄弟元素选择器:选择某个元素的相邻兄弟元素。示例:$("h1 + p")
8. 过滤器选择器:根据指定条件筛选元素。示例:$("li:first")、$("li:last")、$("li:even")、$("li:odd")、$("li:eq(2)")、$("li:gt(2)")、$("li:lt(2)")
以上只是jQuery选择器的一部分,更多的选择器及其用法可以在jQuery官方文档中找到。