js和jq常用方法区分
2015-07-23 16:28
701 查看
小女子在初期开发时候,常常区分不清楚那个属性或方法是js的,哪个是jq的,浪费了很多时间去调试。这一篇以对比的方式记录一些js和jq常用的方法,便于查阅和区分。
一、初始化
js中 :
jq中:
二、获取HTML、文本和值
js中 :
jq中:
三、监听事件
js中 :
jq中:
四、控制显示隐藏效果
js中 :
jq中:
五、获取下拉框的值和文本
js中 :
jq中(简易,荐):
六、获取单选框/复选框的值和文本
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);
相关文章推荐
- JavaScript中你所不知道的Object(一)
- vs2010中 js的intellisense(智能提示) 和 Snippets(代码块)
- JSTL详解--EL表达式
- RegExp对象的使用与正则替换
- 六度分离(floyd算法+dijskra+SPFA)
- 支持移动设备的纯Javascript画廊
- javascript之处理Ajax错误
- javascript基础(二)
- 网页首页广告显示缓慢向上消失
- js实现图片预览
- JS高级程序设计5-引用类型
- JS闭包简单了解
- JavaScript对象继承的方法
- 【SSH异常系列】Cannot call sendError() after the response has been committed
- JS测试框架-Jasmine简介
- 关于Json文件的读写
- ExtJs的API文档查看——需要部署到web服务器上
- fastjson用法2
- 获取json数据,并且转化为对象,然后计算
- jsp常用指令