JQuery元素操作

操作元素大小

width()、innerWidth()、outerWidth()、height()、innerHight()、outerHeight()

$(.nav).height("20px") //设置元素高度
$(.nav).height(function(index,height){...}) //传入函数，它返回的是要设置的高度值。index:元素索引，height表示元素的原来高度

height()、innerHeight()、outerHeight()、outerHeight(true)的区别：
$(".nav").height() //元素内部高度，不含border、padding、margin
$(".nav").innerHeight() //元素内部高度+padding的高度值
$(".nav").outerHeight() //元素内部高度+padding高度+border高度 , 或可写成$(".nav").outerHeight(false)
$(".nav").outerHeight(true) //元素内部高度+padding高度+border高度+margin高度

$(".nav").width() //宽度与上述高度一样

创建元素：

$("<input>",{type:"text", val:"123" }).appendTo(document.body)

插入元素

append()、appendTo()  propendTo()、propend()  after()、insertAfter()  before()、insertBefore()

$(".nav").append("<span>新元素</span>") 　　 //目标元素内容之后      $("<span>新元素</span>").appendTo(".nav")
$(".nav").propend("<span>新元素</span>") 　  //目标元素内容之前      $("<span>新元素</span>").propendTo(".nav")
$(".nav").after("<span>新元素</span>") 　　　//目标元素之前          $("<span>新元素</span>").insertAfter(".nav")
$(".nav").before("<span>新元素</span>")   　 //目标元素之后	  $("<span>新元素</span>").insertBefore(".nav")

$(".nav").append(function(index,html){ return "<span>123</span>" }) //传入的是函数，index表示元素索引，html表示该元素原始的HTML值
propend()、after()、before()同上

删除元素
$("li").remove("#li2")
$("li").detach("#li2")
$("li").empty("#li2")
以上三种，如果无参数，则删除所有