js与jQuery实现方式对比汇总
CreateTime--2016年12月16日09:11:23
Author:Marydon
js与jQuery实现方式对比汇总
<div id="ListContainer" style="border:1px solid red;height:100px;width:100px;"></div>
1.控制元素的显示与隐藏
javascript方式
/*控制div隐藏*/ document.getElementById("ListContainer").style.display = "none"; /*控制div显示*/ document.getElementById("ListContainer").style.display = "block";
jQuery方式
/*控制div隐藏*/ $("#ListContainer").hide(); /*控制div显示*/ $("#ListContainer").show();
2.控制元素的CSS样式（更为详细介绍见文件js&jquery控制CSS样式）
a.改变高度和宽度
javascript方式
//死值 /*高度*/ document.getElementById("ListContainer").style.height = "1000px"; /*宽度*/ document.getElementById("ListContainer").style.width = "1000px"; //动态值 /*高度*/ document.getElementById("ListContainer").style.height = "变量名 + 'px'"; /*宽度*/ document.getElementById("ListContainer").style.width = "变量名 + 'px'";
jQuery方式
/*高度*/ $("#ListContainer").height("1000"); $("#ListContainer").height(变量名); /*宽度*/ $("#ListContainer").width("1000"); $("#ListContainer").width(变量名);
b.改变元素内的显示内容
javascript方式
document.getElementById("ListContainer").innerHTML = "『<font color=red>" + jsonData.FORGNAME + "</font>』机构相关信息";
jQuery方式
$("#ListContainer").html("『<font color=red>" + jsonData.FORGNAME + "</font>』机构相关信息");
UpdateTime--2016年12月18日14:38:30
3.获取复选框的属性checked的值
javascript方式
document.getElementById("aa").checked);//true-false
jQuery方式
/*使用attr()方法*/ $("#aa").attr("checked");//checked-undefined /*使用prop()方法*/(推荐使用) $("#aa").prop("checked");//true-false
<input type="checkbox" value="zhangsan" id="aa"/><!-- checked="checked" 或 checked="true" -->
jquery中prop()方法和attr()方法的区别：
jquery1.6及以上版本支持prop()方法
使用attr获取checked属性时返回"checked"和"undefined"，使用prop方法获取属性则统一返回true和false
//input标签声明checked属性时-->获取的属性值是"checked或true"；
//input标签没有声明checked属性时-->获取的属性值是"undefined或false"。
UpdateTime--2017年2月28日09:19:02
4.批量获取复选框的值&迭代数组/集合
javascript方式
window.onload = function () { //javascript实现 //获取页面中所有的input标签 var inputTags = document.getElementsByTagName("input"); //获取复选框的值 var checkboxValue = ""; /** * javascript实现集合迭代 */ for (var i = 0; i < inputTags.length; i++) { if ("checkbox" == inputTags[i].type) { checkboxValue = inputTags[i].value; console.log(checkboxValue); } } }
jQuery方式
//获取页面中所有的复选框 var inputCheckboxTags = $("input[type='checkbox']"); //获取复选框的值 var checkboxValue = "";\ /** * jquery两种方式实现集合迭代 */ //使用$().each(function(index,value){});实现 $(inputCheckboxTags).each(function(index,element){ checkboxValue = element.value; console.log(checkboxValue); }); //使用for循环取值 for(var i = 0; i < inputCheckboxTags.length; i++) { checkboxValue = inputCheckboxTags.eq(i).val(); console.log(checkboxValue); }
UpdateTime--2017年1月14日16:36:38
5.重置下拉列表框（选中的选项）
<select id="test" name="t"> <option value="1">一</option> <option value="2">二</option> <option value="3" selected="selected">三</option> </select>
javascript方式
//方法一（推荐使用） document.getElementById("test").selectedIndex = 0;//或"0" //方法二 document.getElementById("test").options[0].selected = true;//或"selected"
jQuery方式
//方法一（推荐使用） $('#test').prop('selectedIndex', 0); //方法二 $("#test option:first").prop("selected",true); //方法三 $("select:first option:first").prop("selected",true); //重置页面所有的下拉列表框 $('select').prop('selectedIndex', 0);
UpdateTime--2017年1月15日16:41:05
6.动态添加内容
javascript方式
//方式一 //1.新建一个div元素节点 js中创建标签使用的是标签名称 var divObj = document.createElement("div");//document.createElement("<div></div>")这样是错误的 //2.准备存放至容器中的内容 var HTML = ""; for (var i = 0; i < 100; i++) { HTML += (i+1)+"<br/>"; } //3.将内容放置容器中 divObj.innerHTML = HTML; //4.写入body标签 window.onload = function () { document.body.appendChild(divObj);//把div元素节点添加到body元素节点中成为其子节点，但是放在body的现有子节点的最后 } //方式二（推荐使用） var HTML = ""; for (var i = 0; i < 100; i++) { HTML += (i+1)+"<br/>"; } window.onload = function() { document.body.innerHTML += HTML;//相当于document.body.innerHTML = document.body.innerHTML + HTML; } //方式三（不推荐使用） window.onload = function() { for (var i = 0; i < 100; i++) { document.body.innerHTML += (i+1)+"<br/>"; } }
jQuery方式
//方式一（推荐使用） var HTML = ""; for (var i = 0; i < 100; i++) { HTML += (i+1)+"<br/>"; } window.onload = function () { $("body").append(HTML); } //方式二 var HTML = ""; for (var i = 0; i < 100; i++) { HTML += (i+1)+"<br/>"; } window.onload = function () { $("body").html($("body").html()+HTML); } //方式三（不推荐使用） window.onload = function () { for (var i = 0; i < 100; i++) { $("body").append((i+1)+"<br/>"); } }
小结：
javascript的appendChild()方法只能添加“标签”
注意：
a.javascript中没有append()方法；
b.appendChild()方法只能给指定元素后面添加一个子标签
如：
//document.body.appendChild("<div>33</div>");
//document.body.appendChild("<div></div>");
这两种方式都是错误的
jquery的append()方法
用法：
append()给指定元素的最后面添加：既可以是标签又可以是内容
例子：
//直接拼接内容 $("body").append("33"); //拼接标签+内容 $("body").append("<div>333</div>");
UpdateTime--2017年1月19日16:18:29
jquery的prepend()方法
用法：
prepend()给指定元素的最前面后面添加：既可以是标签又可以是内容
UpdateTime--2017年3月1日08:04:15
7.获取节点元素
插入节点元素，见文章：appendChild append insertBefore prepend
<script type="text/javascript"> var divTag = document.createElement("div"); divTag.width = "100px"; divTag.height = "100px"; divTag.style.border = "1px solid red"; divTag.innerText = "测试insertBefore"; window.onload = function() { } </script> <body> <a href="javascript:;" id="test">这是一个空链接</a> </body>
a.获取第一个子元素
javascript方式
firstChild
举例：
//得到body的第一个子元素 var firstElement = document.body.firstChild;
注意：firstChild不推荐使用，存在兼容性问题，建议使用children[0]
jQuery方式
:first
举例：
//方法一 var firstElement = $("body :first"); //方法二 var firstElement = $("body").children(":first"); alert(firstElement.text());
b.获取最后一个子元素
javascript方式
lastChild
jQuery方式
:last
注意：
1.jQuery的":first"和":last"不仅仅可以获取第一个/最后一个子元素，主要用于获取到指定元素的第一个和最后一个元素。
2.lastChild不推荐使用，存在兼容性问题，建议使用children[最后一个子元素下标]
e.通过子元素获取父元素对象
javascript方式
parentNode
举例：
//获取a标签的父节点 document.getElementById("test").parentNode;
jQuery方式
parent()
举例：
$("#test").parent();
f.通过父元素获取所有的子元素节点
javascript方式
childNodes
jQuery方式
children()
注意：childNodes不推荐使用，存在兼容性问题，推荐使用children
UpdateTime--2017年1月21日18:56:02
7.解决单击和双击事件并存时，冲突问题
<input id="userName" type="text" value="任溶溶" />
javascript方式
window.onload = function() { var timeFun; document.getElementById("userName").onclick = function() { //这步不能省略 clearTimeout(timeFun); //单击事件300毫秒以后再执行操作 timeFun = setTimeout(function() { alert('onclick事件'); }, 300); } document.getElementById("userName").ondblclick = function() { //清除时间延迟 clearTimeout(timeFun); alert('ondblclick事件'); } }
jQuery方式
$(function() { var timeFun; $('#userName').bind({ 'click': function() { //这步不能省略 clearTimeout(timeFun); //单击事件300毫秒以后再执行操作 timeFun = setTimeout(function() { alert('onclick事件'); }, 300); }, 'dblclick': function() { //清除时间延迟 clearTimeout(timeFun); alert('ondblclick事件'); } }); });
UpdateTime--2017年2月16日13:29:58
8.解决隐藏域的onchange事件无效的问题
<input id="aa" type="hidden" value="" onchange="alert(3);"/>
window.onload=function(){ //javascript方法实现 if (document.getElementById("aa").value == "" || document.getElementById("aa").value == null) { //隐藏域的onchange方法不会自动触发，只能手动触发 document.getElementById("aa").value = "测试"; //手动触发onchange事件 document.getElementById("aa").onchange(); //或document.getElementById("aa").change(); } //jquery方法实现 if ($("#aa").val().length == 0) { $("#aa").val("测试").change(); } }
UpdateTime--2017年3月2日17:25:06
9.滚动事件
10.去除字符串前后空格
<input type="text" onblur="test(this);"/>
javascript方式
JavaScript中没有trim()方法，需要进行自定义封装
<script type="text/javascript"> String.prototype.trim = function(){ return this.replace(/^\s+(.*?)\s+$/, "$1"); } function test(obj){ var value1 = $(obj).val(); //使用javascript去除前后空格 var value3 = value1.trim(); alert(value1+","+value3); } </script>
jQuery方式
<script type="text/javascript"> String.prototype.trim = function(){ return this.replace(/^\s+(.*?)\s+$/, "$1"); } function test(obj){ //jquery取值 var value1 = $(obj).val(); //使用jQuery去除前后空格 var value2 = $.trim(value1); alert(value1+","+value2); } </script>
UpdateTime--2017年8月24日17:44:06
11.去除a标签悬浮时的下划线
javascript方式
<a href="www.baidu.com" onmouseover="this.style.textDecoration='none';">去除下划线</a>
jQuery方式
<a href="www.baidu.com" onmouseover="$(this).css('text-decoration','none');">去除下划线</a>
小结：
11.1 使用javascript操作CSS样式时，遇到样式名称中带有-的，第二个首字母大写即可；
11.2 使用jQuery操作多个CSS样式，见文章-jQuery特性。
本文来自博客园，作者：Marydon，转载请注明原文链接：https://www.cnblogs.com/Marydon20170307/p/6657059.html
