jQuery 작업 요소의 내용과 스타일의 완전한 실례 분석

본고의 실례는 jQuery 조작 요소의 내용과 양식을 설명하였다.여러분에게 참고하도록 공유하겠습니다. 구체적으로는 다음과 같습니다.

 
 
 
 
 
  //       
  function testHtml1(){
  //        
  var showdiv=$("#showdiv");
  //       
  alert(showdiv.html());  //           ，    HTML        ,         
  }
  function testHtml2(){
  //        
  var showdiv=$("#showdiv");
  //            
  showdiv.html("<b>clannad   !</b>");  //  HTML        
  }
  function testHtml3(){
  //        
  var showdiv=$("#showdiv");
  //            
  showdiv.html(showdiv.html()+"<b>clannad   !</b>");  //         ,  showdiv          ，    +    
  }
  function testText1(){
  //        
  var showdiv=$("#showdiv");
  //            
  alert(showdiv.text());         //           
  }
  function testText2(){
  //        
  var showdiv=$("#showdiv");
  //            
  showdiv.text("<b>      !</b>");  //          div，      
  }
  //       
  function testCss1(){
  //    
  var showdiv=$("#showdiv");
  //    
  showdiv.css("background-color","yellow");
  //          
  alert(showdiv.css("width"));    //        
  }
  function testCss2(){
  //    
  var showdiv=$("#show2");
  //    
  showdiv.css({"background-color":"purple","border":"solid 1px"}); //    {}                  ，       ，  ，      ：
  }
  function testAddClass(){
  //    
  var div=$("#show2");
  //       
  div.addClass("common");
  //     
  div.addClass("word");   //             ， ：           ，           
  }
  function testRemoveClass(){
  //    
  var div=$("#show2");
  //       
  div.remove("word");  //          
  }
 
 
 
 
 
jQuery          
 

 
 
 
 
 
 

 
 
 
 
 

 

        !
 
 

  Clannad After Story
 
 

관심 있는 친구는 온라인 HTML/CSS/JavaScript 코드를 사용하여 도구를 실행할 수 있습니다.http://tools.jb51.net/code/HtmlJsRun상기 코드의 운행 효과를 테스트하다.
더 많은 jQuery 관련 내용에 관심이 있는 독자들은 본 사이트의 주제:,,,,
본고에서 서술한 것이 여러분의 jQuery 프로그램 설계에 도움이 되었으면 합니다.