这一篇以对比的方式记录一些js和jq常用的方法,便于查阅和区分。
一、初始化
js中 :
window.onload = function(){......}
jq中:
(document).ready(function(){......})
二、获取HTML、文本和值
js中 :
dom.innerHTML =
dom.innerText =
dom.value =
jq中:
$("XXX").html();
$("XXX").text();
$("XXX").val();
三、监听事件
js中 :
dom.addEventListener("XX", function(){......});
dom.onclick = function(){......}
jq中:
$("XXX").on("XX", function(){......});
$("XXX").bind("XX", function(){......}).unbind("XX", function(){......});
$("XXX").one("XX", function(){......});
$("XXX").toggle(function(){......}, function(){......});
四、控制显示隐藏效果
js中 :
dom.style.display = "none/block"
dom.style.visibility = "hidden/visible"
jq中:
$("XXX").hide();
$("XXX").show();
五、获取下拉框的值和文本
js中 :
var myselect=document.getElementById("XX");
var index=myselect.selectedIndex ;
myselect.options[index].value;
myselect.options[index].text;
myselect.options[myselect.selectedIndex].value;
jq中(简易,荐):
var options=$("#XXX option:selected");
alert(options.val());
alert(options.text());
六、获取单选框/复选框的值和文本
js中 :
if(obj[i].checked){
alert(obj[i].value);
}
jq中:
$("input:checked").val();
七、获取父、兄、子节点
js中 :
dom.parentNode;
dom.childNode;
dom.nextSilbing;
dom.parentSilbing;
dom.firstChild;
dom.lastChild;
jq中:
$("XX").children(expr);
$("XX").parents(expr);
$("XX").prev(expr);
$("XX").prevAll(expr);
$("XX").next(expr);
$("XX").nextAll(expr);
$("XX").siblings(expr);