-
.html() 獲得第一個元素的html內(nèi)容;.test() 獲得所有元素的內(nèi)容;.val()獲得第一個元素的當前值查看全部
-
右鍵菜單插件可以綁定頁面中的任意元素,綁定后,選中元素,點擊右鍵,便通過該插件彈出一個快捷菜單,點擊菜單各項名稱執(zhí)行相應操作,調(diào)用代碼如下: $(selector).contextMenu(menuId,{options}); Selector參數(shù)為綁定插件的元素,meunId為快捷菜單元素,options為配置對象。查看全部
-
搜索插件的功能是通過插件的autocomplete()方法與文本框相綁定,當文本框輸入字符時,綁定后的插件將返回與字符相近的字符串提示選擇,調(diào)用格式如下: $(textbox).autocomplete(urlData,[options]); 其中,textbox參數(shù)為文本框元素名稱,urlData為插件返回的相近字符串數(shù)據(jù),可選項參數(shù)options為調(diào)用插件方法時的配置對象。查看全部
-
$("form *")=arrt("diabled","true")查看全部
-
attr()方法是設置或者獲取元素的某項屬性值查看全部
-
jQuery UI $("#x").draggable({containment: "parent","axis":"x"}); 拖動查看全部
-
1,delay()方法延時執(zhí)行動畫效果,它的調(diào)用格式為: $(selector).delay(duration) 其中參數(shù)duration為延時值,單位是毫秒,當超過延時值時,動畫繼續(xù)執(zhí)行。 2,delay()方法延時正在執(zhí)行的動畫效果 $(function () { $("span").animate({ left: "+=100px" }, 3000, function () { $(this).animate({ height: '+=60px', width: '+=60px' }, 3000, function () { $("#tip").html("執(zhí)行完成!"); }); }); $("#btnStop").bind("click", function () { $("span").delay(3000); $("#tip").html("正在延時!"); }); });查看全部
-
1,stop()方法的功能是在動畫完成之前,停止當前正在執(zhí)行的動畫效果,這些效果包括滑動,淡入淡出和自定義的動畫,它的調(diào)用格式為: $(selector).stop([clearQueue],[goToEnd]) 其中,兩個可選項參數(shù)都是布爾類型值,前者表示是否停止正在執(zhí)行的動畫,后者表示是否完成正在執(zhí)行的動畫,默認為false 2,停止正在運動的span $(function () { $("span").animate({ left: "+=100px" }, 3000, function () { $(this).animate({ height: '+=60px', width: '+=60px' }, 3000, function () { $("#tip").html("執(zhí)行完成!"); }); }); $("#btnStop").bind("click", function () { $("span").stop(); $("#tip").html("執(zhí)行停止!"); }); });查看全部
-
1,調(diào)用animate()方法不僅可以制作簡單漸漸變大的動畫效果,而且還能制作移動位置的動畫,在移動位置前,必須將元素的position設置好,否則元素移動不了。 2,移動并且變大的span $(function () { $("span").animate({ left: "+=100px" }, 3000, function () { $(this).animate({ height: '+=30px', width: '+=30px' }, 3000, function () { $("#tip").html("執(zhí)行完成!"); }); }); });查看全部
-
1,調(diào)用animate()方法可以創(chuàng)建自定義的動畫效果,它的調(diào)用格式為: $(selector).animate({params},speed,[callback]) 其中,params參數(shù)為制作動畫效果的css屬性名和值 2,制作一個漸漸放大的正方體 <h3>制作簡單的動畫效果</h3> <span></span> <div id="tip"></div> <script type="text/javascript"> $(function () { $("span").animate({ width: "80px", height: "80px" }, 3000, function () { $("#tip").html("執(zhí)行完成!"); }); });查看全部
-
1,fadeTo()方法,可以將所選擇元素的不透明度以淡入淡出的效果調(diào)整為指定的值,該方法的格式為: $(selector).fadeTo(speed,opacity,[callback]) 2,試著給三個淡入的盒子以不同透明度淡入 $(function () { $("span").each(function (index) { switch (index) { case 0: $(this).fadeTo(3000,0.2); break; case 1: $(this).fadeTo(3000,0.4); break; case 2: $(this).fadeTo(3000,0.6); break; } }); });查看全部
-
1,fadeIn()和fadeOut()方法可以實現(xiàn)元素的淡入淡出效果,前者為淡入隱藏的元素,后者可以淡出可見的元素,調(diào)用格式: $(selector).fadeIn(speed,[callback]) $(selector).fadeOut(speed,[callback]) 2,圖片的淡入淡出 var $div1 = $("#divtest1"); var $div2 = $("#divtest2"); $div1.bind("click",function(){ $div1.fadeOut(3000,function(){ $div2.fadeIn(3000); }); }) $div2.bind("click",function(){ $div2.fadeOut(3000,function(){ $div1.fadeIn(3000); }); }) 3,下拉條的淡入淡出 $(function () { $("h4").bind("click", function () { if ($("#hidval").val() == 0) { $("ul").fadeIn("fast",function() { $("#hidval").val(1); }) } else { $("ul").fadeOut("fast",function() { $("#hidval").val(0); }) } }) });查看全部
-
1,使用slideToggle(),方法可以切換slideUp()和slideDown(),格式為: $(selector).slideToggle(speed,[callback]) 2,在頁面中,使用該方法實現(xiàn)圖片的變臉效果 var $div1 = $("#divtest1"); var $div2 = $("#divtest2"); $div1.bind("click",function(){ $div1.slideToggle(3000,function(){ $div2.slideToggle(3000) }); }) $div2.bind("click",function(){ $div2.slideToggle(3000,function(){ $div1.slideToggle(3000); }); }) 4,字條切換 $(function () { var $spn = $("#spnTip"); $("h4").bind("click", function () { $("ul").slideToggle("fast",function() { $spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑"); }) })查看全部
-
菜單工具插件可以通過<ul>創(chuàng)建多級內(nèi)聯(lián)或彈出式菜單,支持通過鍵盤方向鍵控制菜單滑動,允許為菜單的各個選項添加圖標,調(diào)用格式如下: $(selector).menu({options}); selector參數(shù)為菜單列表中最外層<ul>元素,options為menu()方法的配置對象。查看全部
-
對話框插件可以用動畫的效果彈出多種類型的對話框,實現(xiàn)JavaScript代碼中alert()和confirm()函數(shù)的功能,它的調(diào)用格式為: $(selector).dialog({options}); selector參數(shù)為顯示彈出對話框的元素,通常為<div>,options參數(shù)為方法的配置對象,在對象中可以設置對話框類型、“確定”、“取消”按鈕執(zhí)行的代碼等。查看全部
-
1,使用slideUp()和slideDown()方法在頁面中滑動元素,前者是用于向上滑動元素,后者用于向下滑動元素,他們的調(diào)用方法分別為: $(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback]) 2,要注意的是:slideDown()僅適用于被隱藏的元素,slideUp()則相反 3,例如,調(diào)用這兩個方法實現(xiàn)頁面元素的向上和向下的滑動效果 var $div=$("#divtest"); $("#btnAct").bind("click",function(){ var $this=$(this); if($this.val()=="向上滑"){ $div.slideUp(3000,function(){ $this.val("向下滑"); }); }else{ $div.slideDown(3000,function(){ $this.val("向上滑"); }) } }) }) 4,滑動和淡入淡出的區(qū)別,滑動改變元素的高度,淡入淡出改變元素的透明度 5,內(nèi)容的伸縮條案例 $(function () { $("h4").bind("click", function () { if ($("#hidval").val() == 0) { $("ul").slideUp("slow",function() { $("#hidval").val(1); }) } else { $("ul").slideDown("fast",function(){ $("#hidval").val(0); })查看全部
-
選項卡插件——tabs 使用選項卡插件可以將<ul>中的<li>選項定義為選項標題,在標題中,再使用<a>元素的“href”屬性設置選項標題對應的內(nèi)容,它的調(diào)用格式如下: $(selector).tabs({options}); selector參數(shù)為選項卡整體外圍元素,該元素包含選項卡標題與內(nèi)容,options參數(shù)為tabs()方法的配置對象,通過該對象還能以ajax方式加載選項卡的內(nèi)容。查看全部
-
1,調(diào)用toggle()方法處于顯示狀態(tài)就隱藏,處于隱藏狀態(tài)就顯示,比hide(),show()更方便 格式是:$(selector).toggle(speed,[callback]) 2,例子,調(diào)用toggle()方法以動畫的效果顯示和隱藏圖片 $("#btnAct").bind("click",function(){ var $this=$(this); $("img").toggle(3000,function(){ $this.val()=='隱藏'?$this.val('顯示'):$this.val('隱藏'); }) }) 3,用toggle()方法實現(xiàn)內(nèi)容部分的隱藏和顯示 $(function () { var $spn = $("#spnTip"); $("h4").bind("click", function () { $("ul").toggle("fast",function(){ $spn.html() == "隱藏" ? $spn.html("顯示") : $spn.html("隱藏"); }) }); });查看全部
-
除使用draggable插件拖曳任意元素外,還可以調(diào)用droppable UI插件將拖曳后的任意元素放置在指定區(qū)域中,類似購物車效果,調(diào)用格式如下: $(selector).droppable({options}) selector參數(shù)為接收拖曳元素,options為方法的配置對象,在對象中,drop函數(shù)表示當被接收的拖曳元素完全進入接收元素的容器時,觸發(fā)該函數(shù)的調(diào)用。查看全部
-
1,如果給show()和hide()設置時間和回調(diào)函數(shù),它可以實現(xiàn)一些動畫效果,執(zhí)行完之后會執(zhí)行函數(shù)。 2,例如,以動畫效果方式顯示或隱藏頁面中的圖片,同時,當顯示或隱藏完成時,對應的按鈕狀態(tài)將變?yōu)椴豢捎谩? $(function(){ $("#btnShow").bind("click",function(){ $("img").show(3000,function(){ $("#btnShow").attr("disabled",true); $("#btnHide").attr("disabled",false); }); }); $("#btnHide").bind("click",function(){ $("img").hide("slow",function(){ $("#btnShow").attr("disabled",false); $("#btnHide").attr("disabled",true); }) }) }) 3,以動畫的效果顯示或隱藏正文元素,并在回調(diào)方法中,設置控制顯示影藏狀態(tài)的hidval元素值 $(function () { $("h4").bind("click", function () { if ($("#hidval").val() == 0) { $("ul").show("slow",function(){ $("#hidval").val(1); }) } else { $("ul").show("fast",function(){ $("#hidval").val(0); }) }查看全部
-
拖曳插件draggable的功能是拖動被綁定的元素,當這個jQuery UI插件與元素綁定后,可以通過調(diào)用draggable()方法,實現(xiàn)各種拖曳元素的效果,調(diào)用格式如下: $(selector). draggable({options}) options參數(shù)為方法調(diào)用時的配置對象,根據(jù)該對象可以設置各種拖曳效果,如“containment”屬性指定拖曳區(qū)域,“axis”屬性設置拖曳時的坐標方向。查看全部
-
1,與bind()方法相同,live()方法與可以綁定元素的可執(zhí)行事件,除此相同功能外,live()方法還可以綁定動態(tài)元素,即使用代碼添加的元素事件,格式如下: $(selector).live(event,[data],fun) 2,例如:使用live()方法綁定,頁面中按鈕元素的單擊事件,而這個按鈕時通過追加的方式添加至頁面的。 $(function(){ $(#btntest).live("click",function(){ $(this).attr("disabled","true"); }) $("body",append("<input id='button' value='點擊就不可用了'/>")) 3,注意,從jq1.7開始,不再建議使用.live()方法,1.9不支持live(). 4,點擊或移除就不可用了。動態(tài)添加的按鈕 $(function () { $("#btntest").live("click mouseout", function () { $(this).attr("disabled", "true"); }) $("body").append("<input id='btntest' type='button' value='點擊或移出就不可用了' />"); }); })查看全部
-
1,下拉列表的change事件,當一個元素的值發(fā)生變化時,將會觸發(fā)change事件,例如在選擇下來列表框中的選項時,就會觸發(fā)change事件。<br> 2,示例:當頁面選擇下拉列表框中的選項時,將在<div>元素中顯示所選擇的選項內(nèi)容<br> $(function(){<br> $("select").bind("change",function(){<br> $("div").html("你選擇的是:"+$(this).val())<br> })<br> 3,根據(jù)不同選項改變下拉框的背景色。<br> $(function () {<br> $("select").bind("change", function () {<br> if ($(this).val() == "蘋果")<br> $(this).css("background-color", "red");<br> else<br> $(this).css("background-color", "green");<br> })<br> });<br> <br> }) 該事件僅適用于文本域(text field),以及 textarea 和 select 元素。 change() 函數(shù)觸發(fā) change 事件,或規(guī)定當發(fā)生 change 事件時運行的函數(shù)。 注釋:當用于 select 元素時,change 事件會在選擇某個選項時發(fā)生。當用于 text field 或 text area 時,該事件會在元素失去焦點時查看全部
-
$. param 工具函數(shù),能使對象或數(shù)組按照key/value格式進行序列化編碼,該編碼后的值常用于向服務端發(fā)送URL請求,調(diào)用格式為: $. param (obj); 參數(shù)obj表示需要進行序列化的對象,該對象也可以是一個數(shù)組,整個函數(shù)返回一個經(jīng)過序列化編碼后的字符串。 param和serialize的區(qū)別是什么?前者是對任意的參數(shù)進行URL地址格式的轉(zhuǎn)換,而后者僅屬于form提交的數(shù)據(jù)轉(zhuǎn)換。查看全部
-
1,focus事件在元素獲取焦點時觸發(fā),如點擊文本框時,觸發(fā)該事件,而blur事件則在元素丟失焦點時觸發(fā),如點擊除文本框的任何元素,都會觸發(fā)該事件。 例如:在觸發(fā)文本框的focus事件是,div元素顯示提示內(nèi)容 $(function(){ $("input").bind("focus",function(){ $("div").html("請輸入您的姓名!"); }) }) 3,非空驗證示例 $(function(){ $(input).bind("focus",function(){ $("div").html("請輸入您的姓名"); }).bind("blur",function(){ if($(this).val().length==0) $("div").html("您的名稱不能為空!"); }) })查看全部
舉報
0/150
提交
取消