Rumah > Artikel > hujung hadapan web > JS与 jQuery实例对比

JS与 jQuery实例对比

小云云asal: 2018-03-22 17:08:481292semak imbas

本文主要和大家分享JS与 jQuery实例对比，主要以代码的形式和大家分享，希望能帮助到大家。

DOM 属性

// jQuery
    el.html()
    el.text() //取得所有匹配元素的内容
    el.val() //获得匹配元素的当前值// JavaScript
    el.innerHTML()
    el.innerText() //老版本火狐不兼容
    el.textContent() //老版本IE不兼容

DOM 查询

1.获取页面所有p元素    // jQuery
        $("p")    // JavaScript
        document.getElementsByTagName("p"); // IE4 +
    // Elements，表示此方法返回的是元素集合，有length属性，样式操作需配合索引
        document.getElementsByTagName("p")[0].style.color = "blue";2.根据名称获取页面DOM    // jQuery
        $("p[name = &#39;value&#39;]")    // JavaScript
        document.getElementsByName("name")3.根据ID获取DOM节点    // jQuery
        $("#idName")    // JavaScript
        document.getElementById("idName")4.根据类名获取DOM节点    // jQuery
        $(".className")    // JavaScript
        document.getElementByClassName() //IE8 +
        document.querySelectorAll(".className") //返回元素集合
        document.getElementsByClassName("className")5.根据选择器返回第一个匹配的节点(selectors CSS选择器，el DOM/元素对象)    // jQuery
        $("selectors:first")    // JavaScript, 非实时
        document.querySelector("selectors")
        document.querySelectorAll("selectors")

操作 Class

1.为DOM元素添加类    // jQuery
        $("selector").addClass("className");    // JavaScript
        el.classList.add("className");2.删除类    // jQuery
        $("selector").removeClass("className");    // JavaScript
        el.classList.remove("className");3.判断是否含有类，返回布尔值 true / false
    // jQuery
        $("selector").hasClass("classNames")    // JavaScript
        el.classList.contains("classNames")

DOM 更改

1.尾部追加DOM元素（parent 父元素 ，child 子元素）    // jQuery
        $("parent").append($("child"));    // JavaScript
        var child = document.createElement("span");  //创建元素节点
        var child = document.createTextNode("text");  //创建文本节点
        child.appendChild(document.createTextNode("content"));  //填充节点内容
        parent.appendChild(child)  //将node元素追加到尾部2.头部追加DOM元素    // jQuery
        $("parent").prepend($("child"));    // JavaScript,剪切操作
        appendChild()
        parent.insertBefore(a,b)  //在 b 之前插入 a3.删除DOM元素    // jQuery
        $("child").remove();    // JavaScript
        child.remove() //彻底删除
        el.removeChild(child);  //删除child元素,返回被删元素，暂存对象3.替换DOM元素    // jQuery
        el.replaceWith("<b>Paragraph</b>")    // JavaScript
        el.replaceChild(new,old)

添加样式或属性

1.添加CSS样式    // jQuery
        $("selector").css("color","#FFF");  //设置单个属性值
        $("selector").css({"color":"#FFF","border":"1px",...});  //设置多个属性值
    // JavaScript
        el.style.css="#FFF";2.获取CSS值    // jQuery
        $("selector").css("color");  //获取属性值
    // JavaScript
        //只能获取内嵌CSS属性中的值（style=”…”），而无法获取外部引用CSS的属性
        el.style.color;  //返回RGB值3.添加属性    // jQuery
        $("selector").attr("id","main");  //设置单个属性值
        $("selector").attr({"id":"main","name":"main",...});  //设置多个属性值
        /* attr("attributeName",fn(v1,v2))的回调函数,
            v1为被选择元素的索引(index)，v2为属性的旧值(oldvalue),返回属性新值  */
        $("selector").attr("attributeName",function(index,oldvalue){ return });        //每次点击按钮，a元素的word自增1
        //<a world = "1"></a>
        $("button").click(function(){
            $("a").attr("world",function(index,v){return ~~v+1;});
        })  
    // JavaScript（attributeName 属性名,attributeValue 属性值）
        el.setAttribute("attributeName","attributeValue");4.获取节点属性    // jQuery
        $("selector").attr("attributeName");    // JavaScript
        el.getAttribute("attributeName");5.移除节点属性    // jQuery
        $("selector").removeAttr("attributeName");    // JavaScript
        el.removeAttribute("attributename");

Event 事件

1.事件绑定（eventName 事件类型，fn(){} 事件处理函数）    // jQuery
        $("selector").on("eventName", fn(){});    // JavaScript
        el.addEventListener("eventName", fn(){});2.解绑事件    // jQuery
        $("selector").on("eventName", fn(){});    // JavaScript
        el.removeEventListener("eventName", fn(){});

显示于隐藏

// jQuery
    $("selector").show();  //显示
    $("selector").hide();  //隐藏// JavaScript
    el.style.display = &#39;&#39;;  //显示
    el.style.display = &#39;none&#39;;  //隐藏

页面加载初始化

// jQuery
    $(function(){
        //方式一
    })

    $(document).ready(function(){
        //方式二
    })

    $().ready(function(){  //$() 函数 默认为 $(document)
        //方式二
    })

    (function($){
        //方式三 - 闭包
    })(jQuery)// JavaScript
    window.onload = function(){
        //code
    }

