首先要说的是,浏览器显示的是DOM节点树而非文档,所以才可以通过对DOM的操作来改变结构、行为、样式等东西。
其次,要进行以上的行为首先要选择好要素吧,但是原生的方法名字很长,时间一长就让人就得很繁琐,效率低下;所以捡各便宜,使用jQuery可以轻松做好这件事。
jQuery中的选择器很多都与css中是一致的,绝大部分可以直接用,毫无问题。下面就总结一下,以下内容总结于《锋利的JQuery》。
主要是4类:基本选择器、层次选择器、过滤选择器、表单选择器
1、基本选择器。需要实现基本的选择。*(通配各元素)、ID选择器、类选择器、普通的元素选择、以及它们的组合。
2、层次选择器。有时后我们要有层次、位置的需求,这时候可使用层次选择器。很简单a b,(a含的所有b,不只是子元素);a > b(a的直接子元素);a + b(a直接相邻的兄弟元素);a ~ b(a 同辈的后面的b,不含a);
3、过滤选择器。有时后需要对得到的进一步筛选缩小范围。
a.基本过滤。:first :last :not() :eq() :odd :even :lt() :gt() :header :focus :animated ,这些事基于得到的元素集合的基础上,可以当做元素们在数 组 中,那这是当然索引从0开始了。例如::odd表示的是在数组中的奇数,实际上可能是物理上的偶数。比如在数组中索引为0,则实际是第一个元素。
b.内容过滤: :contains()依据包含的文本 ,:has()依据是否有某个元素 ,:parent有文本或子元素,:empty没有文本或是子元素。来筛选。
c.属性过滤。规则与css中属性选择器同,不再说明。
d、子元素过滤;:nth-child() \ :first-child\:last-child\:only-child. 依据的是实际物理上的,元素在父元素中的情况决定。例如div h2:first-child,选择div中的第一 h2,若是有多个div下有h2,则会选择多个h2.
e、可见性过滤。:hidden,:visible. :hidden会选中<input type="hidden" />,属性opacity:hidden,display:none;三种情况。
f、表单过滤。:enabled\disabled\selected\checked.
4、表单选择器。:input :text :password :radio :submit :image :reset :file :hidden。
使用中,特别是过滤选择器,注意一般是不加空格的,加空格表示的是后代,从而可能有区别的。
当然可以使用插件或是其他函数来快速提供的选择器来快速选择对应的元素,现在大多数浏览器也支持querySelectorAll().