最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery选择器大全详解[常用学习]
时间:2013-06-27 编辑:简简单单 来源:一聚教程网
择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍,也列举出了一些需要注意和区分的地方。
一、基本选择器
1. id选择器(指定id元素)
将id="one"的元素背景色设置为黑色。(id选择器返单个元素)
代码如下 | 复制代码 |
$(document).ready(function () { $('#one').css('background', '#000'); }); |
2. class选择器(遍历css类元素)
将class="cube"的元素背景色设为黑色
代码如下 | 复制代码 |
$(document).ready(function () { $('.cube').css('background', '#000'); }); |
3. element选择器(遍历html元素)
将p元素的文字大小设置为12px
代码如下 | 复制代码 |
$(document).ready(function () { $('p').css('font-size', '12px'); }); |
4. * 选择器(遍历所有元素)
代码如下 | 复制代码 |
$(document).ready(function () { // 遍历form下的所有元素,将字体颜色设置为红色 $('form *').css('color', '#FF0000'); }); |
5. 并列选择器
代码如下 | 复制代码 |
$(document).ready(function () { // 将p元素和div元素的margin设为0 $('p, div').css('margin', '0'); }); |
--------------------------------------------------------------------------------
1. parent > child(直系子元素)
代码如下 | 复制代码 |
$(document).ready(function () { 123
|
2. prev + next(下一个兄弟元素,等同于next()方法)
代码如下 | 复制代码 |
$(document).ready(function () { 123 456 789 3. prev ~ siblings(prev元素的所有兄弟元素,等同于nextAll()方法)$(document).ready(function () { // 选取class为inside之后的所有div兄弟元素 $('.inside ~ div').css('color', '#FF0000'); // 等价代码 //$('.inside').nextAll('div').css('color', '#FF0000');});下面的代码,G2和G4会变色 G1 G2 G3 G4
|
--------------------------------------------------------------------------------
三、 过滤选择器
1. 基本过滤选择器
——1.1 :first和:last(取第一个元素或最后一个元素)
代码如下 | 复制代码 |
$(document).ready(function () { G1 $(document).ready(function () { G1 G2 但是,请注意下面的代码:
G1 G2 |
当G1所在div和G2所在div是父子关系时,G1和G2都会变色。
——1.3 :even和:odd(取偶数索引或奇数索引元素,索引从0开始,even表示偶数,odd表示奇数)
代码如下 | 复制代码 | ||||
$(document).ready(function () {
$(document).ready(function () { ——1.5 :gt(x)和:lt(x)(取大于x索引或小于x索引的元素) $(document).ready(function () {
$(document).ready(function () {
H1H2H3H4H5H6 |
2. 内容过滤选择器
——2.1 :contains(text)(取包含text文本的元素)
代码如下 | 复制代码 |
$(document).ready(function () {
$(document).ready(function () { |
——2.3 :has(selector)(取选择器匹配的元素)
代码如下 | 复制代码 |
$(document).ready(function () {
|
3. 可见性过滤选择器
——3.1 :hidden(取不可见的元素)
jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素,而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素,像visibility:hidden或 opactity:0的元素占据了空间,会被排除在外。
参照:http://www.jquerysdk.com/api/hidden-selector
下面的代码,先弹出"hello"对话框,然后hid-1会显示,hid-2仍然是不可见的。
代码如下 | 复制代码 |
display: none visibility: hidden —— |
3.2 :visible(取可见的元素)
下面的代码,最后一个div会有背景色
代码如下 | 复制代码 |
display: none visibility: hidden |
jQuery选择器大全
——4.1 [attribute](取拥有attribute属性的元素)
下面的代码,最后一个a标签没有title属性,所以它仍然会带下划线
代码如下 | 复制代码 |
|
相关文章
- jQuery基本选择器和层次选择器学习使用 05-06
- 基于jQuery UI的颜色选择器ColorPicker使用手册 12-17
- jquery 选择器使用方法详解 10-11
- jquery层次选择器使用说明 09-24
- jquery选择器用法详细介绍 02-22
- jQuery四大选择器之入门篇 11-09