属性:
- attr
html:<div>demo1</div> jQuery:$("div").attr("id","demo1");
- removeAttr:
$("div").removeAttr("id");
- prop:
html:<input type="text" value="demo2"/> jQuery:$("input").prop("disabled",true);
- removeProp:
jQuery:$("input").removeProp("disabled");
- addClass:
css:.color{background: blue;} jQuery:$("div").addClass("color");
- removeClass:
$("div").removeClass("color");
- toggleClass:
jQuery:
$("div").click(function(){
$(this).toggleClass("color");
}); - html():
jQuery:$("div").html("<p>demo2</p>");
- text():
jQuery:$("div").text("demo3");
- val():
jQuery:console.log($("input").val());
- attr
css
- css:
jQuery:$("div").css("color","white");
- 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%"); - offset:
html:<p>Hello</p><p>2nd Paragraph</p> console.log($("p:last").offset().left);
-
position:
html:<div id="demo2">
<p>demo2</p>
</div> console.log($("#demo2>p:first").position().top); -
scollTop:
console.log($("#demo2>p:first").scrollTop());
-
scollLeft:
console.log($("#demo2>p:first").scrollLeft());
-
height:
$("div").height(200);
- width:
$("div").width(200);
- innerHeight
- innerwidth
$("#demo3").innerWidth(50).innerHeight(50);
- outerHeight
- outerWidth
$("#demo3").outerWidth(150).outerHeight(150);
- css: