js和jq(jquery)方法区分区别1 (共三篇,详见我csdn)
2017-03-08 23:36
330 查看
一、初始化
js中 :
1
jq中:
1
二、获取HTML、文本和值
js中 :
2
3
1
2
3
jq中:
2
3
1
2
3
三、监听事件
js中 :
2
3
1
2
3
jq中:
2
3
4
5
6
7
1
2
3
4
5
6
7
四、控制显示隐藏效果
js中 :
2
1
2
jq中:
2
1
2
五、获取下拉框的值和文本
js中 :
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中(简易,荐):
2
3
4
5
1
2
3
4
5
六、获取单选框/复选框的值和文本
js中 :
2
3
4
1
2
3
4
jq中:
1
七、获取父、兄、子节点
js中 :
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
jq中:
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
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代表的是你所选中项的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;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
相关文章推荐
- js和jq(jquery)方法区别区分3(共三篇,详见我csdn)
- jsh和jq(jquery)的区分区别2(共三篇,详见我csdn)
- [JS]jQuery中attr和prop方法的区别
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
- jQ基础篇--jQuery与JS中的map()方法
- Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】
- js自定义方法直接申明式的使用以及在jquery的$(function(){})中使用的区别
- js和jq常用方法区分
- jquery.validate.js:1110 Uncaught ReferenceError: jQuery is not defined at jq 异常解决方法
- 关于js中的onclick事件和JQuery中的click方法以及on方法事件的详解以及区别
- js的DOM对象与Jquery对象的区别和转换方法总结
- jQuery基础——JS和JQ的区别(可实现基础增删)
- jquery跟js初始化加载的多种方法及区别介绍
- js监听键盘事件的方法—原生和jquery的区别
- [TOP]原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
- jquery跟js初始化加载的多种方法及区别介绍
- jquery跟js初始化加载的多种方法及区别介绍
- js监听键盘事件的方法_原生和jquery的区别详解
- [知了堂学习笔记]_ js和jquery方法区别
- 传统JS中的window.onload方法和jQuery中的$(document).ready()方法的区别