js和jq（jquery）方法区分区别1 （共三篇，详见我6miu）

一、初始化  js中 :

window.onload = function(){......} 1 1

jq中:

(document).ready(function(){......}) 1 1

二、获取HTML、文本和值  js中 :

dom.innerHTML = dom.innerText = dom.value = 123 123

jq中:

$("XXX").html(); //获取HTML $("XXX").text(); //获取text，去除html $("XXX").val(); //获取值 123 123

三、监听事件  js中 :

dom.addEventListener("XX", function(){......}); //常用的点击事件： dom.onclick = function(){......} 123 123

jq中:

$("XXX").on("XX", function(){......}); //绑定和解除绑定 $("XXX").bind("XX", function(){......}).unbind("XX", function(){......}); //只执行一次事件 $("XXX").one("XX", function(){......}); //交替动作,参数为两个动作交替进行 $("XXX").toggle(function(){......}, function(){......}); 1234567 1234567

四、控制显示隐藏效果  js中 :

dom.style.display = "none/block";//隐藏不占位 dom.style.visibility = "hidden/visible";//隐藏但占位 12 12

jq中:

$("XXX").hide(); $("XXX").show(); 12 12

五、获取下拉框的值和文本  js中 :

//1:拿到select对象： var myselect=document.getElementById("XX"); //2：拿到选中项的索引： // selectedIndex代表的是你所选中项的index var index=myselect.selectedIndex ; //3:拿到选中项options的value： myselect.options[index].value; //4:拿到选中项options的text： myselect.options[index].text; //2、3综合简写 myselect.options[myselect.selectedIndex].value; 123456789101112131415 123456789101112131415

jq中(简易，荐):

var options=$("#XXX option:selected"); //获取选中的项 alert(options.val()); //拿到选中项的值 alert(options.text()); //拿到选中项的文本 12345 12345

六、获取单选框/复选框的值和文本  js中 :

//单选复选一样，循环获取，checked为true表示选中 if(obj[i].checked){ alert(obj[i].value); } 1234 1234

jq中:

$("input:checked").val(); 1 1

七、获取父、兄、子节点  js中 :

//全部父节点 dom.parentNode; //全部子节点 dom.childNode; //下一个兄弟节点 dom.nextSilbing; //前一个兄弟节点 dom.parentSilbing; //第一个子节点 dom.firstChild; //最后一个子节点 dom.lastChild; 123456789101112 123456789101112

jq中:

//获得子节点(不是孙子节点，只一层) $("XX").children(expr); //获得使用祖先节点 $("XX").parents(expr); //获得上一个兄弟节点 $("XX").prev(expr); //获得之前所有兄弟节点 $("XX").prevAll(expr); //获得下一个兄弟节点 $("XX").next(expr); //获得下面所有兄弟节点 $("XX").nextAll(expr); //获得所有兄弟姐妹节点 $("XX").siblings(expr); 1234567891011121314 1234567891011121314