Apakah perbezaan antara javascript dan jquery-Soal Jawab bahagian hadapan-php.cn

Perbezaan: 1. JavaScript ialah bahasa pengaturcaraan yang ringan, manakala JQuery ialah perpustakaan fungsi JavaScript 2. js menggunakan kaedah DOM untuk mencipta nod elemen, dan jQuery menggunakan $ untuk mencipta elemen DOM secara langsung; kaedah nod elemen pengendalian adalah berbeza 4. Kaedah pengendalian nod atribut adalah berbeza.

Apakah perbezaan antara javascript dan jquery

Persekitaran pengendalian tutorial ini: sistem windows7, versi javascript1.8.5&&jquery1.10.0, komputer Dell G3.

1. Perbezaan penting

1. JavaScript dimasukkan ke dalam halaman HTML melalui teg <script></script> oleh semua Bahasa pengaturcaraan ringan yang dilaksanakan oleh pelayar moden.

2.JQuery ialah perpustakaan fungsi JavaScript. Dengan kata lain, ia adalah rangka kerja yang paling popular dalam JavaScript.

Untuk menggunakan JQuery, anda mesti terlebih dahulu menambah rujukan kepada perpustakaan jQuery pada permulaan kod HTML, contohnya:

<script src="js/jquery.min.js"></script>

Salin selepas log masuk

Fail perpustakaan boleh diletakkan secara setempat atau secara langsung menggunakan yang terkenal Kelebihan CDN syarikat ialah CDN syarikat besar ini lebih popular Sebelum pengguna melawati laman web anda, berkemungkinan ia telah dicache dalam pelayar semasa melawati laman web lain, jadi ia boleh mempercepatkan pembukaan laman web. Manfaat lain adalah jelas, menjimatkan lebar jalur trafik laman web. Contohnya:

<script src=></script>　　//Google

或者：

<script src="http://code.jquery.com/jquery-1.6.min.js"></script> 　　//jQuery 官方

Salin selepas log masuk

2. Perbezaan tatabahasa

1. Kaedah yang berbeza untuk mengendalikan nod elemen

a.JavaScript menggunakan

siri getElement, siri pertanyaan

<body>
    <ul>
        <li id="first">哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li class="cls">呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>
<script>
　　document.getElementById("first");　　　　　　　　//是一个元素
　　document.getElementsByClassName("cls");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByName("na");　　　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用　　
　　document.getElementsByTagName("li");　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用　　
　　document.querySelector("#div");　　　　　　　　//是一个元素 　　
　　document.querySelectorAll("#div li");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
</script

Salin selepas log masuk

b.JQuery menggunakan

sebilangan besar pemilih dan menggunakan $() untuk membalut Peranti pilihan

<body>
    <ul>
        <li id="first">哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li class="cls">呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script>　　//使用JQuery取到的是jquery对象都是一个数组，即使只有一个元素被选中,但是在使用时候不一定需要使用:eq(0)来拿到这一个在使用可以直接使用
    $("#first");　　　　　　　　　　　　
    $(".cls");
    $("li type[name=&#39;na&#39;]");
    $("li");

    $("#div");
    $("#div li");
</script>

Salin selepas log masuk

2 Kaedah yang berbeza untuk mengendalikan nod atribut

a >getAttribute("Attribute name"), setAttribute("Attribute name", "Attribute value")

<body>
    <ul>
        <li id=>哈哈</li>
    </ul>
