jQuery查漏补缺之选择器

jQuery对象和DOM对象相互转化

1.DOM转换为jQuery对象 $obj = $(domobj)
2.jQuery对象转为DOM对象
var domobj =$obj.get(0);
或者 var domobj = $obj[0];

DOM选择函数
getElementById()
getElementsByTagName()
getElementsByName()
getAttribute()

CSS选择器

浏览器全部支持:

元素选择器     E {}
ID选择器        #id  {}
类选择器        (E) .className {}      (括号表示可选)
群组选择器     E1,E2,E3  {}
后代选择器     E1  E2  E3 {}
通配符            * {}

部分浏览器支持:

伪类选择器    E:PseuoElements  {}
子选择器       E >  F  {}
临近选择器    E + F {}
属性选择器    E [attr] {}
css应用方式

1.行间样式 直接将样式书写在元素的 style 属性中,无法复用,且不符合表现和结构相分离的设计原则
2.内部样式 样式书写在网页的style标签中,其他网页无法复用
3.外部样式 样式内容书写在css文件中,使用style标签导入。

jQuery选择器

1.基本选择器

      $('#id')   id选择器
      $('.className')   类选择器
      $('E')    元素选择器
      $('*')   通配符,匹配所有元素
      $('select1,select2,select3,,selectN')  返回选择结果的集合。

2.层次选择器

      $('E1    E2' )   选取E1元素里面的所有E2元素
      $('E1  >  E2')   选取E1元素直接子元素中的E2元素
      $('E1  +   E2')   选取紧接在E1元素之后的一个E2元素
      $('E1   ~  E2')  选取 E1元素相邻的所有E2元素

3.过滤选择器
过滤选择器分为四种:
3.1基本过滤

       :first 第一个   
       :last 最后一个
       :not(selector)  去除所有与选择器匹配的元素
       :even       选取索引是偶数的所有元素,索引从0开始
       :odd         选取索引是奇数的所有元素,索引从0开始
       :gt(index)   下标从0开始,取索引大于index的元素
       :lt(index)    取索引小于index的元素
       :eq(index)    取索引等于index的元素
       :header   选区所有的标题,h1,h2,h3等
       :animated      取当前真在执行动画的元素
       :focus             取当前获取焦点的元素

3.2内容过滤

        :contains(text)  选取含有文本内容"text"的元素
        :empty          选取不包含资源元素或者文本的空元素
        :has(selector)   选取含有选择器所匹配元素的元素
        :parent         选取含有子元素或者文本的元素

3.3可见性选择器

        :hidden   选取所有不可见的元素
        :visible    选取所有可见的元素

3.4属性过滤选择器

         [attribute]         选取含有此属性的元素
         [attr =value]     选取属性值等于value的元素
         [attr !=value]     选取属性值不等于value的元素
         [attr ^=value]    选取属性值以value开头的元素
         [attr $=value]    选取属性值以value结尾的元素
         [attr |=value]    选取属性值等于value或者以value为前缀(后接-连接符)的元素
         [attr *=value]      选取属性值包含value的元素
         [attr  ~=value]    选取属性用空格分隔的值包含value的元素
         [attr1][attr2]...[attrN]   合并的复合选择器

3.5子元素选择器 索引值从1开始

         :nth-child(even)    索引值为基数的子元素
         :nth-child(odd)      索引值为偶数的子元素
         :nth-child(2)           索引值为2的子元素
         :nth-child(3n)         索引值为3的倍数的子元素

3.6表单对象过滤选择器

         :enabled      选取所有可用元素
         :disabled     选取所有不可用元素
         :checked     选取所有被选中的元素(单选框,复选框)
         :selected     选取所有被选中的元素(下拉列表)

4.表单选择器

        :input      获取所有的input 、textarea 、select、button 元素
        :text        选取所有的单行文本框
        :password       选取所有的密码框
        :radio               选取所有的单选框
        :checkbox         选取所有的多选框
        :submit            选取所有的提交按钮
        :image            选取所有的图片按钮
        :reset             选取所有的重置按钮
        :button            选取所有的按钮
        :file                 选取所有的文件上传域
        :hidden           选取所有的不可见元素

你可能感兴趣的:(jQuery查漏补缺之选择器)