jQuery实践——属性和css篇

  属性:

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

      jQuery实践——属性和css篇

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

      jQuery实践——属性和css篇

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

      jQuery实践——属性和css篇

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

      jQuery实践——属性和css篇

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

      jQuery实践——属性和css篇

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

      jQuery实践——属性和css篇

    7.  toggleClass:
      jQuery:
      $("div").click(function(){
      $(this).toggleClass("color");
      });
    8. html():
      jQuery:$("div").html("<p>demo2</p>");

      jQuery实践——属性和css篇

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

      jQuery实践——属性和css篇

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

      jQuery实践——属性和css篇

  css

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

      jQuery实践——属性和css篇

    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%");

      jQuery实践——属性和css篇

    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);

      jQuery实践——属性和css篇

    9. innerHeight
    10. innerwidth
      $("#demo3").innerWidth(50).innerHeight(50);

      jQuery实践——属性和css篇

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

      jQuery实践——属性和css篇

  

上一篇:hdu 1084 What Is Your Grade?


下一篇:基于简单sql语句的sql解析原理及在大数据中的应用