js和jq（jquery）方法区分区别1

Posted 2021-04-08 代码笔记本

力             彑

         夂                 小

一、初始化 

js中 :

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

jq中:

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

二、获取html、文本和值 

js中 :

dom.innerHTML =

dom.innerText =

dom.value =

jq中:

$("XXX").html(); //获取HTML

$("XXX").text(); //获取text，去除html

$("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中 :

//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;

jq中(简易，荐):

var options=$("#XXX option:selected"); //获取选中的项 

alert(options.val()); //拿到选中项的值 

alert(options.text()); //拿到选中项的文本

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

js中 :

//单选复选一样，循环获取，checked为true表示选中 

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);

代码笔记本

每天记录学习历程