jQuery与js常用方法对比

（一）文档就绪

jQuery实现

$(document).ready(function(){   // 开始写 jQuery 代码...});

或简写为

$(function(){   // 开始写 jQuery 代码...});

js实现

window.onload=function(){    // 开始写 js 代码...}

（二）元素选择

//元素选择$("p")document.getElementsByTagName("p")//id选择$("#test")document.getElementById("test")//class选择$(".test")document.getElementsByClassName("test")

（三）点击事件

$("p").click(function(){    // 动作触发后执行的代码!!});document.getElementsByTagName(“p”).onclick=function(){alert('hello world');};或document.getElementsByTagName(“p”).addEventListener('click',function(){alert('hello world')},false);

（四）元素显示和隐藏

jQuery实现

$("p").hide();$("p").show(1000);$("p").toggle();

js实现

document.getElementById("EleId").style.display="none";document.getElementById("EleId").style.display="inline";

（五）元素淡入淡出

jQuery实现

$("#div").fadeIn(3000);$("#div").fadeOut("slow");$("#div1").fadeTo("slow",0.15);

js实现

//这是网上摘得代码大概诠释了基本原理var iBase = {   Id: function(name){    return document.getElementById(name);   },   //设置元素透明度,透明度值按IE规则计,即0~100   SetOpacity: function(ev, v){    ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;   }  }  //淡入效果(含淡入到指定透明度)  function fadeIn(elem, speed, opacity){   /*    * 参数说明    * elem==>需要淡入的元素    * speed==>淡入速度,正整数(可选)    * opacity==>淡入到指定的透明度,0~100(可选)    */   speedspeed = speed || 20;   opacityopacity = opacity || 100;   //显示元素,并将元素值为0透明度(不可见)   elem.style.display = 'block';   iBase.SetOpacity(elem, 0);   //初始化透明度变化值为0   var val = 0;   //循环将透明值以5递增,即淡入效果   (function(){    iBase.SetOpacity(elem, val);    val += 5;    if (val <= opacity) {     setTimeout(arguments.callee, speed)    }   })();  }

（六）元素滑动

jQuery实现

$("#panel").slideDown();$("#panel").slideUp();$("#panel").slideToggle();

js实现

var header=document.getElementsByTagName('header')[0];header.style.transition='height 500ms';header.style.overflow='hidden';// slideUpheader.style.height='0';// slideDownheader.style.height='70px';

（七）元素动画

jQuery实现

$("div").animate({left:'250px'});div.animate({left:'100px'},"slow");

js实现方法有很多不做累述^_^

（八）获取内容和属性

jQuery实现

$("#test").text()//- 设置或返回所选元素的文本内容$("#test").html()//-设置或返回所选元素的内容（包括 HTML 标记）$("#test").val() //- 设置或返回表单字段的值$("#runoob").attr("href")//-获取属性值

js实现

document.getElementById("EleId").innerTextdocument.getElementById("EleId").innerHTMLdocument.getElementById("EleId").getAttribute(attribute)

（九）添加元素

jQuery实现

$("p").append("追加文本");$("p").prepend("在开头追加文本");$("img").after("在后面添加文本");$("img").before("在前面添加文本");

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实现

function hasClass(obj, cls) {        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function addClass(obj, cls) {        if (!this.hasClass(obj, cls)) obj.className += " " + cls;  } function removeClass(obj, cls) {        if (hasClass(obj, cls)) {        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');        obj.className = obj.className.replace(reg, ' ');         }  }

（十二）设置css

jQuery实现

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

js实现

function css(obj, attr, value) {            switch (arguments.length) {                case 2:                    if (typeof arguments[1] == "object") {    //批量设置属性                        for (var i in attr) obj.style[i] = attr[i]                    }                    else {    // 读取属性值                        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]                    }                    break;                case 3:                    //设置属性                    obj.style[attr] = value;                    break;                default:                    return "";            }        }

（十三）遍历

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");var chils= s.childNodes;  //得到s的全部子节点var par=s.parentNode;   //得到s的父节点var ns=s.nextSbiling;   //获得s的下一个兄弟节点var ps=s.previousSbiling;  //得到s的上一个兄弟节点var 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里概念

window

• window.innerWidth/innerHeight: 浏览器可视窗口宽度, 高度(不含浏览器的边框，但包含滚动条, 调出debug工具会减去其宽高).
• window.outerWidth/outerHeight：整个浏览器宽度, 高度(包含浏览器的边框，因各个浏览器的边框不一样，得到的值也是不一样的).
• window.screenLeft/screenTop:
  • ie浏览器的内边缘距离屏幕边缘的距离
  • chrome浏览器的外边缘距离屏幕边缘的距离
• window.screenX/screenY:
  • ie9/10浏览器的外边缘距离屏幕边缘的距离
  • chrome浏览器的外边缘距离屏幕边缘的距离
  • 由此可知，chrome的screenLeft和screenX是相等的（其目的是为了兼容ie和firefox，两个属性都兼备了，但更趋向于firefox，chrome的这种做法不止这一处，还有很多，其实这种做法便于开发者移植，但对开发者的开发过程产生了一定的混淆），ie9/10的screenLeft是大于screenX的.
• window.pageXOffset/pageYOffset: 表示浏览器X轴（水平）、Y轴（垂直）滚动条的偏移距离
• 兼容：ie9/10、chrome、firefox
• window.scrollX/scrollY: 表示浏览器X轴（水平）、Y轴（垂直）滚动条的偏移距离。由此可知，在chrome和firefox中window.pageXOffset和window.scrollX是相等的，具体为什么会出现两个相等的属性值，不得而知
• 兼容：chrome、firefox
• 偏移距离是指页面被向上滑动, 向左滑动超出浏览器窗口部分的高度和宽度
  screen
• screen.width/height: 屏幕的宽度、高度(指的是屏幕的分辨率，单位为像素, 不是浏览器窗口)
• 此处必须是screen.width，而不是screenWidth，与接下来要说的各种宽度有所区别
• screen.availWidth/availHeight: 屏幕的可用宽度、高度(通常与屏幕的宽度、高度一致, 有时要减去任务栏或Mac-OS系统上面导航条宽高)

元素属性

• clientHeight, clientWidth属性:
  • 有滚动条时: clientWidth=内边距宽度+内容宽度-元素垂直滚动条宽度
  • 无滚动条时: clientWidth=内边距宽度+内容宽度
  • 滚动条一般会在边框内出现
• clientLeft, clientTop: clientLeft为左边框宽度，clientTop为上边框宽度
• offsetWidth/offsetHeight属性: 边框宽度+内边距宽度+内容宽度

作者：逆袭的小菜鸟
链接：http://www.jianshu.com/p/527c98f2be7a
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。