js与jQuery实现方式对比汇总

Posted 2020-09-07

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.插入&获取节点元素

<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 == "" || 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.滚动事件
　　举例：滚动到屏幕底部，触发加载分页数据请求（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>