首页 > 代码库 > js与jQuery实现方式对比汇总
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-falsejQuery方式
/*使用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 checkboxValuehttp://www.mamicode.com/= ""; /** * 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 checkboxValuehttp://www.mamicode.com/= "";/** * 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.插入&获取节点元素
<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;
jQuery方式
:first
举例：
//方法一var firstElement = $("body :first");//方法二var firstElement = $("body").children(":first");alert(firstElement.text());
b.获取最后一个子元素
javascript方式
lastChild
jQuery方式
:last
注意：jQuery的":first"和":last"不仅仅可以获取第一个/最后一个子元素，主要用于获取到指定元素的第一个和最后一个元素。
c.在父元素最后插入一个子节点
javascript方式
appendChild("这里只能是标签元素")，
如：appendChild(‘div‘)，想要指定标签样式及标签体内的内容，需像最上面那样，先动态创建一个元素并指定属性，再拼接
举例：
//body标签添加一个子节点document.body.appendChild(divTag);
jQuery方式
append("可以直接拼接HTML片段或文本内容")
举例：
//方法一$("body").append(divTag);//方法二$("body").append("<div id=‘test‘></div>")
d.在父元素最前面插入一个子节点
在指定的同级元素前面插入兄弟节点
javascript方式
insertBefore(目标对象，插入位置)
该方法只能通过父节点来完成对子节点的拼接
举例：
//在a标签前面插入一个兄弟节点var aTag = document.getElementById("test");document.body.insertBefore(divTag,aTag);
jQuery方式
prepend("可以直接拼接HTML片段或文本内容")
举例：
$("#test").prepend(divTag); e.通过子元素获取父元素对象
javascript方式
parentNode
举例：
//获取a标签的父节点document.getElementById("test").parentNode;
jQuery方式
parent()
举例：
$("#test").parent(); f.通过父元素获取所有的子元素节点
javascript方式
childNodes
jQuery方式
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 =http://www.mamicode.com/="" || document.getElementById("aa").value =http://www.mamicode.com/= null) { //隐藏域的onchange方法不会自动触发，只能手动触发 document.getElementById("aa").value = "http://www.mamicode.com/测试"; //手动触发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.滚动事件
举例：滚动到屏幕底部，触发加载分页数据请求（qq空间，手机端）
javascript方式
window.onscroll = function() { //获取被卷去高度 var scrollTop = document.body.scrollTop; //获取窗口高度（可见区域高度） var windowHeight = document.documentElement.clientHeight; //获取文档高度 var documentHeight = document.body.scrollHeight; if (scrollTop + windowHeight >= documentHeight) { $(‘#nomore‘).show(); //发送Ajax请求获取分页数据 }}
jQuery方式
$(window).scroll(function() { //获取被卷去高度 var scrollTop = $(this).scrollTop(); //获取窗口高度（可见区域高度） var windowHeight = $(this).height(); //获取文档高度 var documentHeight = $(document).height(); if (scrollTop + windowHeight >= documentHeight) { $(‘#nomore‘).show(); //发送Ajax请求获取分页数据 }});
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>
js与jQuery实现方式对比汇总