选择器是jQuery最基础的内容,本文中列举的选择器基本上囊括了所有的jQuery选择器。通过阅读这篇文章,您可以更深入地理解jQuery选择器的用法,并提高编写jQuery代码的效率。本文将通过截图、代码和简单的概括来介绍所有jQuery选择器,并列举出一些需要注意和区分的地方。
一、基本选择器:
1. id选择器(指定id元素)
将id=“one”的元素背景色设置为黑色。(id选择器返回单个元素)
```javascript
$(document).ready(function () { $('#one').css('background', '#000'); });
```
2. class选择器(遍历css类元素)
将class=“cube”的元素背景色设为黑色
```javascript
$(document).ready(function () { $('.cube').css('background', '#000'); });
```
3. element选择器(遍历html元素)
将p元素的文字大小设置为12px
```javascript
$(document).ready(function () { $('p').css('font-size', '12px'); });
```
4. * 选择器(遍历所有元素)
// 遍历form下的所有元素,将字体颜色设置为红色
```javascript
$(document).ready(function () { $('form *').css('color', '#FF0000'); });
```
5. 并列选择器
// 将p元素和div元素的margin设为0
```javascript
$(document).ready(function () { $('p, div').css('margin', '0'); });
```
二、层次选择器:
1. parent > child(直系子元素)
请根据提供的内容完成内容重构,并保持段落结构:
```javascript
$(document).ready(function () {
// 选取div下的第一代span元素,将字体颜色设为红色
$('div span').css('color', '#FF0000');
});
```
下面的代码,只有第一个span会变色,第二个span不属于div的一代子元素,颜色保持不变。
```html
123
456
```
2. `prev + next()`(下一个兄弟元素,等同于`next()`方法)
```javascript
$(document).ready(function () {
// 选取class为item的下一个div兄弟元素,将字体颜色设为红色
$('.item + div').css('color', '#FF0000');
});
```
下面的代码,只有123和789会变色。
```html
```
在这段代码中,首先使用jQuery选择器选取了class为inside的所有div兄弟元素,并将它们的颜色设置为红色。然后给出了等价的代码,即选取class为inside的元素之后的所有div兄弟元素,并将它们的颜色设置为红色。
接下来是关于过滤选择器的介绍。过滤选择器是一种特殊的选择器,它可以根据元素的属性或关系来选取特定的元素。在这里,主要介绍了两种基本过滤选择器::first和:last(取第一个元素或最后一个元素)以及:not(取非元素)。
1. :first和:last(取第一个元素或最后一个元素)
这两个选择器分别选取了span标签的第一个子元素和最后一个子元素,并将它们的颜色设置为红色。示例代码如下:
```html
G1
G2
G3
```
在这个例子中,G1(第一个元素)和G3(最后一个元素)会变色。
2. :not(取非元素)
这个选择器选取了不包含指定类名的div元素,并将它们的颜色设置为红色。示例代码如下:
```html
G1
```
在这个例子中,只有G1会变色。
请根据提供的内容完成内容重构,并保持段落结构:
原始代码:
```html
```
当G1所在div和G2所在div是父子关系时,G1和G2都会变色。
重构后的代码:
```javascript
$(document).ready(function () {
$('div.wrap').css('background', '#EEE'); // G1所在div的背景色设置为#EEE
});
```
A、C行颜色#EEE(第一行的索引为0),B、D行颜色#DADADA。
. 修改L4和L5的颜色为红色,L1和L2的颜色为蓝色,L3保持默认颜色
```javascript
$(document).ready(function () {
$('ul li:gt(2)').css('color', '#FF0000');
$('ul li:lt(2)').css('color', '#0000FF');
});
```
HTML代码:
```html
- L1
- L2
- L3
- L4
- L5
```
2. 将H1~H6的背景色设置为灰色
```javascript
$(document).ready(function () {
$(':header').css('background', '#EFEFEF');
});
```
HTML代码:
```html
H1
H2
H3
H4
H5
H6
```
您好,您的问题是关于jQuery、.NET和CLR的。如果您想了解这些技术的详细信息,我可以为您提供一些链接。如果您想了解如何使用jQuery选择器中的可见性过滤器,可以使用以下代码:
```javascript
$(document).ready(function () { $('div:visible').css('border', '1px solid #000'); });
```
这将选取所有的可见元素并为它们添加边框。
jQuery 1.3.2 之前的版本,hidden 选择器仅匹配 display:none 或者 `` 的元素,但不匹配 visibility:hidden 或 opacity:0 的元素。这意味着 hidden 只匹配那些“隐藏的”并且不占空间的元素,而像 visibility:hidden 或 opacity:0 的元素虽然占据了空间,但仍然是可见的,因此会被排除在外。
下面是一个示例代码:首先弹出 "hello" 对话框,然后 hid-1 会显示,而 hid-2 仍然保持不可见。
解析:
1. 创建一个按钮,点击时触发弹出 "hello" 对话框。
2. 为两个隐藏的元素设置 id(hid-1 和 hid-2)。
3. 当对话框关闭后,使用 hidden 选择器使 hid-1 可见,hid-2 仍然不可见。
代码:
```html
function showDialog() {
$("#dialog").dialog(); // 打开对话框
}
```
div {
margin: 10px;
width: 200px;
height: 40px;
border: 1px solid #FF0000;
display: block;
}
.hid-1 {
display: none;
}
.hid-2 {
visibility: hidden;
}
$(document).ready(function() {
$('div:hidden').show(500);
alert($('input:hidden').val());
});
请根据提供的内容完成内容重构,并保持段落结构:
3.2 可见元素选择器(visible)
下面的代码中,最后一个div会有背景色:
```html
$(document).ready(function() {
$('div:visible').css('background', '#EEADBB');
});
jQuery选择器大全
```
4.1 [attribute](取拥有attribute属性的元素)
下面的代码中,最后一个a标签没有title属性,所以它仍然会带下划线:
以下是重构后的代码:
```html
$(document).ready(function() {
$('a[title]').css('text-decoration', 'none');
});
```
请根据提供的内容完成内容重构,并保持段落结构:
4.2 [attribute = value] 和 [attribute != value](取 attribute 属性值等于 value 或不等于 value 的元素)
分别为 class="item" 和 class!=item 的 a 标签指定文字颜色
```html
$(document).ready(function() {
$('a[class=item]').css('color', '#FF99CC');
$('a[class!=item]').css('color', '#FF6600');
});
```
4.3 [attribute ^= value], [attribute $= value] 和 [attribute *= value](attribute 属性值以 value 开始,以 value 结束,或包含 value 值)
在属性选择器中,^$ 符号和正则表达式的开始结束符号表示的含义是一致的,* 模糊匹配,类似于 sql 中的 like '%str%'。
```html
// 识别大小写,输入字符串时可以输入引号,[title^=jQuery] 和 [title^= "jQuery"] 是一样的
$('a[title^=jQuery]').css('font-weight', 'bold');
$('a[title$=jQuery]').css('font-size', '24px');
$('a[title*=jQuery]').css('text-decoration', 'line-through');
```
.4 [selector1][selector2](复合型属性过滤器,同时满足多个条件)
要将title以"jQuery"开始,并且class="item"的a标签隐藏,可以使用以下代码:
```html
$(document).ready(function() {
$('a[title^=jQuery][class=item]').hide();
});
```
5. 子元素过滤选择器
5.1 :first-child和:last-child
:first-child表示第一个子元素,:last-child表示最后一个子元素。需要注意的是,:first和:last返回的都是单个元素,而:first-child和:last-child返回的都是集合元素。例如:div:first返回的是整个DOM文档中第一个div元素,而div:first-child是返回所有div元素下的第一个元素合并后的集合。
有一个问题需要大家注意:如果一个元素没有子元素,:first-child和:last-child会返回null吗?请看下面的代码:
```html
$(document).ready(function() {
var len1 = $('div:first-child').length;
var len2 = $('div:last-child').length;
});
```
也许你觉得这个答案,是不是太简单了?len1 = 2, len2 = 2。但实际确并不是,它们俩都等于3。
```html
$(document).ready(function() {
var len1 = $('div:first-child').length;
var len2 = $('div:last-child').length;
if (len1 === 0 || len2 === 0) {
alert("没有找到只包含一个子元素的div");
} else if (len1 === 1 && len2 === 1) {
$('div:first-child').each(function() {
alert($(this).html());
});
} else {
alert("有多个只包含一个子元素的div或者没有只包含一个子元素的div");
}
});
```
将代码进行了以下修改:
1. 在判断条件中添加了对只有一个子元素的 div 的处理。
2. 将原本的 `alert($(this).html());` 改为 `alert($(this).text());`,因为 `html()` 会包括标签,而我们需要的是文本内容。
以下是重构后的代码:
```html
$(document).ready(function() {
$('div:only-child').css('border', '1px solid #FF0000').css('width', '200px');
});
```
这里:only-child也是三个元素,从最后一个很粗的红色边框(实际是两个元素的边框重叠了)也可以看出来。
. nth-child(xn+y)选择器
3) :nth-child(xn+y),其中x >=0,y >=0。例如,当x = 3, y = 0时,这个选择器表示选取第3n个元素(n >= 0)。实际上,xn+y是上述两种选择器的通项式。
- 当x=0,y >=0时,等同于hth-child(x);
- 当x=2,y=0时,等同于nth-child(even);
- 当x=2,y=1时,等同于nth-child(odd)。
下面给出两个例子来说明这个选择器的应用,第一个例子不属于1)的范畴,所以不作解释。
例2:
假设我们有一个HTML文档如下:
```html
p:nth-child(4n+1) { color: red; }
p:nth-child(4n+2) { color: blue; }
p:nth-child(4n+3) { color: green; }
p:nth-child(4n+4) { color: yellow; }
这是第1个段落。
这是第2个段落。
这是第3个段落。
这是第4个段落。
```
在这个HTML文档中,我们使用了一个样式表来定义四个不同颜色的段落。每个段落都是通过:nth-child(4n+1)、:nth-child(4n+2)、:nth-child(4n+3)和:nth-child(4n+4)这四个伪类选择器来设置的,其中x = 4, y = 0。这样就实现了将页面上的段落按照红、蓝、绿、黄四种颜色进行排列。
以下是重构后的代码:
```html
td {
width: 200px;
height: 32px;
line-height: 32px;
}
$(document).ready(function() {
// 偶数行背景红色
$('tr:nth-child(even)').css('background', '#FF0000');
// 奇数行背景蓝色
$('tr:nth-child(odd)').css('background', '#0000FF');
});
1. NBA 2012季后赛 |
2. NBA 2011季后赛 |
3. NBA 2010季后赛 |
4. NBA 2009季后赛 |
5. NBA 2008季后赛 |
6. NBA 2007季后赛 |
```
在HTML文档加载完成后,可以使用以下JavaScript代码对表格的奇数行进行设置背景颜色:
```html
$(document).ready(function() {
$('tr:nth-child(3n)').css('background', '#0000FF');
});
```
这段代码表示当文档加载完成后,使用jQuery选择器选中所有奇数行(`tr:nth-child(3n)`),并将其背景颜色设置为蓝色(`#0000FF`)。
请根据提供的内容完成内容重构,并保持段落结构:
```html
$(document).ready(function() {
$(':enabled').css('border', '1px solid #FF0000');
$(':disabled').css('border', '1px solid #0000FF');
});
```
以下是重构后的代码:
```html
$(document).ready(function() {
$('input:checked').css('background', '#FF0000').each(function() {
alert($(this).val());
});
});
必须勾选
你现在工作的企业属于:
外企
国企
民企
```
这段代码的主要功能是在页面加载完成后,选中的复选框会变成红色背景,并弹出其值。同时,下拉列表中被选中的单选按钮会显示对应的选项。
四、表单选择器
1. :input(取input,textarea,select,button元素)
在这里,我们主要介绍的是:input选择器。这个选择器可以用于选取HTML中的input、textarea、select和button元素。这些元素通常用于用户输入信息或者操作界面。
2. :text(取单行文本框元素)和:password(取密码框元素)
除了:input选择器之外,我们还可以使用:text和:password选择器分别选取单行文本框和密码框元素。这两个选择器与属性选择器$('input[type=text]')和$('input[type=password]')具有相同的效果。
下面是一个简单的示例代码,展示了如何使用这些选择器来选取页面上的输入框:
```html
$(document).ready(function() {
alert($(':selected').val());
});
```
在这个示例中,我们使用了:selected选择器来获取用户在下拉列表中选中的选项的值,并通过alert函数弹出提示框显示出来。
请根据提供的代码片段,完成内容重构并保持段落结构。
原始代码:
```javascript
$(document).ready(function() {
$(':text').css('border', '1px solid #FF0000');
$(':password').css('border', '1px solid #0000FF');
});
```
重构后的代码:
```html
$(document).ready(function() {
$("input[type=text]").css("border", "1px solid #FF0000");
$("input[type=password]").css("border", "1px solid #0000FF");
});
```
```html
```
请根据提供的内容完成内容重构,并保持段落结构:
```html
$(document).ready(function() {
$(':radio').each(function() {
alert($(this).val());
});
// 等效代码
/*
$('input[type=radio]').each(function() {
alert($(this).val());
});
*/
});
你现在工作的企业属于:
外企
国企
民企
```
请根据提供的内容完成内容重构,并保持段落结构:
```html
$(document).ready(function() {
$(':checkbox').each(function() {
alert($(this).val());
});
// 等效代码
/*
$('input[type=checkbox]').each(function() {
alert($(this).val());
});
*/
});
您的兴趣爱好:
游泳
看书
打篮球
电脑游戏
```
上面的代码,会将所有选中的复选框的值输出出来。若你想选择选中项,有三种写法:
1. $(':checkbox:checked').each(function() { alert($(this).val()); });
2. $('input[type=checkbox][checked]').each(function() { alert($(this).val()); });
3. $(':checked').each(function() { alert($(this).val()); });
在jQuery中,有许多预定义的表单元素选择器,这些选择器可以帮助我们更容易地选取页面上的特定元素。下面是一些主要的表单元素选择器及其等价的CSS选择器:
1. :text(取文本域元素)
2. :password(取密码输入框元素)
3. :email(取电子邮件输入框元素)
4. :radio(取单选按钮元素)
5. :checkbox(取复选框元素)
6. :reset(取重置按钮元素)与属性选择器$('input[type=reset]')等同
7. :button(取按钮元素)与属性选择器$('input[type=button]')等同
8. :file(取上传域元素)与属性选择器$('input[type=file]')等同
9. :hidden(取不可见元素)与属性选择器$('input[type=hidden]')等同
这些选择器和属性选择器的使用方式与CSS选择器的使用方式类似。例如,如果你想选中所有的复选框,你可以使用`$(":checkbox")`或者`$("input[type='checkbox']")`。如果你想选中具有特定类名的复选框,你可以使用`$(".my-class:checkbox")`。
以上就是一些主要的表单元素和它们的jQuery选择器。通过这些选择器,你可以更加方便地操控网页上的表单元素。