> 脚本语言 > >

jQuery与js常用方法对比 2017-04-29 15:13　出处：清屏网　人气：　

（一）文档就绪

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; } } (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实现

(("EleId").getAttribute(attribute) （九）添加元素

jQuery实现

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