Struktur sintaks jquery terdiri daripada 3 bahagian: 1. Fungsi kilang "$()", yang akan mencari dan memilih elemen dalam dokumen HTML berdasarkan parameter dalam "()" dan mengembalikan objek jquery yang mengandungi elemen; 2. Pemilih, yang merupakan parameter dalam fungsi kilang "()" 3. Kaedah terbina dalam (fungsi), digunakan untuk mengendalikan fungsi yang dipilih.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.
Pernyataan jQuery terutamanya mengandungi tiga bahagian: $(), dokumen dan tindakan() dipanggil fungsi kilang, pemilih dan kaedah masing-masing.
Sintaks:
$(selector).action();
pemilih pemilih
$(selector)
Tindakan kaedah()
jQuery对象.addClass([样式名])
$() dalam jquery
jQuery The $
bahagian dalam mewakili pemerolehan, yang bersamaan dengan document.getElemenById("id名")
; sudah tentu, ia juga bersamaan dengan document.getElementsByClassName("class名")
dan seterusnya. Simbol
$
digunakan terutamanya untuk mendapatkan objek elemen Dengan mendapatkan objek, anda boleh menggunakan kaedah jquery untuk mengendalikannya.
$ sebenarnya adalah nama lain untuk jQuery, yang merujuk kepada objek jQuery, dan jQuery ialah fungsi yang disediakan oleh perpustakaan jQuery
Fungsi fungsi ini adalah untuk mencari dan memilih html berdasarkan parameter dalam () Untuk elemen dalam dokumen, salah satu fungsi fungsi adalah untuk menggantikan GetElementByID, tetapi () bukan sahaja boleh menjadi ID, tetapi juga pelbagai pemilih
Contohnya:
$(document)
memilih keseluruhan objek Dokumen
hanya boleh digantikan dengan $? Untuk mengelakkan konflik penamaan, perpustakaan jQuery menyediakan mekanisme tambahan untuk memberikan fungsi jQuery alias tambahan.
Contohnya:
var jq = jQuery.noConflict(); // Do something with jQuery j("div p").hide(); // Do something with another library's $() $("content").style.display = 'none';
Anda boleh menggunakan jq dan bukannya jQuery dan $ dalam kod.
Ringkasnya, $ ialah objek jquery, dan $() ialah jQuery().
Pemilih dalam jquery
Pemilih jQuery membenarkan operasi pada kumpulan elemen HTML atau elemen individu.
Pemilih jQuery "cari" (atau pilih) elemen HTML berdasarkan id, kelas, jenis, atribut, nilai atribut, dsb. Ia berdasarkan pemilih CSS sedia ada, sebagai tambahan kepada beberapa pemilih tersuai.
1. Pemilih asas
$("#test") 选择id值为test的元素,id值是唯一的所以返回单个元素。 $("div") 选择所有的div标签元素,返回div元素数组 $(".myclass") 选择使用myclass类的css的所有元素 $("*") 选取所有元素。 $("#test,div,.myclass") 选取多个元素。
2. Pemilih Penapis
$("div span") 选取<div>里的所有<span>元素 $("div >span") 选取<div>元素下元素名是<span>的子元素 $("#one +div") 选取id为one的元素的下一个<div>同辈元素 等同于$("#one").next("div") $("#one~div") 选取id为one的元素的元素后面的所有<div>同辈元素 等同于$("#one").nextAll("div") $("#one").siblings("div") 获取id为one的元素的所有<div>同辈元素(不管前后) $("#one").prev("div") 获取id为one的元素的前面紧邻的同辈<div>元素 所以 获取元素范围大小顺序依次为: $("#one").siblings("div")>$("#one~div")>$("#one +div") 或是 $("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")
4 >
6. Pemilih penapis atribut$("div:first") 选取所有<div>元素中第1个<div>元素 $("div:last") 选取所有<div>元素中最后一个<div>元素 $("input:not(.myClass)") 选取class不是myClass的<input>元素 $("input:even") 选取索引是偶数的<input>元素(索引从0开始) $("input:odd") 选取索引是基数的<input>元素(索引从0开始) $("input:eq(2)") 选取索引等于2的<input>元素 $("input:gt(4)") 选取索引大于4的<input>元素 $("input:lt(4)") 选取索引小于4的<input>元素 $(":header") 过滤掉所有标题元素,例如:h1、h2、h3等 $("div:animated") 选取正在执行动画的<div>元素 $(":focus") 选取当前获取焦点的元素
7. Pemilih penapis elemen anak
$("div:contains('Name')") 选取所有<div>中含有'Name'文本的元素 $("div:empty") 选取不包含子元素(包括文本元素)的<div>空元素 $("div:has(p)") 选取所有含有<p>元素的<div>元素 $("div:parent") 选取拥有子元素的(包括文本元素)<div>元素
8. Pemilih penapis atribut objek
$("div:hidden") 选取所有不可见的<div>元素 $("div:visible") 选取所有可见的<div>元素
9. >
$("div[id]") 选取所有拥有属性id的元素 $("input[name='test']") 选取所有的name属性等于'test'的<input>元素 $("input[name!='test']") 选取所有的name属性不等于'test'的<input>元素 $("input[name^='news']") 选取所有的name属性以'news'开头的<input>元素 $("input[name$='news']") 选取所有的name属性以'news'结尾的<input>元素 $("input[name*='news']") 选取所有的name属性包含'news'的<input>元素 $("div[title|='en']") 选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素 $("div[title~='en']") 选取属性title用空格分隔的值中包含字符en的<div>元素 $("div[id][title$='test']") 选取拥有属性id,并且属性title以'test'结束的<div>元素
kaedah (fungsi) terbina dalam jquery digunakan untuk mengendalikan fungsi yang dipilihContohnya:
$("div .one:nth-child(2)") 选取class为'one'的<div>父元素下的第2个子元素 $("div span:first-child") 选取每个<div>中的第1个<span>元素 $("div span:last-child") 选取每个<div>中的最后一个<span>元素 $("div button:only-child") 在<div>中选取是唯一子元素的<button>元素
Kaedah untuk memanipulasi gaya elemen secara langsung
$("#form1 :enabled") 选取id为'form1'的表单内所有可用元素 $("#form2 :disabled") 选取id为'form2'的表单内所有不可用元素 $("input :checked") 选取所有被选中的<input>元素 $("select option:selected") 选取所有的select 的子元素中被选中的元素
Kaedah untuk memanipulasi gaya elemen secara tidak langsung
Dalam jquery, anda boleh memanipulasi elemen secara tidak langsung dengan memanipulasi gaya atribut elemen.$(":input") 选取所有<input>,<textarea>,<select> 和 <button>元素 $(":text") 选取所有的单行文本框 $(":password") 选取所有的密码框 $(":radio") 选取所有单的选框 $(":checkbox") 选取所有的多选框 $(":submit") 选取所有的提交按钮 $(":image") 选取所有的图像按钮 $(":reset") 选取所有的重置按钮 $(":button") 选取所有的按钮 $(":file") 选取所有的上传域 $(":hidden") 选取所有不可见元素
Pengetahuan lanjutan:
model DOM
Terdapat pelbagai jenis nod dalam DOM, biasanya terbahagi kepada Terdapat tiga jenis: nod elemen, nod teks dan nod atribut.
objek DOM
Dalam JavaScript, anda boleh menggunakan getElementsByTagName() atau getElementsById() untuk mendapatkan nod elemen Hasilnya ialah objek DOM, yang boleh digunakan dalam kaedah JavaScript.
objek jQuery
Objek yang dihasilkan dengan membungkus objek DOM dengan jQuery boleh menggunakan kaedah dalam jQuery.
Contoh: $("#title").html(); //Dapatkan kod html dalam elemen dengan id tajuk
[Setara dengan document.getElementsById("title" ). seperti object , objek DOM yang sepadan boleh diperolehi melalui kaedah [index].
②Dapatkan objek DOM yang sepadan melalui kaedah get(index). 2) Tukar objek DOM kepada objek jQuery
Anda perlu membalut objek DOM dengan fungsi $() untuk mendapatkan objek jQuery.
[Pembelajaran yang disyorkan:
tutorial video jQuery,
video bahagian hadapan web]
Atas ialah kandungan terperinci Apakah bahagian yang terdiri daripada struktur sintaks jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!