(js选择器.docVIP

1. id选择器（指定id元素） 将id=one的元素背景色设置为黑色。（id选择器返单个元素） 将class=cube的元素背景色设为黑色 将p元素的文字大小设置为12px 二、 层次选择器 1. parent child（直系子元素） $(document).ready(function () { // 选取div下的第一代span元素，将字体颜色设为红色 $(div span).css(color, #FF0000); }); 下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。 下面的代码，只有123和789会变色 下面的代码，G2和G4会变色 三、 过滤选择器 1. 基本过滤选择器 ——1.1?:first和:last（取第一个元素或最后一个元素） 下面的代码，G1（first元素）和G3（last元素）会变色 ——1.2?:not（取非元素） 下面的代码，G1会变色 但是，请注意下面的代码： 当G1所在div和G2所在div是父子关系时，G1和G2都会变色。 ——1.3?:even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数） A、C行颜色#EEE（第一行的索引为0），B、D行颜色#DADADA ——1.4?:eq(x)?（取指定索引的元素） 更改第三行的背景色，在上面的代码中C的背景会变色。 ——1.5?:gt(x)和:lt(x)（取大于x索引或小于x索引的元素） L4和L5会是红色，L1和L2会是蓝色，L3是默认颜色 ——1.6?:header（取H1~H6标题元素） 下面的代码，H1~H6的背景色都会变 ——2.1?:contains(text)（取包含text文本的元素） 下面的代码，第一个dd会变色 ——2.2?:empty（取不包含子元素或文本为空的元素） 上面第三个dd会显示没有内容文本 ——2.3?:has(selector)（取选择器匹配的元素） 即使span不是div的直系子元素，也会生效 ——2.4?:parent（取包含子元素或文本的元素） 下面的代码，A和D所在的li会有边框 ——3.1?:hidden（取不可见的元素） jQuery至1.3.2之后的:hidden选择器仅匹配display:none或input type=hidden /的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。 参照：/api/hidden-selector 下面的代码，先弹出hello对话框，然后hid-1会显示，hid-2仍然是不可见的。 ——3.2?:visible（取可见的元素） 下面的代码，最后一个div会有背景色 ——4.1?[attribute]（取拥有attribute属性的元素） 下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线 ——4.2?[attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素） 分别为class=item和class!=item的a标签指定文字颜色