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特性。