jquery boleh memanggil kaedah dalam dom

Dengan perkembangan pesat teknologi Web, JavaScript telah menjadi salah satu bahasa yang diperlukan untuk aplikasi Web. Sebagai salah satu perpustakaan JavaScript yang paling popular, jQuery menyediakan pembangun satu set API yang mudah difahami dan berkuasa untuk mengendalikan DOM. Dalam jQuery, anda bukan sahaja boleh memanipulasi secara langsung atribut dan gaya elemen DOM, tetapi juga memanggil kaedah dalam DOM, membolehkan pembangun membangunkan aplikasi web dengan lebih mudah dan cepat.

Dalam jQuery, kita boleh menggunakan kaedah DOM biasa, seperti addClass, removeClass, attr dan kaedah lain untuk mengendalikan elemen dan menyelesaikan operasi seperti menambah, memadam dan mengemas kini elemen. jQuery juga menyediakan beberapa kaedah unik, seperti kaedah addClass dan removeClass yang boleh menambah dan memadam gaya elemen dengan mudah, kaedah hide and show boleh menyembunyikan dan menunjukkan elemen dengan cepat, dan kaedah appendTo dan prependTo boleh menambah elemen anak dengan mudah.

Pada masa yang sama, jQuery juga menyediakan beberapa kaedah yang boleh memanggil kaedah secara terus dalam DOM dan mengembalikan hasil yang sepadan. Sebagai contoh, kaedah lebar dan ketinggian dalam jQuery boleh mengembalikan lebar dan ketinggian elemen, manakala kaedah mengimbangi dan kedudukan boleh mengembalikan kedudukan elemen dalam dokumen. Selain itu, jQuery juga menyediakan beberapa kaedah untuk mengakses dan mengubah suai atribut dan nilai elemen, seperti kaedah prop, val, html dan teks.

Mari kita lihat dengan lebih dekat cara memanggil kaedah dalam DOM dalam jQuery:

1. kaedah lebar dan tinggi

Dalam jQuery, melalui lebar dan Kaedah ketinggian boleh terus mendapatkan atau menetapkan lebar dan ketinggian elemen. Sebagai contoh, kita boleh mendapatkan lebar dan ketinggian elemen dengan cara berikut:

//获取元素宽度
var width = $("#element").width();
//获取元素高度
var height = $("#element").height();

Jika anda ingin menetapkan lebar dan ketinggian elemen, anda boleh menghantar nilai yang sepadan ke dalam kaedah, seperti berikut:

//设置元素宽度
$("#element").width(200);
//设置元素高度
$("#element").height(200);

Perlu diambil perhatian bahawa nilai di sini boleh menjadi nombor, rentetan atau fungsi panggil balik Nilai pulangan bagi fungsi panggil balik ialah nilai yang akan ditetapkan, seperti yang ditunjukkan di bawah:

//使用回调函数设置元素宽度
$("#element").width(function(index, width){
    return width * 2;
});

Dalam contoh ini, indeks dalam fungsi panggil balik ialah indeks elemen dalam koleksi, dan lebar ialah lebar semasa elemen. Nilai yang dikembalikan dalam fungsi panggil balik ialah lebar baharu yang akan ditetapkan Di sini, 2 kali lebar asal dikembalikan.

2. kaedah mengimbangi dan kedudukan

Kaedah ofset dan kedudukan masing-masing boleh memperoleh kedudukan elemen dalam dokumen dan kedudukannya berbanding dengan elemen induknya. Sama seperti kaedah lebar dan ketinggian, kedua-dua kaedah ini juga boleh lulus dalam nilai untuk menetapkan kedudukan elemen.

//获取元素在文档中的位置
var offset = $("#element").offset();
//获取元素相对于其父元素的位置
var position = $("#element").position();

Jika anda ingin menetapkan kedudukan elemen, anda boleh memanggil kaedah seperti berikut:

//设置元素在文档中的位置
$("#element").offset({
    top: 100,
    left: 200
});
//设置元素相对于其父元素的位置
$("#element").position({
    top: 100,
    left: 200
});

Apabila menggunakan kedua-dua kaedah ini untuk menetapkan kedudukan elemen, nilai dihantar dalam juga boleh menjadi fungsi panggil balik, yang Nilai pulangan fungsi akan menjadi nilai yang akan ditetapkan.

3. kaedah prop dan val

Kaedah prop dan val boleh digunakan untuk mengakses dan mengubah suai sifat dan nilai unsur. Antaranya, kaedah prop digunakan untuk mengakses dan mengubah suai atribut elemen, seperti atribut yang diperiksa dan dilumpuhkan, manakala kaedah val digunakan untuk mengakses dan mengubah suai nilai elemen.

//获取元素属性值
var checked = $("input[type='checkbox']").prop("checked");
//设置元素属性值
$("input[type='checkbox']").prop("checked", true);
//获取元素值
var value = $("input[type='text']").val();
//设置元素值
$("input[type='text']").val("Hello, jQuery!");

Dalam contoh ini, kami mendapat nilai atribut yang diperiksa bagi elemen kotak semak dan menetapkannya kepada benar; kami juga mendapat nilai kotak teks dan menetapkannya kepada "Helo, jQuery!"

4. kaedah html dan teks

kaedah html dan teks boleh digunakan untuk mendapatkan atau menetapkan kandungan HTML dan kandungan teks biasa bagi elemen tersebut. Jika parameter dimasukkan, nilai yang sepadan ditetapkan kepada kandungan elemen jika tidak, kaedah ini mengembalikan kandungan elemen.

//获取元素HTML内容
var html = $("#element").html();
//设置元素HTML内容
$("#element").html("<h1>Hello, jQuery!</h1>");
//获取元素纯文本内容
var text = $("#element").text();
//设置元素纯文本内容
$("#element").text("Hello, jQuery!");

Perlu diambil perhatian bahawa apabila menggunakan kaedah html dan teks untuk menetapkan kandungan elemen, jika parameter masuk mengandungi tag HTML, kaedah html digunakan jika tidak, kaedah teks digunakan.

Ringkasan

Dalam jQuery, anda bukan sahaja boleh memanipulasi secara langsung atribut dan gaya elemen DOM, tetapi juga memanggil kaedah dalam DOM, membolehkan pembangun membangunkan aplikasi web dengan lebih mudah dan cepat. Dalam artikel ini, kami memperkenalkan beberapa kaedah yang biasa digunakan, yang sepatutnya sangat mudah digunakan dalam pembangunan sebenar. Perlu diingatkan bahawa walaupun jQuery boleh memanggil kaedah dalam DOM, mungkin terdapat beberapa masalah dalam penggunaan sumber, jadi ia harus digunakan secara munasabah mengikut situasi khusus dalam pembangunan sebenar.

Atas ialah kandungan terperinci jquery boleh memanggil kaedah dalam dom. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!