Manual_jquery kemahiran pembangunan biasa jQuery yang komprehensif dan terperinci

Artikel ini telah menyusun artikel yang sangat terperinci tentang teknik pembangunan jQuery biasa untuk rujukan anda. Kandungan khusus adalah seperti berikut

1. Rujukan tentang elemen halaman
Merujuk elemen melalui jquery's $() termasuk kaedah seperti id, kelas, nama elemen, hubungan hierarki elemen, keadaan dom atau xpath, dsb., dan objek yang dikembalikan ialah objek jquery (objek koleksi), yang tidak boleh secara langsung dipanggil kaedah dom-defined.

2. Penukaran objek jQuery dan objek dom
Hanya objek jquery boleh menggunakan kaedah yang ditakrifkan oleh jquery. Ambil perhatian bahawa terdapat perbezaan antara objek dom dan objek jquery Apabila memanggil kaedah, anda harus memberi perhatian kepada sama ada anda beroperasi pada objek dom atau objek jquery.
Objek DOM biasa secara amnya boleh ditukar menjadi objek jQuery melalui $().
Contohnya: $(document.getElementById("msg")) ialah objek jquery dan anda boleh menggunakan kaedah jquery.
Oleh kerana objek jquery itu sendiri adalah koleksi. Oleh itu, jika objek jquery hendak ditukar menjadi objek dom, salah satu item mesti diambil, yang secara amnya boleh diambil melalui indeks.
Contohnya: $("#msg")[0], $("div").eq(1)[0], $("div").get()[1], $("td")[ 5 ] Ini adalah objek dom, dan anda boleh menggunakan kaedah dalam dom, tetapi anda tidak lagi boleh menggunakan kaedah Jquery.
Cara penulisan berikut semuanya betul:

Kod adalah seperti berikut:

$("#msg").html(); 
$("#msg")[0].innerHTML; 
$("#msg").eq(0)[0].innerHTML; 
$("#msg").get(0).innerHTML;

3. Bagaimana untuk mendapatkan item koleksi jQuery
Untuk set elemen yang diperolehi, anda boleh menggunakan kaedah eq atau get(n) atau nombor indeks untuk mendapatkan item (dinyatakan mengikut indeks). Sila ambil perhatian bahawa eq mengembalikan objek jquery, dan dapatkan(n) dan Indeks mengembalikan objek elemen dom. Untuk objek jquery, anda hanya boleh menggunakan kaedah jquery, dan untuk objek dom, anda hanya boleh menggunakan kaedah dom Sebagai contoh, anda ingin mendapatkan kandungan elemen

Terdapat dua kaedah:

$(“div”).eq(2).html(); //调用jquery对象的方法 
$(“div”).get(2).innerHTML; //调用dom的方法属性 

4. Fungsi yang sama melaksanakan set dan mendapatkan
Ini benar untuk banyak kaedah dalam Jquery, terutamanya termasuk yang berikut:

Kod adalah seperti berikut:

