js和jQuery常用方法区分

这一篇以对比的方式记录一些js和jq常用的方法，便于查阅和区分。

一、初始化 
js中 :

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

jq中:

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

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

dom.innerHTML =dom.innerText =dom.value =
1
2
3
1
2
3

jq中:

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

三、监听事件 
js中 :

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

jq中:

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

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

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

jq中:

$("XXX").hide();$("XXX").show();
1
2
1
2

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

//1:拿到select对象： var myselect=document.getElementById("XX"); //2：拿到选中项的索引：// selectedIndex代表的是你所选中项的indexvar index=myselect.selectedIndex ; //3:拿到选中项options的value： myselect.options[index].value; //4:拿到选中项options的text： myselect.options[index].text; //2、3综合简写myselect.options[myselect.selectedIndex].value;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

jq中(简易，荐):

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

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

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

jq中:

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

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

//全部父节点dom.parentNode;//全部子节点dom.childNode;//下一个兄弟节点dom.nextSilbing;//前一个兄弟节点dom.parentSilbing;//第一个子节点dom.firstChild;//最后一个子节点dom.lastChild;
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

jq中:

//获得子节点(不是孙子节点，只一层)$("XX").children(expr);//获得使用祖先节点$("XX").parents(expr);//获得上一个兄弟节点$("XX").prev(expr);//获得之前所有兄弟节点$("XX").prevAll(expr);//获得下一个兄弟节点$("XX").next(expr);//获得下面所有兄弟节点$("XX").nextAll(expr);//获得所有兄弟姐妹节点$("XX").siblings(expr);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14