Apakah fungsi utama jquery

Fungsi utama jquery ialah: 1. Akses bahagian bingkai halaman 2. Ubah suai prestasi halaman; halaman; 6. Secara tak segerak dengan Interaksi pelayan 7. Permudahkan operasi JavaScript yang biasa digunakan.

Persekitaran pengendalian tutorial ini: sistem Windows 10, jquery3.2.1, komputer Dell G3.

Apakah fungsi utama jquery?

Fungsi utama jQuery

1: Mengakses bahagian bingkai halaman

jQuery sangat memudahkan DOM untuk mendapatkan nod atau nod tertentu pada halaman. Kaedah tetap untuk jenis nod; tercermin dengan baik. Kemunculan jQuery menyelesaikan masalah ini dengan baik. Ia merangkum kod JavaScript supaya pelbagai pelayar boleh menggunakan standard CSS3 dengan baik.

3: Tukar kandungan halaman

Melalui API yang berkuasa dan komprehensif, jQuery boleh mengubah suai kandungan halaman dengan mudah, malah bingkai keseluruhan halaman

4: Balas acara

Anda tidak perlu mempertimbangkan isu keserasian penyemak imbas, anda boleh mengendalikan acara dengan lebih mudah; Pustaka jQuery menyediakan sejumlah besar boleh disesuaikan Tentukan kesan animasi parameter,

6: Interaksi tak segerak dengan pelayan

jQuery menyediakan set lengkap operasi berkaitan Ajax, yang sangat memudahkan pembangunan dan penggunaan interaksi tak segerak;

7: Permudahkan operasi JavaScript biasa

jQuery menyediakan banyak fungsi tambahan untuk memudahkan operasi JavaScript biasa, seperti operasi tatasusunan, operasi lelaran, dll.;

Fungsi asas jQuery

jQuery merangkum fungsi DOM, menjadikan penggunaan fungsi DOM sangat mudah dan mudah. Sama ada ia adalah pemerolehan elemen halaman web atau "penambahan, pemadaman, pengubahsuaian dan pertanyaan", ia telah dirangkumkan dengan cara yang lebih berperikemanusiaan. Mari kita lihat secara ringkas fungsi asas jQuery dan kecemerlangan reka bentuk jQuery.

1. Dapatkan elemen halaman web

Hasil yang diperoleh oleh jQuery ialah objek

Beberapa kaedah asas

Ungkapan khusus jQuery

$(document); // 选择整个文档对象
$("#myId"); // 选择id = 'myId' 的元素
$(".myClass"); // 选择class = 'myClass' 的元素
$("div.myClass"); // 选择class = 'myClass' 的div元素
$("input[name=first]"); // 选择name = 'first' 的 input 元素

Tapis lagi objek hasil pemilihan div

$("a:first"); // 选择网页中第一个a元素
$("tr:odd"); // 选择表格中的奇数行
$("#myFrom:input"); // 选择表单中的id='myFrom'的input元素
$("div:visible"); // 选择可见的div元素
$("div:gt(2)"); // 选择所有的div元素，除了前3个
$("div:animated"); // 选择当前处于动画状态的div元素

Pilih elemen lain melalui div

$("div").has("p"); // 选择包含p元素的div元素
$("div").not(".myClass"); //选择class != 'myClass' 的div元素
$("div").filter(".myClass"); // 选择class = 'myClass' 的div元素
$("div").first(); // 选择第1个div元素
$("div").eq(5); // 选择第6个div元素

2 🎜>Bahagian jQuery yang paling dipuji

• jQuery boleh melakukan operasi fungsi berterusan pada objek yang sama
  Contoh:

$("div").next("p"); // 选择div元素后面的第1个p元素
$("div").parent(); // 选择div元素的父元素
$("div").closest("from"); // 选择离div最近的from父元素
$("div").children(); // 选择div的所有子元素
$("div").siblings(); // 选择div同级的其他兄弟元素（不包括自己）

Operasi berantai ialah ciri paling mudah bagi jQuery , kerana setiap kali jQuery melaksanakan operasi fungsi, nilai pulangan masih merupakan objek jQuery bagi operasi asal, jadi anda boleh meneruskan operasi secara langsung kemudian. Kaedah

.end()

.end() kaedah mengembalikan nilai pulangan kepada objek jQuery sebelumnya

Contoh:

3. Tambah, padam, ubah suai dan semak

$("div").find("p").addClass("first").removeClass("second").html("third");
// 分解
$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first") // 添加一个class = 'first'
  .removeClass("second") // 删除一个class = 'second'
  .text("third"); // 将文本改为 third

1 Tambah

untuk mencipta elemen baharu: teruskan dalam rentetan yang mematuhi format html dalam jQuery

Elemen salin

$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first")
  .removeClass("second")
  .text("third")
  .end() // 将jQuery对象从p退回到div
  .addClass("myDiv"); // 给div添加一个class = 'myDiv'

.clone()

Mengembalikan salinan klon objek jQuery semasa

Termasuk semua elemen padanan, elemen subordinat unsur padanan, dan nod teks

2 parameter:

withDataAndEvents Sama ada hendak menyalin data dan peristiwa mengikat elemen pada masa yang sama, nilai lalai adalah palsu

let $myDiv = $("<div class=&#39;myDiv&#39;><p>Derek</p></div>"); // 创建新的元素，用变量$myDiv储存
$("body").append($myDiv); // 把$myDiv储存的新元素插入到body中
$("ul").append("<li>list</li>"); // 把新创建的li插入到ul中

deepWithDataAndEvents Sama ada hendak menyalin data dan peristiwa mengikat semua sub-elemen elemen pada masa yang sama, nilai lalai ialah Nilai parameter pertama (denganDataAndEvents)

2 >

3. Ubah

Elemen Sisip/Alih

Kesan kedua-dua kaedah di atas adalah sama

Tetapi nilai pulangannya ​​adalah berbeza, masing-masing $('div') dan $('p'), jadi ia perlu berdasarkan operasi Susulan untuk memilih

Dua kaedah lain untuk memasukkan/menggerakkan elemen

.html() Semak/tukar kandungan html

.remove() 不保留被删元素的事件
.detach() 保留被删元素的事件，便于在重新插入文档时使用
.empty() 清空元素内容，但不删除该元素（即删除元素里面的所有节点）

.text() Semak/tukar kandungan teks

.attr() Semak/tukar nilai sesuatu atribut

.width() Semak/tukar lebar elemen

$("div").insertAfter($("p")); // 把div元素移动到p元素的后面
$("p").after($("div")); // 把p元素移动到div元素的前面

.heigth() Semak/Tukar ketinggian elemen

.val() Semak/Tukar nilai elemen bentuk

Nota:

// 在div内部的 末端 插入内容
$("div").append("插入的部分");
$("插入的部分").appendTo("div");
// 在div内部的 顶端 插入内容
$("div").prepend("插入的部分");
$("插入的部分").prependTo("div");

Jika objek hasil mengandungi berbilang elemen, maka tetapkan nilai Apabila , semua elemen akan diberikan

Apabila nilainya diambil, hanya nilai elemen pertama akan dikeluarkan

.text() pengecualian, yang mengeluarkan kandungan teks semua elemen

$("h1").html(); // html没有传参，实现取出h1的值
$("h1").html("Hello"); // html传参'Hello'，实现对h1进行赋值

Pembelajaran yang disyorkan: "

Tutorial Video jQuery

"

Atas ialah kandungan terperinci Apakah fungsi utama jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!