jQuery是目前最流行的JavaScript庫之一,它為開發人員提供了便利的API來處理HTML文檔、處理事件、進行動態效果及AJAX交互等。在本文中,我們將看一些jQuery API實例,以幫助您更好地了解jQuery。
// 選取元素 $('body'); // 選取元素 $('#logo'); // 選取id為logo的元素 $('.menu'); // 選取class名為menu的元素 $('p:first'); // 選取第一個元素 $('input[type="text"]'); // 選取文本輸入元素 $('a[href^="https://"]'); // 選取href屬性以https://開頭的所有元素 // 修改元素 $('a').attr('href', 'http://www.example.com'); // 將所有元素的href屬性修改為http://www.example.com $('body').css('background-color', 'white'); // 將的背景色修改為白色 $('img').hide(); // 隱藏所有元素 $('p').addClass('highlight'); // 為所有
元素添加class名為highlight // 事件處理 $('button').click(function() { // 當按鈕被點擊時執行 $('h1').text('Hello, jQuery!'); // 將
的內容改為Hello, jQuery! }); $('input').on('keyup', function() { // 當輸入框keyup事件被觸發時執行 console.log($(this).val()); // 打印出輸入框的值 }); // 動畫效果 $('img').fadeIn(); // 漸顯所有元素 $('#box').animate({ // 移動id為box的元素 left: '+=100px', top: '+=100px' }, 500); // AJAX交互 $.ajax({ url: 'http://www.example.com/api', method: 'POST', data: { name: 'John', age: 25 }, success: function(response) { console.log(response); // 顯示返回的數據 } });
以上是一些jQuery API實例,只是這里列舉了很小的一部分,jQuery提供了眾多的API,使開發人員可以更輕松地操作DOM元素、處理事件、進行動畫效果、進行AJAX交互等。希望這些實例可以幫助您更好地理解jQuery的使用。