jQuery实践——属性和css篇

　　属性：

1. 1. attr
      

      html:<div>demo1</div>
      
      jQuery:$("div").attr("id","demo1");

      
      
      

   2. removeAttr:
      

      $("div").removeAttr("id");

      
      
      

   3. prop:
      

      html:<input type="text" value="demo2"/>
      
      jQuery:$("input").prop("disabled",true);

      
      
      

   4. removeProp:
      

      jQuery:$("input").removeProp("disabled");

      
      
      

   5. addClass:
      

      css:.color{background: blue;}
      
      jQuery:$("div").addClass("color");

      
      
      

   6. removeClass:
      

      $("div").removeClass("color");

      
      
      

   7. 　toggleClass:
      

      jQuery:
               $("div").click(function(){
                   $(this).toggleClass("color");
               });

       

   8. html():
      

      jQuery:$("div").html("<p>demo2</p>");

      
      
      

   9. text():
      

      jQuery:$("div").text("demo3");

      
      
      

   10. val():
       

       jQuery:console.log($("input").val());

       
       
       

　　css

1. 1. css:
      

      jQuery:$("div").css("color","white");

      
      
      

   2.  

      cssHooks:
      

      csshooks:(function($) {
                          if(!$.cssHooks) {
                              throw("jQuery 1.4.3+ is needed for this plugin to work");
                              return;
                          }
      
                          function styleSupport(prop) {
                              var vendorProp, supportedProp,
                                  capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
                                  prefixes = ["Moz", "Webkit", "O", "ms"],
                                  div = document.createElement("div");
                              if(prop in div.style) {
                                  supportedProp = prop;
                              } else {
                                  for(var i = 0; i < prefixes.length; i++) {
                                      vendorProp = prefixes[i] + capProp;
                                      if(vendorProp in div.style) {
                                          supportedProp = vendorProp;
                                          break;
                                      }
                                  }
                              }
                              div = null;
                              $.support[prop] = supportedProp
                              return supportedProp;
                          }
                          var borderRadius = styleSupport("borderRadius");
                          // Set cssHooks only for browsers that
                          // support a vendor-prefixed border radius
                          if(borderRadius && borderRadius !== "borderRadius") {
                              $.cssHooks.borderRadius = {
                                  get: function(elem, computed, extra) {
                                      return $.css(elem, borderRadius);
                                  },
                                  set: function(elem, value) {
                                      elem.style[borderRadius] = value;
                                  }
                              };
                          }
                      })(jQuery);
      
      
      
      jQuery:$("div").css("borderRadius", "50%");

      
      
      

   3.  

      offset:
      

      html:<p>Hello</p><p>2nd Paragraph</p>
      
      
      console.log($("p:last").offset().left);

       

   4. position:

      html:<div id="demo2">
                  <p>demo2</p>
              </div>
      
      console.log($("#demo2>p:first").position().top);

       

   5. scollTop:

      console.log($("#demo2>p:first").scrollTop());

       

   6. scollLeft:

      console.log($("#demo2>p:first").scrollLeft());

       

   7. height:

      $("div").height(200);

       

   8.  

      width:
      

      $("div").width(200);

      
      
      

   9.  

      innerHeight
   10. innerwidth
       

       $("#demo3").innerWidth(50).innerHeight(50);

       

   11.  

       outerHeight
   12. outerWidth
       

       $("#demo3").outerWidth(150).outerHeight(150);