$(“#msg”).html(); //返回id为msg的元素节点的html内容。 
$(“#msg”).html(“<b>new content</b>”); 
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content 
$(“#msg”).text(); //返回id为msg的元素节点的文本内容。 
$(“#msg”).text(“<b>new content</b>”); 
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b> 
$(“#msg”).height(); //返回id为msg的元素的高度 
$(“#msg”).height(“300″); //将id为msg的元素的高度设为300 
$(“#msg”).width(); //返回id为msg的元素的宽度 
$(“#msg”).width(“300″); //将id为msg的元素的宽度设为300 
$(“input”).val(“); //返回表单输入框的value值 
$(“input”).val(“test”); //将表单输入框的value值设为test 
$(“#msg”).click(); //触发id为msg的元素的单击事件 
$(“#msg”).click(fn); //为id为msg的元素单击事件添加函数

Begitu juga, kabur, fokus, pilih dan serahkan acara boleh mempunyai dua kaedah panggilan

5. Fungsi pemprosesan koleksi
Untuk kandungan koleksi yang dikembalikan oleh jquery, kami tidak perlu mengulanginya sendiri dan memproses setiap objek secara berasingan jquery telah menyediakan kami kaedah yang sangat mudah untuk memproses koleksi.
Termasuk dua bentuk:

Kod adalah seperti berikut:

$(“p”).each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]}) 
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。 
$(“tr”).each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) 
//实现表格的隔行换色效果 www.222gs.com 
$(“p”).click(function(){alert($(this).html())}) 
//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6. Kembangkan fungsi yang kami perlukan

Kod adalah seperti berikut:

$.extend({ 
min: function(a, b){return a < b&#63;a:b; }, 
max: function(a, b){return a > b&#63;a:b; } 
}); //为jquery扩展了min,max两个方法 

Gunakan kaedah lanjutan (dipanggil melalui "$.methodname"):

alert(“a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));

7. Gabungan kaedah sokongan
Tulisan berterusan yang dipanggil bermakna anda boleh terus memanggil pelbagai kaedah pada objek jquery.
Contohnya:

Kod adalah seperti berikut:

$(“p”).click(function(){alert($(this).html())}) 
.mouseover(function(){alert(‘mouse over event')}) 
.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});

8. Gaya elemen pengendalian
Terutamanya sertakan kaedah berikut:

Kod adalah seperti berikut:

$(“#msg”).css(“background”); //返回元素的背景颜色 
$(“#msg”).css(“background”,”#ccc”) //设定元素背景为灰色 
$(“#msg”).height(300); $(“#msg”).width(“200″); //设定宽高 
$(“#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式 
$(“#msg”).addClass(“select”); //为元素增加名称为select的class 
$(“#msg”).removeClass(“select”); //删除元素名称为select的class 
$(“#msg”).toggleClass(“select”); //如果存在（不存在）就删除（添加）名称为select的class

9. Lengkapkan fungsi pemprosesan acara
Jquery telah menyediakan kami dengan pelbagai kaedah pengendalian acara Kami tidak perlu menulis acara secara langsung pada elemen html, tetapi boleh terus menambah acara pada objek yang diperoleh melalui jquery.
Seperti:

Kod adalah seperti berikut:

$(“#msg”).click(function(){alert(“good”)}) //为元素添加了单击事件 
$(“p”).click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]}) 
//为三个不同的p元素单击事件分别设定不同的处理

Beberapa acara tersuai dalam jQuery:
(1)hover(fn1,fn2): Kaedah yang mensimulasikan peristiwa hover (tetikus bergerak ke atas objek dan keluar dari objek). Apabila tetikus bergerak ke atas elemen yang sepadan, fungsi pertama yang ditentukan akan dicetuskan. Apabila tetikus bergerak keluar dari elemen ini, fungsi kedua yang ditentukan akan dicetuskan.

Kod adalah seperti berikut:

//当鼠标放在表格的某行上时将class置为over，离开时置为out。 
$(“tr”).hover(function(){ 
$(this).addClass(“over”); 
}, 
function(){ 
$(this).addClass(“out”); 
});

(2) ready(fn): Mengikat fungsi yang akan dilaksanakan apabila DOM dimuatkan dan bersedia untuk pertanyaan dan manipulasi.

Kod adalah seperti berikut:

$(document).ready(function(){alert(“Load Success”)})

//页面加载完毕提示“Load Success”,相当于onload事件，与$(fn)等价 

(3) togol(evenFn,oddFn): Tukar fungsi untuk dipanggil setiap kali anda mengklik. Jika elemen padanan diklik, fungsi pertama yang ditentukan akan dicetuskan, dan apabila elemen yang sama diklik semula, fungsi kedua yang ditentukan akan dicetuskan. Setiap klik seterusnya mengulangi panggilan ke dua fungsi ini secara bergilir-gilir.

Kod adalah seperti berikut:

//每次点击时轮换添加和删除名为selected的class。 
$(“p”).toggle(function(){ 
$(this).addClass(“selected”); 
},function(){ 
$(this).removeClass(“selected”); 
});

(4) pencetus(eventtype): Cetuskan jenis acara tertentu pada setiap elemen padanan.
Contohnya:
$("p").trigger("click"); //Cetuskan peristiwa klik semua elemen p
(5) bind(eventtype,fn), unbind(eventtype): mengikat dan menyahjilid acara
Mengalih keluar (menambah) peristiwa terikat daripada setiap elemen padanan.
Contohnya:

Kod adalah seperti berikut:

$(“p”).bind(“click”, function(){alert($(this).text());}); //为每个p元素添加单击事件 
$(“p”).unbind(); //删除所有p元素上的所有事件 
$(“p”).unbind(“click”) //删除所有p元素上的单击事件

10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
11、几个有用的jQuery方法
$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如

代码如下:

$.each( [0,1,2], function(i, n){ alert( “Item #” + i + “: ” + n ); });

等价于：

代码如下:

var tempArr=[0,1,2]; 
for(var i=0;i<tempArr.length;i++){ 
alert(“Item #”+i+”: “+tempArr[ i ]); 
}

也可以处理json数据，如

$.each( { name: “John”, lang: “JS” }, function(i, n){ alert( “Name: ” + i + “, Value: ” + n ); }); 

结果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：

$.extend(settings, options); 
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。 
var settings = $.extend({}, defaults, options); 
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。 

可以有多个参数（合并多项并返回）
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：

var tempArr=$.map( [0,1,2], function(i){ return i + 4; }); 
tempArr内容为：[4,5,6] 
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; }); 
tempArr内容为：[2,3] 
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。 

如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str)：删除字符串两端的空白字符。
如：$.trim(” hello, how are you? “); //返回”hello,how are you? ”
12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使 用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$(“#msg”)改为jQuery(“#msg”)。
如：

代码如下:

jQuery.noConflict(); 
// 开始使用jQuery 
jQuery(“div p”).hide(); 
// 使用其他库的 $() 
$(“content”).style.display = ‘none';

jquery开发过程中经验丰富可以提高开发技巧，所以大家一定要注意平时经验的积累，希望本文所述对大家学习有所帮助。