</body>
<script>).getAttribute().setAttribute(,　　document.getElementById("first").removeAttribute("name");
</script>

Salin selepas log masuk

b.JQuery menggunakan

. attr( ) Lulus dalam satu parameter untuk mendapatkan dan masukkan dua parameter untuk menetapkan

.prop()

prop, seperti attr, boleh membaca dan menetapkan atribut teks; >

Perbezaan antara kedua-duanya ialah apabila membaca ditanda, dilumpuhkan dan atribut lain yang nama atributnya = nilai atribut

attr mengembalikan nilai atribut atau tidak ditentukan Apabila membaca atribut yang ditandakan, ia tidak akan berubah bergantung sama ada ia dipilih atau tidak

prop mengembalikan benar dan salah Apabila membaca atribut yang diperiksa, ia akan berubah mengikut sama ada ia dipilih atau tidak untuk diperolehi oleh attr mestilah atribut yang ditulis pada label, jika tidak, ia tidak boleh diperolehi kepada

3 Kaedah pengendalian nod teks yang berbeza

<body>
    <ul>
        <li id="first">哈哈</li>
    </ul>
</body><script src="js/jquery.js"></script>
<script>
　　$("#first").attr("id");
　　$("#first").attr("name","nafirst");　　$("#first").removeAttr("name");
　　$("#first").prop("id"); 　　$("#first").prop("name","nafirst"); 　　$("#first").removeProp("name");
</script>

Salin selepas log masuk

a. Penggunaan JavaScript

innerHTML: Dapatkan atau tetapkan kod HTML nod, anda boleh mendapatkan css, kembalikan dalam bentuk teks

InnerTeks: Dapatkan atau tetapkan kod HTML nod, anda tidak boleh mendapatkan css

nilai: Dapatkan teks yang dimasukkan melalui input[type='text']

b.JQuery menggunakan

<body>
    <ul>
        <li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
        <li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
    </ul>
     姓名：<input type="text" id="input">
</body>
<script>
    document.getElementById("serven_times").innerHTML;
    document.getElementById("serven_times").innerHTML = "<span style=&#39;color: #ff3a29&#39;>呵呵</span>";
    document.getElementById("eight_times").innerText;
    document.getElementById("eight_times").innerText = "啦啦";
    document.getElementById("input").value;
</script>

Salin selepas log masuk

.html() untuk mendapatkan atau menetapkan Kod html dalam nod

.text() mendapatkan atau menetapkan teks dalam nod .val () mendapatkan atau menetapkan nilai atribut nilai input

4 Terdapat cara yang berbeza untuk mengendalikan gaya css

<body>
    <ul>
        <li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
        <li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
    </ul>
     姓名：<input type="text" id="input">
</body>
<script src="/js/jquery.min.js"></script>
<script>
    $("#serven_times").html();
    $("#serven_times").html("<span style=&#39;color: #ff3a29&#39;>呵呵</span>");
    $("#eight_times").text();
    $("#eight_times").text("啦啦");
    $("#input").val();
    $("#input").val("哈哈");
</script>

Salin selepas log masuk

JavaScript. :JQuery:

* 1.使用setAttribute设置class和style
*   document.getElementById("first").setAttribute("style","color:red");
* 2.使用.className添加一个class选择器
*   document.getElementById("third").className = "san";
* 3.使用.style.样式直接修改单个样式。注意样式名必须使用驼峰命名法
*   document.getElementById("four_times").style.fontWeight = "900";
* 4.使用.style或.style.cssText添加一串行级样式：
*   document.getElementById("five_times").style = "color: blue;";//IE不兼容
*   document.getElementById("six_times").style.cssText = "color: yellow;font-size : 60px;";

Salin selepas log masuk

5 .Memanipulasi nod hierarki

$("#p2").css("color","yellow");

$("#p2").css({
    "color" : "white",
    "font-weight" : "bold",
    "font-size" : "50px",
});

Salin selepas log masuk

JavaScript:JQuery:

1 Menyediakan sejumlah besar pemilih:

*1.childNodes：获取当前节点的所有子节点（包括元素节点和文本节点）
*  children：获取当前节点的所有元素子节点（不包括文本节点）
*2.parentNode:获取当前节点的父节点
*3.firstChild:获取第一个元素节点，包括回车等文本节点
*  firstElementChild:获取第一个元素节点，不包括回车节点
*  lastChild、lastElementChild 同理
*4.previousSibling：获取当前元素的前一个兄弟节点
*  previousElementSibling：：获取当前元素的前一个兄弟节点
*  nextSibling、nextElementSibling

Salin selepas log masuk

:anak pertama

:jenis pertama
1.9
:anak terakhir
:jenis terakhir
^:anak-anak
:anak-terakhir()
1.9
^{:nth-last-of-type()}1.9
^{:nth-of-type()}1.9
^{:anak tunggal}
:sahaja-dari-jenis
1.9
2. Selain itu, fungsi yang sepadan juga disediakan:

first()　

last()　
anak()　
ibu bapa()　
ibu bapa()　
adik-beradik()
6. Berikan acara mengikat Nod

JavaScript: Kegunaan Model acara Dom0 dan model acara Dom2 untuk mendapatkan butiran, lihat blog saya sebelum ini

JQuery:

　①.

Pintasan untuk mengikat acara

②: Gunakan on untuk mengikat acara

<body>
    <button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
     $("button:eq(0)").click(function () {
        alert(123);
     });</script>

Salin selepas log masuk

7 Perbezaan antara fungsi sedia dokumen JQuery dan window.onload

<body>
    <button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
    //①使用on进行单事件的绑定
     $("button:eq(0)").on("click",function () {
        alert(456);
    });
     //②使用on同时给同一对象绑定多个事件
    $("button:eq(0)").on("click dblclick mouseover",function () {
        console.log(123);
    });
    //③使用on，给一个对象绑定多个事件
    $("button:eq(0)").on({
        "click":function () {
            console.log("click");
        },
        "mouseover":function () {
            console.log("mouseover");
        },
        "mouseover":function () {
            console.log("mouseover2");
        }
    });
    //④使用on给回调函数传参，要求是对象格式，传递的参数可以在e.data中取到；jquery中的e只能通过参数传进去，不能用window.event
    $("button:eq(0)").on("click",{"name":"zhangsan","age":15},function (e) {
        console.log(e);
        console.log(e.data);
        console.log(e.data.name);
        console.log(e.data.age);
        console.log(window.event);//js中的事件因子

    });
    
</script>

Salin selepas log masuk

. 3 Kaedah objek JavaScript dan objek JQuery tidak boleh dicampur .

*①.window.onload必须等待网页资源（包括图片等）全部加载完成后，才能执行；
*      而文档就绪函数只需要等到网页DOM结构加载完成后，即可执行
*②.window.onload在一个页面中，只能写一次，写多次会被最后一次覆盖
*      而文档就绪函数在一个页面中可以有N个

Salin selepas log masuk

1 Objek JavaScript dan objek JQuery

2 Pemindahan

① 使用$("")取到的节点为JQuery对象，只能调用JQuery方法，不能调用JavaScript方法；
*      $("#p").click(function(){})√
*      $("#p").onclick = function(){}× 使用JQuery对象调用JavaScript方法
*
*      同理，使用、document.getElement系列函数取到的对象为JavaScript对象，也不能调用JQery函数

Salin selepas log masuk

*① JQuery --->  JavaScript :使用get(index)或者[index]选中的就是JavaScript对象
*  $("p").get(0).onclick = function(){}
*  $("p").[0].onclick = function(){}
* ② JavaScript ---> JQuery :使用$()包裹JavaScript对象        (我们发现JQuery不管获得几个对象都是一个数组，可以直接给整个数组都添加某一事件)
*  var p = document.getElementById("p");
*  $(p).click(function(){});

Salin selepas log masuk

【推荐学习：javascript高级教程】

Atas ialah kandungan terperinci Apakah perbezaan antara javascript dan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!