時間：2023-09-06 04:24:01 | 來源：網(wǎng)站運營
時間：2023-09-06 04:24:01 來源：網(wǎng)站運營
jQuery設(shè)計思想：
在線咨詢
$(document) //選擇整個文檔對象 $('#myId') //選擇ID為myId的網(wǎng)頁元素 $('div.myClass') // 選擇class為myClass的div元素 $('input[name=first]') // 選擇name屬性等于first的input元素也可以是jQuery特有的表達式： $('a:first') //選擇網(wǎng)頁中第一個a元素 $('tr:odd') //選擇表格的奇數(shù)行 $('#myForm :input') // 選擇表單中的input元素 $('div:visible') //選擇可見的div元素 $('div:gt(2)') // 選擇所有的div元素，除了前三個 $('div:animated') // 選擇當(dāng)前處于動畫狀態(tài)的div元素 $('div').has('p'); // 選擇包含p元素的div元素 $('div').not('.myClass'); //選擇class不等于myClass的div元素 $('div').filter('.myClass'); //選擇class等于myClass的div元素 $('div').first(); //選擇第1個div元素 $('div').eq(5); //選擇第6個div元素有時候，我們需要從結(jié)果集出發(fā)，移動到附近的相關(guān)元素，jQuery也提供了在DOM樹上的移動方法： $('div').next('p'); //選擇div元素后面的第一個p元素 $('div').parent(); //選擇div元素的父元素 $('div').closest('form'); //選擇離div最近的那個form父元素 $('div').children(); //選擇div的所有子元素 $('div').siblings(); //選擇div的同級元素 $('div').find('h3').eq(2).html('Hello');分解開來，就是下面這樣： $('div') //找到div元素 .find('h3') //選擇其中的h3元素 .eq(2) //選擇第3個h3元素 .html('Hello'); //將它的內(nèi)容改為Hello這是jQuery最令人稱道、最方便的特點。它的原理在于每一步的jQuery操作，返回的都是一個jQuery對象，所以不同操作可以連在一起。 $('div') .find('h3') .eq(2) .html('Hello') .end() //退回到選中所有的h3元素的那一步 .eq(0) //選中第一個h3元素 .html('World'); //將它的內(nèi)容改為World $('h1').html(); //html()沒有參數(shù)，表示取出h1的值 $('h1').html('Hello'); //html()有參數(shù)Hello，表示對h1進行賦值常見的取值和賦值函數(shù)如下：div元素，需要把它移動到p元素后面。div元素移動p元素后面： $('div').insertAfter($('p'));第二種方法是使用.after()，把p元素加到div元素前面： $('p').after($('div'));表面上看，這兩種方法的效果是一樣的，唯一的不同似乎只是操作視角的不同。但是實際上，它們有一個重大差別，那就是返回的元素不一樣。第一種方法返回div元素，第二種方法返回p元素。你可以根據(jù)需要，選擇到底使用哪一種方法。 $('<p>Hello</p>'); $('<li class="new">new list item</li>'); $('ul').append('<li>list item</li>');jQuery.method()，所以可以直接使用。而那些操作元素的方法，是定義在構(gòu)造函數(shù)的prototype對象上的方法，即jQuery.prototype.method()，所以必須生成實例（即選中元素）后使用。如果不理解這種區(qū)別，問題也不大，只要把工具方法理解成，是像javascript原生函數(shù)那樣，可以直接使用的方法就行了。 $('p').click(function(){ alert('Hello'); });目前，jQuery主要支持以下事件：.bind()可以更靈活地控制事件，比如為多個事件綁定同一個函數(shù)： $('input').bind( 'click change', //同時綁定click和change事件 function() { alert('Hello'); } );有時，你只想讓事件運行一次，這時可以使用.one()方法。 $("p").one("click", function() { alert("Hello"); //只運行一次，以后的點擊不會運行 });.unbind()用來解除事件綁定。 $('p').unbind('click');所有的事件處理函數(shù)，都可以接受一個事件對象（event object）作為參數(shù)，比如下面例子中的e： $("p").click(function(e) { alert(e.type); // "click" });這個事件對象有一些很有用的屬性和方法： $('a').click(function(e) { if ($(this).attr('href').match('evil')) { //如果確認(rèn)為有害鏈接 e.preventDefault(); //阻止打開 $(this).addClass('evil'); //加上表示有害的class } });有兩種方法，可以自動觸發(fā)一個事件。一種是直接使用事件函數(shù)，另一種是使用.trigger()或.triggerHandler()。 $('a').click(); $('a').trigger('click'); $('h1').show(); //展現(xiàn)一個h1標(biāo)題常用的特殊效果如下： $('h1').fadeIn(300); // 300毫秒內(nèi)淡入 $('h1').fadeOut('slow'); // 緩慢地淡出在特效結(jié)束后，可以指定執(zhí)行某個函數(shù)。 $('p').fadeOut(300, function() { $(this).remove(); });更復(fù)雜的特效，可以用.animate()自定義。 $('div').animate( { left : "+=50", //不斷右移 opacity : 0.25 //指定透明度 }, 300, // 持續(xù)時間 function() { alert('done!'); } //回調(diào)函數(shù) );.stop()和.delay()用來停止或延緩特效的執(zhí)行。true，則關(guān)閉所有網(wǎng)頁特效。關(guān)鍵詞：思想,設(shè)計
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
