Fahami operasi asas jquery pada elemen dalam sepuluh minit

Artikel ini membawakan ringkasan fungsi umum jquery kepada anda, termasuk cara mendapatkan, mengalih, mencipta dan mengubah suai elemen saya harap ia akan membantu semua orang.

Pengenalan kepada jQuery

jQuery ialah perpustakaan kelas JS yang menyediakan fungsi tertentu dalam JS Enkapsulasi menjadikan operasi DOM mudah, menjadikan kod ringkas dan mudah digunakan, dan menyokong penulisan rantai dan mempunyai keserasian yang baik.

Idea reka bentuk dan penggunaan utama jQuery adalah untuk memilih elemen halaman web dan kemudian melakukan beberapa operasi padanya.

Perkara istimewa tentang jQuery ialah selepas menggunakan jQuery untuk mendapatkan elemen yang sepadan, ia tidak mengembalikan elemen yang sepadan ini Sebaliknya, ia mengembalikan objek jQuery (objek yang dibina oleh jQuery), dan objek ini boleh mengendalikan yang sepadan ini. elemen.

Fungsi yang boleh dicapai oleh jQuery pasti boleh dicapai oleh JS, tetapi tidak semestinya sebaliknya.

Biar window.jQuery = window.$, dan singkatkan jQuery sebagai $.

Cara mendapatkan elemen dengan jQuery

Cuma letakkan ungkapan pilihan ke dalam pembina $(), dan kemudian dapatkan elemen yang dipilih. Ungkapan pemilihan boleh menjadi pemilih CSS atau ungkapan khusus jQuery.

// CSS选择器
$(document) // 选择整个文档对象
$('#xxxID') // 选择ID为xxx的元素
$('div.xxxClass') // 选择Class为xxx的元素
$('input[name=first]') // 选择类名属性为first的元素

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

Cara jQuery mencipta elemen

Hanya hantar elemen baharu terus ke dalam pembina jQuery. Elemen baharu yang dicipta oleh

tidak akan dimasukkan ke dalam halaman secara automatik. Kami juga perlu menyatakan secara eksplisit lokasi di mana ia dimasukkan ke dalam halaman.

Contohnya: buat sepasang tag

$(function(){
let $h1 = $(&#39;<h1></h1>&#39;) // 创建元素h1
$(&#39;body&#39;).append($h1) // 将元素h1放入到body里（用append表示成为body的最后一个子元素）
}

Gunakan div sebagai contoh:

$('div').prepend('') // 给div添加一个大儿子（即添加到最前）
$('div').append(选择器/jQuery对象) // 给div添加一个小儿子（即添加到最后）
$(&#39;<h2>xxx</h2>&#39;).appendTo(选择器/jQuery对象) // 在选择器选中的元素的子元素里，将“xxx”添加到最后

Bagaimana jQuery menggerakkan elemen

Kaedah 1: Gerakkan elemen terus

$('div').insertAfter($('p')) // 将元素div移动到元素p后面

Kaedah 2: Gerakkan elemen lain supaya fungsi sasaran mencapai kedudukan yang kita mahu

$('p').after($('div')) // 把元素p放到元素div前

Perbezaan antara dua kaedah ini: objek yang dikembalikan adalah berbeza. Objek yang dikembalikan dengan kaedah satu ialah div, dan objek yang dikembalikan melalui kaedah dua ialah p.

Cara yang berbeza untuk menggerakkan elemen:

.insertAfter()和.after() // 在现存元素的外部，从后面插入元素
.insertBefore()和.before() // 在现存元素的外部，从前面插入元素
.appendTo()和.append() // 在现存元素的内部，从后面插入元素
.prependTo()和.prepend() // 在现存元素的内部，从前面插入元素

Cara jQuery mengubah suai atribut elemen

Gunakan attr() untuk mengubah suai atribut elemen dan kandungannya, attr ialah singkatan atribut, iaitu singkatan setAttribute&getAttribute dalam JS. Sama ada attr mengambil nilai atau memberikan nilai ditentukan oleh parameter fungsi.

Contohnya:

$('img').attr('width','100px') // 为属性'width'赋值'100px'

Penggunaan:

$(selector).attr(attribute) // 返回被选元素的属性值
$(selector).attr(attribute.value) // 返回被选元素的属性&值
$(selector).attr(attribute,function(index,oldvalue)) // 用函数返回值设置被选元素的属性&值
$(selector).attr({attribute1:value,attribute2:value...}) // 为被选一个及以上的元素设置属性&值，可一次修改多个属性的属性值

Tambahan: Kaedah penggunaan ketiga di atas bermaksud: gunakan nilai pulangan fungsi kepada atribut Berikan atribut nilai, fungsi ini boleh menerima dan menggunakan nilai indeks pemilih dan nilai atribut semasa. Contohnya:

$('button').click(function(){
    $('img').attr('width',function(n,v){
     return v-50;  // 点击按钮图片宽度减少50
    })
})

operasi rantai jQuery

Selepas memilih elemen halaman web, lakukan satu siri operasi padanya dan semua operasi boleh disambungkan Bersama dan ditulis dalam bentuk rantai, ini adalah operasi rantai jQuery.

Contohnya: $('div').find('h3').eq(2).html('Hello'); Baris kod ini boleh dibahagikan seperti berikut

$('div') // 找到div元素
  .find('h3') // 选择其中的h3元素
  .eq(2) // 选择第3个h3元素
  .html('Hello'); // 将它的内容改为Hello

jQuery juga menyediakan operasi belakang .end(), supaya hasil operasi boleh diundur selangkah ke belakang.

$('div')
　.find('h3')
　.eq(2)
　.html('Hello')
　.end() // 退回到选中所有的h3元素的那一步
　.eq(0) // 选中第一个h3元素
　.html('World') // 将它的内容改为World

Tutorial video berkaitan yang disyorkan: tutorial video jQuery

Atas ialah kandungan terperinci Fahami operasi asas jquery pada elemen dalam sepuluh minit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!