jQuery选择器

< html >

     < head >

         < script  language = 'javascript'  type = 'text/javascript' src = 'jquery-1.11.1.js' > </ script >

     </ head >

     < body >

         < p >p1 </ p >

         < p >p2 </ p >

         < p >p3 </ p >

         < table >

              < tbody >

              < tr >

                   < td >h1h1 </ td >

                   < td >h1h1 </ td >

                   < td >h1h1 </ td >

                   < td >h1h1 </ td >

                   < td >h1h1 </ td >

              </ tr >

              </ tbody >

         </ table >

         < div  id  =  'default' >hello </ div >

         < div  id  =  'testCss' >hello </ div >

         < div  class  =  'testCss' >hello </ div >

         < div  class  =  'testCss' >world </ div >

         < div  id = 's' >

              < h1 >

                   < label >111 </ label >

              </ h1 >

              < label >1 </ label >

              < label >1 </ label >

         </ div >

        

         < script >

         /*基本选择器*/

              $ ( "p" ) . html ( ) ;

              $ ( "p" ) . val ( ) ;

              $ ( "p" ) . text ( ) ;

              $ ( "p" ) . html ( 'sds' ) ;

              $ ( "div" ) . attr ( "disable" , "true" ) ;

              $ ( "#testCss" ) . css ( "font-size" , "19px" ) ;

              $ ( ".testCss" ) . css ( "color" , "red" ) ;

              $ ( "form *" ) . attr ( "disabled" ,  "true" ) ;  //子元素

              $ ( "#default,.testCss" ) . html ( "我们很特殊" ) ; //sele1,sele2,seleN选择器

              $ ( "tr td" ) . html ( 'change' ) ; //ance desc选择器 ance内所有desc元素(外、内)

              $ ( "#s>label" ) . html ( 'YouHoo' ) ;    //parent > child选择器(属于p的c,不含p-m-c)

              $ ( "h1+label" ) . html ( 'pre+nex' ) ;   // prev + next选择器(h1相邻兄弟l)

              $ ( "h1 ~ label" ) . html ( 'pre+all' ) ; // prev ~ siblings选择器(全部相邻)

         /*过滤选择器*/

              $ ( "li:first" ) . css ( "background-color" ,  "red" ) ; //首个

              $ ( "li:last" ) . css ( "background-color" ,  "red" ) ;

              $ ( "li:eq(3)" ) . css ( "background-color" ,  "#60F" ) ; //li的位置0开始

              $ ( "li:contains('土豪')" ) . css ( "background-color" ,  "#60F" ) ; //li内容

              $ ( "li:has('p')" ) . css ( "background-color" ,  "#60F" ) ; //li包含p下的属性

              $ ( "li:hidden()" ) . html ( ) ;

              $ ( "li:visible" ) . css ( "background-color" , "blue" ) ;

              $ ( "li[attribute  = '水果']" ) . css ( "background-color" , "blue" ) ; //li的内容

              $ ( "li[attribute != '蔬菜']" ) . css ( "background-color" , "blue" ) ;

              $ ( "li[attribute *= '果']" ) . css ( "background-color" , "blue" ) ;

              $ ( "li:first-child" ) . css ( "background-color" ,  "green" ) ; //2个ul每个li

              $ ( "li:last-child" ) . css ( "background-color" ,  "green" ) ; //2个ul每个li     

              function  change ( ) {

                   var  value  =  $ ( "a" ) . html ( ) ;

                   if ( value  ==  '更多' ) {

                        $ ( "div:hidden" ) . attr ( 'style' , 'display:block' ) ;

                        $ ( "a" ) . html ( "简化" ) ;

                   } else {

                        $ ( "div" ) . attr ( 'style' , 'display:none' ) ;

                        $ ( "a" ) . html ( "更多" ) ;

                   }

              }

         /*表单选择器*/

              $ ( "#frmTest :input" ) . addClass ( "bg_blue" ) ;

              $ ( "#frmTest :text" ) . addClass ( "bg_blue" ) ;

              $ ( "#frmTest :password" ) . addClass ( "bg_blue" ) ;

              $ ( "#frmTest :button" ) . addClass ( "bg_blue" ) ;

              $ ( "#frmTest :radio" ) . addClass ( "bg_blue" ) ;

              $ ( "#frmTest :checed" ) . attr ( "disabled" ,  "true" ) ;

              $ ( "#frmTest :checkbox" ) . attr ( "disabled" , "true" ) ;

              // #id input:type

              $ ( "#frmTest input:text" ) . addClass ( "bg_red" ) ;

              $ ( "#frmTest :image" ) . addClass ( "bg_red" ) ;

              $ ( "#frmTest :selected" ) . html ( 'ss' )

         /*删除对象的子元素*/

              $ ( "table" ) . empty ( ) ;

         /*删除对象和子元素*/

              $ ( "table" ) . remove ( ) ;

         </ script >

     </ body >

</ html >