jQuery操作Dom

< html >

     < head >

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

     </ head >

     < body >

         < a  href = "www.baidu.com" >hello </ a >

         < div  class = "test" > </ div >

         < span > </ span >

         < button > 点 击 我 </ button >

         < li >1 </ li >

         < li >2 </ li >

         < li >3 </ li >

         < script >

         /*jQuery 操作DOM元素*/

         //元素的属性

         $ ( "div" ) . html ( $ ( "a" ) . attr ( 'href' )) ;

         // 添加属性

         $ ( "span" ) . attr ( 'id' , '11' ) ;

         // 移除属性

         $ ( "span" ) . removeAttr ( 'id' )

         $ ( "div" ) . text ( "<h3>text</h3>" )   //元素的内容(不带)

         $ ( "div" ) . html ( "<h3>html</h3>" )   //元素的内容(带标签)

         // 添加样式

         $ ( "div" ) . addClass ( "css样式" )

         $ ( "div" ) . css ({ "background" : "red" , "color" : "white" }) ;

         // 移除样式、class的属性样式

         $ ( "div" ) . removeClass ( "css样式" ) ;

         // h3元素追加div内尾部

         $ ( "div" ) . append ( "<h3>我是append生成的</h3>" ) ;

         $ ( "<h2>我是appendto生成的</h2>" ) . appendTo ( ".test" ) ;

         // 元素之前插入标签

         $ ( "div" ) . before ( "<h4>我是before</h4>" )

         $ ( "div" ) . after ( "<h4>我是after</h4>" )

         // 克隆

         $ ( "body" ) . append ( $ ( "a" ) . clone ( )) ;

         // 替换标签(选择器)

         //$(selector).replaceWith(content)

         //$(content).replaceAll(selector)

         $ ( "h4" ) . replaceWith ( "<h3>我是replacewith替换的<h3>" )

         // each遍历

         $ ( "button" ) . click ( function ( ) {

            $ ( "li" ) . each ( function ( ) {

              alert ( $ ( this ) . text ( ))

            }) ;

         }) ;

         // remove()方法删除所选元素本身和子元素

         // empty()方法则只删除所选元素的子元素

         </ script >

     </ body >

</ html >