摘要:本文主要讲是Jquery中选择器的使用方法
$('#divOne').css('background', 'red');
2. class选择器(遍历css类元素)
将class=divTwo的元素背景色设为蓝色
$('.divTwo').css('background', 'blue');
$('p').css('color', 'pink');
将ul下的所有元素字体设置成黄色
$('ul *').css('color', 'yellow');5. 并列选择器
将id = spanOne,class = 'pTwo' 的字体设置成蓝色
$('#spanOne,.pTwo').css('color', 'blue');
整个效果如下:
示例代码如下:
<script src=jquery-1.8.1.min.js> </script>
我是段落一
我是段落二
并列二
这是还没改变之前的:
这是改变之后的:
1. parent > child(直系子元素)
$('#divOne > p').css('color', 'blue');
外层段落一
外层段落二
外层段落三
里层段落一
里层段落二
里层段落三
$('#divTwo + ul').css('color', 'red');下面的代码,只有序列2开头的会变色
$('#divThree ~ span').css('color', 'red');
示例结果:
整个示例代码如下:
<script src=jquery-1.8.1.min.js> </script>
外层段落一
外层段落二
外层段落三
里层段落一
里层段落二
里层段落三
改变之前:
改变之后:
1. 基本过滤选择器
——1.1 :first和:last(取第一个元素或最后一个元素)
$('#divOne ul li :first').css('color', 'red'); $('#divOne ul li :last').css('color', 'blue');下面的代码,序列1_1(first元素)和序列1_3(last元素)会变色
$('tr:even').css('background', 'red'); // 偶数行颜色 $('tr:odd').css('background', 'blue'); // 奇数行颜色
Month | Savings | Name |
---|---|---|
January | $100 | LinBingWen |
Feb | $200 | test |
Jna | $2300 | kkk |
Nev | $800 | cdf |
few | $300 | ggg |
Oct | $300 | ccc |
$('tr:eq(2)').css('background', 'yellow');//表格第二行变色
$('#divFour ul li:gt(2)').css('color', 'red'); $('#divFour ul li:lt(2)').css('color', 'blue');
$(':header').css('background', 'pink');
<script src=jquery-1.8.1.min.js></script>
Month | Savings | Name |
---|---|---|
January | $100 | LinBingWen |
Feb | $200 | test |
Jna | $2300 | kkk |
Nev | $800 | cdf |
few | $300 | ggg |
Oct | $300 | ccc |
原始效果:
选择后效果:
$('#divOne span:contains(兄弟1_1)').css('color', 'red');
$('#divTwo span:empty').html('没有内容').css('color', 'red');
$('#divThree:has(h1)').css('border', '1px solid #000'); // 为包含h1元素的div添加边框
$('ol li:parent').css('border', '1px solid #000');
<script src=jquery-1.8.1.min.js></script>
原始内容:
点击后的:
3. 可见性过滤选择器
——3.1 :hidden(取不可见的元素)
jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素,而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素,像visibility:hidden或opactity:0的元素占据了空间,会被排除在外。
——3.2 :visible(取可见的元素)
示例代码如下:
<script src=jquery-1.8.1.min.js></script>
点击后:
将有title元素的span设置背景色为篮色
$('span[title]').css('background','blue');
$('span[title = test3]').css('background','red');
整个代码如下:
<script src=jquery-1.8.1.min.js></script>
原效果:
点击后: