jQuery中first()选择器的基本介绍及实例展示
定义和用法
first() 将匹配元素集合缩减为集合中的第一个元素。
语法
.first()
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.first() 方法会用第一个匹配元素构造一个新的 jQuery 对象。
请思考下面这个带有简单列表的页面：
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
我们可以对这个列表项集合应用该方法：
$('li').first().css('background-color', 'red');
实例展示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>:first选择器</title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<style type="text/css">
body{
width:7%;
height:100%;
font-size:24px;
font-weight:bold;
background-color:#CCCCFF;
text-align:center;
}
</style>
<script type="text/javascript">
$(function(){
//设置ul中的第一个li的背景色，运用到:first选择器
$("li:first").css("background-color","#00DDDD");
//设置ol中的第一个li的背景色，运用到:first选择器
$(".two li:first").css("background-color","#0000CC");
//设置ol中的第一个li的字体颜色，运用到:first选择器
$(".two li:first").css("color","#FFFFFF");
});
</script>
</head>
<body>
<div>
<ul class="one">
<li>苹果</li>
<li>梨子</li>
<li>橘子</li>
<li>西瓜</li>
<li>荔枝</li>
<li>葡萄</li>
<li>香蕉</li>
<li>香瓜</li>
</ul>
<ol class="two">
<li>苹果</li>
<li>梨子</li>
<li>橘子</li>
<li>西瓜</li>
<li>荔枝</li>
<li>葡萄</li>
<li>香蕉</li>
<li>香瓜</li>
</ol>
</div>
</body>
</html>Atas ialah kandungan terperinci jQuery中first()选择器的基本介绍及实例展示. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1359
52
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery?
Feb 28, 2024 pm 03:12 PM
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u
Petua jQuery: Cepat ubah suai teks semua teg pada halaman
Feb 28, 2024 pm 09:06 PM
Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: <
Gunakan jQuery untuk mengubah suai kandungan teks semua teg
Feb 28, 2024 pm 05:42 PM
Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:
Pengenalan kepada kemahiran dan sifat Hua Yishan Heart of the Moon Lu Shu
Mar 23, 2024 pm 05:30 PM
Di Hua Yishan Heart Moon, Lu Shu ialah seorang selebriti SSR. Dia diletakkan sebagai pendayung belakang tunggal dan mempunyai kadar pukulan kritikal yang sangat mengagumkan. Datang dan lihat pengenalan kepada kemahiran dan sifat Hua Yishan Heart of the Moon Lu Shu. Atribut Selebriti Kemahiran Selebriti 1. Lu Ming Shuzhong Penerangan Kemahiran: Lu Shu dilahirkan di Qiongqihui di Shuzhong Dia telah berlatih seni mempertahankan diri sejak dia masih kecil dan mempunyai kemahiran seni mempertahankan diri yang cemerlang. Menyebabkan kerosakan serangan asas sama dengan 100% kuasa serangan barisan belakang musuh, dan mengurangkan kemarahan sasaran sebanyak 10 mata. Atribut kemahiran: Tahap 2: Kerosakan serangan asas meningkat kepada 105%. Tahap 2: Kerosakan serangan asas dinaikkan kepada 110%, dan kemarahan sasaran dikurangkan sebanyak 15 mata. Tahap 2: Kerosakan serangan asas meningkat kepada 115%. Tahap 2: Kerosakan serangan asas dinaikkan kepada 120%, dan kemarahan sasaran dikurangkan sebanyak 20 mata. Tahap 2: Serangan asas
Pengenalan terperinci fungsi Samsung S24ai
Jun 24, 2024 am 11:18 AM
2024 ialah tahun pertama telefon mudah alih AI Semakin banyak telefon mudah alih menyepadukan berbilang fungsi AI Diperkasakan oleh teknologi pintar AI, telefon mudah alih kami boleh digunakan dengan lebih cekap dan mudah. Baru-baru ini, siri Galaxy S24 yang dikeluarkan pada awal tahun ini sekali lagi telah meningkatkan pengalaman AI generatifnya Mari lihat pengenalan fungsi terperinci di bawah. 1. Pemerkasaan AI generatif yang mendalam Siri Samsung Galaxy S24 telah membawa banyak aplikasi pintar melalui pemerkasaan Galaxy AI Fungsi ini disepadukan secara mendalam dengan Samsung One UI6.1, membolehkan pengguna memperoleh pengalaman pintar yang mudah pada bila-bila masa, dengan ketara. meningkatkan prestasi telefon bimbit Kecekapan dan kemudahan penggunaan. Fungsi carian segera yang dipelopori oleh siri Galaxy S24 adalah salah satu sorotan Pengguna hanya perlu menekan dan menahan
Apa itu Dogecoin
Apr 01, 2024 pm 04:46 PM
Dogecoin ialah mata wang kripto yang dicipta berdasarkan meme Internet, tanpa had bekalan tetap, masa transaksi yang cepat, yuran transaksi yang rendah dan komuniti meme yang besar. Penggunaan termasuk transaksi kecil, petua dan sumbangan amal. Walau bagaimanapun, bekalan tanpa had, turun naik pasaran dan statusnya sebagai syiling jenaka juga membawa risiko dan kebimbangan. Apakah Dogecoin? Dogecoin ialah mata wang kripto yang dicipta berdasarkan meme dan jenaka internet. Asal dan Sejarah: Dogecoin dicipta pada Disember 2013 oleh dua jurutera perisian, Billy Markus dan Jackson Palmer. Diilhamkan oleh meme "Doge" yang popular ketika itu, gambar lucu yang memaparkan Shiba Inu dengan bahasa Inggeris yang rosak. Ciri dan Faedah: Bekalan Tanpa Had: Tidak seperti mata wang kripto lain seperti Bitcoin
Pengenalan kepada platform semakan skor dalam talian (alat pertanyaan skor yang mudah dan pantas)
Apr 30, 2024 pm 08:19 PM
Alat pertanyaan skor pantas memberikan lebih banyak kemudahan untuk pelajar dan ibu bapa Dengan perkembangan Internet, semakin banyak institusi pendidikan dan sekolah telah mula menyediakan perkhidmatan semakan skor dalam talian. Untuk membolehkan anda menjejaki kemajuan akademik anak anda dengan mudah, artikel ini akan memperkenalkan beberapa platform semakan skor dalam talian yang biasa digunakan. 1. Kemudahan - Ibu bapa boleh menyemak markah ujian anak-anak mereka pada bila-bila masa dan di mana-mana sahaja melalui platform semakan skor dalam talian. Selagi ada sambungan Internet, sama ada di tempat kerja atau ketika keluar, ibu bapa boleh mengikuti perkembangan status pembelajaran anak-anak mereka dan memberikan bimbingan dan bantuan yang disasarkan kepada anak-anak mereka. 2. Pelbagai fungsi - sebagai tambahan kepada pertanyaan skor, ia juga menyediakan maklumat seperti jadual kursus dan pengaturan peperiksaan Banyak carian dalam talian tersedia.
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu?
Feb 29, 2024 am 09:03 AM
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Apabila menggunakan jQuery untuk mengendalikan elemen DOM, anda sering menghadapi situasi di mana anda perlu menentukan sama ada sesuatu elemen mempunyai atribut tertentu. Dalam kes ini, kita boleh melaksanakan fungsi ini dengan mudah dengan bantuan kaedah yang disediakan oleh jQuery. Berikut akan memperkenalkan dua kaedah yang biasa digunakan untuk menentukan sama ada elemen jQuery mempunyai atribut khusus, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan kaedah attr() dan operator jenis // untuk menentukan sama ada elemen mempunyai atribut tertentu
