cari

Rumah  >  Artikel  >  hujung hadapan web  >  Adakah jquery javascript?

Adakah jquery javascript?

青灯夜游
青灯夜游asal
2021-11-26 16:07:273997semak imbas

jquery bukan javascript. JavaScript ialah bahasa skrip yang ditafsirkan, dan jquery ialah perpustakaan fungsi JavaScript, rangka kerja yang ditulis berdasarkan bahasa JavaScript dan terdapat banyak perbezaan dalam sintaks antara keduanya.

Adakah jquery javascript?

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

jquery bukan javascript.

Javascript ialah bahasa skrip tafsiran, dan jquery ialah pustaka fungsi JavaScript, rangka kerja yang ditulis berdasarkan bahasa JavaScript

Untuk menggunakan JQuery, anda mesti meletakkannya di hadapan kod HTML Tambah rujukan kepada perpustakaan jQuery, seperti: 

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

Fail perpustakaan boleh diletakkan secara setempat, atau anda boleh terus menggunakan CDN syarikat terkenal Kelebihannya ialah CDN syarikat besar ini lebih popular, dan pengguna melawat tapak web anda Berkemungkinan ia telah dicache dalam penyemak imbas semasa melawat tapak web lain sebelum ini, jadi ia boleh mempercepatkan kelajuan pembukaan laman web. Manfaat lain adalah jelas, menjimatkan lebar jalur trafik laman web. Contohnya: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>　　//Google
或者：
<script src="http://code.jquery.com/jquery-1.6.min.js"></script> 　　//jQuery 官方　

Terdapat banyak perbezaan dalam sintaks antara jquery dan javascript

1. Manipulasi nod elemen

a.JavaScript menggunakan

siri getElement, siri pertanyaan 

6c04bd5ca3fcae76e30b72ad730ca86d
    ff6d136ddc5fdfeffaf53ff6ee95f185
        f720c45ccc45a0fb64cf9d40e6aab528哈哈bed06894275b65c1ab86501b08a632eb
        cf1867405928e86c5f34ccfa5e1981eb啦啦bed06894275b65c1ab86501b08a632eb
        0b4e0e7a752f25a03382c188595aae70呵呵bed06894275b65c1ab86501b08a632eb
        4b092670435d4bbf91b8df6a5cec99d9嘿嘿bed06894275b65c1ab86501b08a632eb
    929d1f5ca49e04fdcb27f9465b944689
    7b2cfc96e4c0d74da423eefa2832bb6a
        ff6d136ddc5fdfeffaf53ff6ee95f185
            0b4e0e7a752f25a03382c188595aae70呵呵bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6嘿嘿bed06894275b65c1ab86501b08a632eb
        929d1f5ca49e04fdcb27f9465b944689
    16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
3f1c4e4b6b16bbbd69b2ee476dc4f83a
　　document.getElementById("first");　　　　　　　　//是一个元素
　　document.getElementsByClassName("cls");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByName("na");　　　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByTagName("li");　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.querySelector("#div");　　　　　　　　//是一个元素 
　　document.querySelectorAll("#div li");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
2cacc6d41bbb37262a98f745aa00fbf0

b.JQuery menggunakan

sejumlah besar pemilih dan menggunakan $() untuk membalut pemilih 

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

2. Kendalikan nod atribut

a. JavaScript menggunakan

getAttribute("Attribute name"), setAttribute. ("Nama Atribut", "Nilai Atribut")

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

b.JQuery menggunakan

.attr() untuk menghantar satu parameter untuk mendapatkan dan menghantar dua parameter untuk menetapkan

. prop()

Kedua-dua prop dan attr boleh membaca dan menetapkan atribut teks; value Apabila

attr mengembalikan nilai atribut atau tidak ditentukan, apabila atribut yang diperiksa dibaca, ia tidak akan berubah bergantung pada sama ada ia dipilih

prop mengembalikan benar dan salah dibaca, ia bergantung pada sama ada ia dipilih Menukar

bermakna atribut yang akan diperolehi oleh attr mestilah atribut yang ditulis pada label, jika tidak 

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

tidak boleh diperolehi 3. Nod teks operasi a JavaScript menggunakan

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

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

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

b.JQuery Gunakan 
<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>

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

.text() untuk mendapatkan atau menetapkan teks dalam nod

.val() untuk mendapatkan atau menetapkan atribut nilai nilai input 

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

4 Apabila mengendalikan gaya css JavaScript:

1. Gunakan setAttribute untuk menetapkan kelas dan gaya

2. Gunakan .className untuk menambah pemilih kelas 
document.getElementById("first").setAttribute("style","color:red");

3 .gaya untuk mengubah suai secara langsung satu gaya. Ambil perhatian bahawa nama gaya mesti menggunakan sarung unta 
document.getElementById("third").className = "san";

4. Gunakan .style atau .style.cssText untuk menambah gaya peringkat bersiri: 
document.getElementById("four_times").style.fontWeight = "900";

JQuery: 
document.getElementById("five_times").style = "color: blue;";//IE不兼容
document.getElementById("six_times").style.cssText = "color: yellow;font-size : 60px;";

5. Manipulasi nod hierarki
$("#p2").css("color","yellow");

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

JavaScript:

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

1 >


    :anak pertama

  • :jenis pertama1.9

  • :anak terakhir

  • :jenis-terakhir1.9

  • :anak ke-1

  • :nth-last-child()1.9

  • :nth-last-of-type()1.9

  • :nth -of -type()1.9

  • :anak tunggal

  • :only-of-type

  • 2. Selain itu, fungsi yang sepadan juga disediakan:

first()

  • last()

  • anak()

  • ibu bapa()

  • ibu bapa()

  • adik-beradik()

    • 6 Mengikat acara pada nod

JavaScript: Model acara Dom0 dan model acara Dom2 digunakan untuk butiran, sila 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>

[Cadangan berkaitan: tutorial pembelajaran javascript

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

Atas ialah kandungan terperinci Adakah jquery javascript?. 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：Apakah array dalam JavascriptArtikel seterusnya：Apakah array dalam Javascript

Artikel berkaitan

Lihat lagi