jquery 学习笔记——选择元素

 

         选择DOM元素和创建新的DOM元素

1.    选择被操作的元素

         选择器实验室  chapter2/lab.selectors.html

1.1 CSS选择器

         相同于CSS中的选择方法

         Element  #id  .class  以及组合，如：label.out

         Selector1,selector2,selector3:   或选择器

         [selector1],[selector2],[selector3]： 与选择器

1.2 层次选择器

         利用彼此之间的关系来选择元素，如：

         Ancestor  descendant  ，如 div tr

         Parent>child ， 如tr>td

         Pre +next：匹配前面是临近兄弟节点pre的所有next元素 （紧相邻）

         Pre~siblings: 匹配前面是兄弟节点pre的所有siblings元素 （不紧相邻）

 

1.3 属性选择器

         E[attr]：有attr属性的元素E

         E[attr=value]   严格相等

         E[attr^=value]    开始

         E[attr$=value]

         E[attr*=value]

         E[attr!=value]

1.4 内容选择器

         E:Contains(text)    匹配名称为E，且文本内容包含text 的元素

         E:has(selector)     匹配名称为E，且包含选择器对应的后代节点 的元素

             这两个，contains用于匹配文本  has用于匹配selector

         :empty     不包含子元素或文本的空元素

         :parent       包含子元素或文本的节点，与:empty正好相反

1.5 位置选择器

         :first

         :last

         :eq(n)  :lt(n)  :gt(n)   :even  :odd

 

1.6 可见选择器

         :hidden    :visible   

1.7 表单选择器

         :button    input[type=reset]  input[type=submit]  input[type=button]或button 

         :checkbox   input[type=checkbox]

         :file    input[type=file]

         :header     匹配h1  h2  h3之类的标题元素

         :hidden

         :image

         :input   input  select  textarea  button

         :password

         :radio

         :reset       

         :submit

         :text       input[type=text]

1.8 表单属性选择器

         :checked    匹配checked的radio和checkbox

         :selected   选择已选中的选项元素  <option selected>

         :disabled

         :focus  当前焦点对象

         :enabled

1.9 子元素选择器

         :nth-child(n/even/odd/Xn+Y)   n从1开始,选择子节点

         :first-child  返回第一个子元素

         :last-child

         :only-child 返回没有兄弟节点的所有元素

         例如： li:first-child  先找到所有的li,再找到li的父元素，选择父元素下的第一个元素， 和first相比，first只会选择第一个，而first-child会选择多个。

1.10其他选择器

         :Not(selector)    对选择器执行非运算

         :animated   匹配没有在执行动画效果的元素