jQuery与js常用方法对比(2)_H5之家 - 中国HTML5教程资源分享第一站

js实现

document.getElementById("myList").insertBefore(newItem,existingItem); document.getElementById("myList").appendChild(newItem); （十）删除元素

jQuery实现

$("#div1").remove();//-删除被选元素及其子元素。 $("#div1").empty();//-删除被选元素的子元素。

js实现

var el = document.getElementById('div1'); el.parentNode.removeChild(el); （十一）操作Class

jQuery实现

$("h1,h2,p").addClass("blue"); $("h1,h2,p").removeClass("blue"); $("h1,h2,p").toggleClass("blue");

js实现

jQuery实现

$("p").css({"background-color":"yellow","font-size":"200%"});

js实现

jQuery实现

$("span").parent();//-返回被选元素的直接父元素 $("#span").parents();//-返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>) $("div").children();//-返回被选元素的所有直接子元素 $("div").find("span");//-返回被选元素的后代元素，一路向下直到最后一个后代 $("h2").siblings();//-返回被选元素的所有同胞元素 $("h2").next();//-返回被选元素的下一个同胞元素 $("h2").nextAll();//-返回被选元素的所有跟随的同胞元素 $("h2").nextUntil("h6");//-返回介于两个给定参数之间的所有跟随的同胞元素 $("div p").first();//-返回被选元素的首个元素 $("div p").last();//-返回被选元素的最后一个元素 $("p").eq(1);//-返回被选元素中带有指定索引号的元素 $("p").filter(".url");//-不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回 $("p").not(".url");//-返回不匹配标准的所有元素

js实现

var s=document.getElementById("test"); ns=s.nextSbiling; fc=s.firstChild; //获得s的第一个子节点 var lc=s.lastChile; //获得s的最后一个子节点（十四）获取尺寸 jQuery里概念

位置

offset: 获取匹配元素在当前视口的相对偏移

position: 获取匹配元素相对父元素的偏移

scrollTop: 获取匹配元素相对滚动条顶部的偏移

scrollLeft: 获取匹配元素相对滚动条左侧的偏移

尺寸

height: 取得匹配元素当前计算的高度值

width: 取得第匹配元素当前计算的宽度值

innerHeight: 获取第匹配元素内部区域高度（包括补白、不包括边框）

innerWidth: 获取第匹配元素内部区域宽度（包括补白、不包括边框）

outerHeight: 获取第匹配元素外部高度（默认包括补白和边框）接受一个布尔值参数, 默认为false, 设置true时, 计算外边距在内

outerWidth: 获取第匹配元素外部高度（默认包括补白和边框）接受一个布尔值参数, 默认为false, 设置true时, 计算外边距在内

jquery

js里概念