jQuery与js常用方法对比

逆袭的菜鸟X
111 阅读7分钟

####（一）文档就绪

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';
// slideUp
header.style.height='0';

// slideDown
header.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").innerText
document.getElementById("EleId").innerHTML
document.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属性: 边框宽度+内边距宽度+内容宽度 
    js



avatar
文章
阅读
粉丝