js与jQuery实现方式对比汇总

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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.插入&获取节点元素

<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>

 

  

 

    

  

  

  

    

  

 

 

以上是关于js与jQuery实现方式对比汇总的主要内容,如果未能解决你的问题,请参考以下文章

原生js 与 jQuery对比

Jquery插件 easyUI属性汇总

常用的几个JQuery代码片段

EassyUI内置方法与属性

12个用得着的 JQuery 代码片段

Android WebView与JS的交互方式 最全面汇总