DOM 属性

// jQuery
    el.html()
    el.text() //取得所有匹配元素的内容
    el.val() //获得匹配元素的当前值// JavaScript
    el.innerHTML()
    el.innerText() //老版本火狐不兼容
    el.textContent() //老版本IE不兼容

DOM 查询

1.获取页面所有p元素    // jQuery
        $("p")    // JavaScript
        document.getElementsByTagName("p"); // IE4 +
    // Elements，表示此方法返回的是元素集合，有length属性，样式操作需配合索引
        document.getElementsByTagName("p")[0].style.color = "blue";2.根据名称获取页面DOM    // jQuery
        $("p[name = &#39;value&#39;]")    // JavaScript
        document.getElementsByName("name")3.根据ID获取DOM节点    // jQuery
        $("#idName")    // JavaScript
        document.getElementById("idName")4.根据类名获取DOM节点    // jQuery
        $(".className")    // JavaScript
        document.getElementByClassName() //IE8 +
        document.querySelectorAll(".className") //返回元素集合
        document.getElementsByClassName("className")5.根据选择器返回第一个匹配的节点(selectors CSS选择器，el DOM/元素对象)    // jQuery
        $("selectors:first")    // JavaScript, 非实时
        document.querySelector("selectors")
        document.querySelectorAll("selectors")

操作 Class

1.为DOM元素添加类    // jQuery
        $("selector").addClass("className");    // JavaScript
        el.classList.add("className");2.删除类    // jQuery
        $("selector").removeClass("className");    // JavaScript
        el.classList.remove("className");3.判断是否含有类，返回布尔值 true / false
    // jQuery
        $("selector").hasClass("classNames")    // JavaScript
        el.classList.contains("classNames")

DOM 更改

1.尾部追加DOM元素（parent 父元素 ，child 子元素）    // jQuery
        $("parent").append($("child"));    // JavaScript
        var child = document.createElement("span");  //创建元素节点
        var child = document.createTextNode("text");  //创建文本节点
        child.appendChild(document.createTextNode("content"));  //填充节点内容
        parent.appendChild(child)  //将node元素追加到尾部2.头部追加DOM元素    // jQuery
        $("parent").prepend($("child"));    // JavaScript,剪切操作
        appendChild()
        parent.insertBefore(a,b)  //在 b 之前插入 a3.删除DOM元素    // jQuery
        $("child").remove();    // JavaScript
        child.remove() //彻底删除
        el.removeChild(child);  //删除child元素,返回被删元素，暂存对象3.替换DOM元素    // jQuery
        el.replaceWith("<b>Paragraph</b>")    // JavaScript
        el.replaceChild(new,old)

添加样式或属性

1.添加CSS样式    // jQuery
        $("selector").css("color","#FFF");  //设置单个属性值
        $("selector").css({"color":"#FFF","border":"1px",...});  //设置多个属性值
    // JavaScript
        el.style.css="#FFF";2.获取CSS值    // jQuery
        $("selector").css("color");  //获取属性值
    // JavaScript
        //只能获取内嵌CSS属性中的值（style=”…”），而无法获取外部引用CSS的属性
        el.style.color;  //返回RGB值3.添加属性    // jQuery
        $("selector").attr("id","main");  //设置单个属性值
        $("selector").attr({"id":"main","name":"main",...});  //设置多个属性值
        /* attr("attributeName",fn(v1,v2))的回调函数,
            v1为被选择元素的索引(index)，v2为属性的旧值(oldvalue),返回属性新值  */
        $("selector").attr("attributeName",function(index,oldvalue){ return });        //每次点击按钮，a元素的word自增1
        //<a world = "1"></a>
        $("button").click(function(){
            $("a").attr("world",function(index,v){return ~~v+1;});
        })  
    // JavaScript（attributeName 属性名,attributeValue 属性值）
        el.setAttribute("attributeName","attributeValue");4.获取节点属性    // jQuery
        $("selector").attr("attributeName");    // JavaScript
        el.getAttribute("attributeName");5.移除节点属性    // jQuery
        $("selector").removeAttr("attributeName");    // JavaScript
        el.removeAttribute("attributename");

Event 事件

1.事件绑定（eventName 事件类型，fn(){} 事件处理函数）    // jQuery
        $("selector").on("eventName", fn(){});    // JavaScript
        el.addEventListener("eventName", fn(){});2.解绑事件    // jQuery
        $("selector").on("eventName", fn(){});    // JavaScript
        el.removeEventListener("eventName", fn(){});

显示于隐藏

// jQuery
    $("selector").show();  //显示
    $("selector").hide();  //隐藏// JavaScript
    el.style.display = &#39;&#39;;  //显示
    el.style.display = &#39;none&#39;;  //隐藏

页面加载初始化

// jQuery
    $(function(){
        //方式一
    })

    $(document).ready(function(){
        //方式二
    })

    $().ready(function(){  //$() 函数 默认为 $(document)
        //方式二
    })

    (function($){
        //方式三 - 闭包
    })(jQuery)// JavaScript
    window.onload = function(){
        //code
    }

Atas ialah kandungan terperinci JS与 jQuery实例对比. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：原生js实现自动轮播图Artikel seterusnya：三种JS判断数组是否有重复值的办法

Artikel berkaitan

Lihat lagi