js和jq常用方法区分-温故知新

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

一、初始化

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

总结了一些开发中常常使用的方法和记忆混淆的知识点。

并不是所有的jq方法都是优秀的，还是尽量用原生js方法以提高效率。

1、通过js修改样式，尽量使用 dom.style.XXX = XXX的方式。
2、将$(“<p></p>“)优化为 
$( document.createElement(“p”));

一、jQuery部分

1、jq的查找节点

//expr可以设置想找的任何标记，比较方便
$("XX").find(expr);

2、jq的快速清除节点内容

$("XX").empty();

3、jq的添加、删除、判断属性

$("XX").addClass(expr);
$("XX").removeClass(expr);
$("XX").hasClass(expr);

4、动画效果使用jq动画

$("XX").show("slow"/1000);
$("XX").fadeIn/fadeOut();
$("XX").slideUp/slideDown();
$("XX").animation("动画样式","动画速度","回调函数");

5、动画效果使用jq动画

$("XX").show("slow"/1000);
$("XX").fadeIn/fadeOut();
$("XX").slideUp/slideDown();
$("XX").animation("动画样式","动画速度","回调函数");

二、js部分

1、牢记基本类型

number, string, boolean, null, undefined

2、数组删除某一段

arr.splice(startIndex, spliceNumber);

3、截取字符串的值

//不用substring方法
arr.slice(startIndex, endIndex);