一、属性操作

元素的尺寸

width() height()

innerWidth() innerHeight()

 outerWidth() outerHeight()

 

$('div').width() ;  //width$('div').innerWidth() ;  //width + padding$('div').outerWidth() ;  //width + padding + border$('div').outerWidth(true);  //width + padding + border + margin

 

//$('#div1').width(200);        //$('#div1').innerWidth(200);   //width : 200 - padding        //$('#div1').outerWidth(200);     //width : 200 - padding - border        $('#div1').outerWidth(200,true);   //width : 200 - padding - border - margin

 

//alert( $('#div1').get(0).offsetWidth );   //原生JS是获取不到隐藏元素的尺寸        alert( $('#div1').width() );  //JQ是可以获取隐藏元素的尺寸

//alert( $(window).height() );     //可视区的高        alert(  $(document).height()  );  //页面的高

//alert( $(document).scrollTop() );   //滚动距离                //$(document).scrollTop()  == $(document).height() - $(window).height()

 

 

 

二、DOM操作

insertBefore() before()

insertAfter() after()

appendTo() append()

prependTo() prepend()

append() : 把元素添加到指定的节点的里面的最后

prepend() : 把元素添加到指定的节点的里面的最前面

before() : 把元素添加到指定的节点的前面

after() : 把元素添加到指定的节点的后面

 

 1.insertBefore

     
      div
     

2、insertAfter() 

在原生js中是没有改方法的，用法与insertBefore类似

3.appendTo()

与原生的js中appendchild 用法类似的

span
     
      div
     

4.prependTo()

span
     
      div
     

 before()  after()  append()  prepend()与之前是对应的

如before()

span
     
      div
     

三、get JQ转为原生的

$(function(){        //alert( $('div').get(0).innerHTML );get() : 把JQ转成原生JS , 默认情况获取的是一个原生的集合，那么可以通过参数来找到集合中的指定项        alert( $('div').eq(0).html() );    });

 

四、事件细节

ev : event对象

在jquery中直接用ev 不需要再向js要做兼容处理var ev=ev || window.event

span
     
      div