下拉框和單選按鈕多選按鈕及表格操作java

1、Web前端 / 給全選按鈕添加全選功能 $(#checkall2).toggle(function() $(inputname=groupId).each(function() $(this).attr(checked,true); ); $(this).attr(value,取消); ,function() $(inputname=groupId).each(function() $(this).attr(checked,false); ); $(this).attr(value,全選); ); /*獲得TEXT.AREATEXT的值*/ var textval = $(“#text_id”

2、).attr(“value”); /或者 var textval = $(“#text_id”).val(); /*獲取單選按鈕的值*/ var valradio = $(“inputtype=radiochecked“).val(); /*獲取一組名為(items)的radio被選中項的值*/ var item = $(inputname=itemschecked).val(); /*獲取復(fù)選框的值*/ var checkboxval = $(“#checkbox_id”).attr(“value”)； /*獲取下拉列表的值*/ var selectval = $(#select_id).v

3、al(); /文本框，文本區(qū)域： $(“#text_id”).attr(“value”,”);/清空內(nèi)容 $(“#text_id”).attr(“value”,test);/填充內(nèi)容 /多選框checkbox： $(“#chk_id”).attr(“checked”,”);/使其未勾選 $(“#chk_id”).attr(“checked”,true);/勾選 if($(“#chk_id”).attr(checked)=true) /判斷是否已經(jīng)選中 /單選組radio： $(“inputtype=radio“).attr(“checked”,2);/設(shè)置value=2的項目為當(dāng)前選中項 /下

4、拉框select： $(“#select_id”).attr(“value”,test);/設(shè)置value=test的項目為當(dāng)前選中項 $(“testtest2“).appendTo(“#select_id”)/添加下拉框的option $(“#select_id”).empty()；/清空下拉框 獲取一組名為(items)的radio被選中項的值 var item = $(inputname=itemschecked).val();/若未被選中 則val() = undefined 獲取select被選中項的文本 var item = $(“selectname=items optionse

5、lected“).text(); select下拉框的第二個元素為當(dāng)前選中值 $(#select_id)0.selectedIndex = 1; radio單選組的第二個元素為當(dāng)前選中值 $(inputname=items).get(1).checked = true; /重置表單 $(“form”).each(function() .reset(); );基本選擇器： $(#myELement) 選擇id值等于myElement的元素，id值不能重復(fù)在文檔中只能有一個id值是myElement所以得到的是唯一的元素 $(div) 選擇所有的div標(biāo)簽元素，返回div元素數(shù)組 $(.myCla

6、ss) 選擇使用myClass類的css的所有元素 $(*) 選擇文檔中的所有的元素 可以運用多種的選擇方式進行聯(lián)合選擇：例如$(#myELement,div,.myclass) 層疊選擇器： $(form input) 選擇所有的form元素中的input元素 $(#main *) 選擇id值為main的所有的子元素 $(label + input) 選擇所有的label元素的下一個input元素節(jié)點 經(jīng)測試選擇器返回的是label標(biāo)簽后面直接跟一個input標(biāo)簽的所有input標(biāo)簽元素 $(#prev div) 同胞選擇器 該選擇器返回的為id為prev的標(biāo)簽元素的所有的屬于同一個父元素的

7、div標(biāo)簽 基本過濾選擇器： $(tr:first) 選擇所有tr元素的第一個 $(tr:last) 選擇所有tr元素的最后一個 $(input:not(:checked) + span) 過濾掉：checked的選擇器的所有的input元素 $(tr:even) 選擇所有的tr元素的第0，2，4. .個元素（注意：因為所選擇的多個元素時為數(shù)組，所以序號是從0開始） $(tr:odd) 選擇所有的tr元素的第1，3，5. .個元素 $(td:eq(2) 選擇所有的td元素中序號為2的那個td元素 $(td:gt(4) 選擇td元素中序號大于4的所有td元素 $(td:ll(4) 選擇td元素中

8、序號小于4的所有的td元素 $(:header) $(div:animated) 內(nèi)容過濾選擇器： $(div:contains(John) 選擇所有div中含有John文本的元素 $(td:empty) 選擇所有的為空（也不包括文本節(jié)點）的td元素的數(shù)組 $(div:has(p) 選擇所有含有p標(biāo)簽的div元素 $(td:parent) 選擇所有的以td為父節(jié)點的元素數(shù)組 可視化過濾選擇器： $(div:hidden) 選擇所有的被hidden的div元素 $(div:visible) 選擇所有的可視化的div元素 屬性過濾選擇器： $(divid) 選擇所有含有id屬性的div元素 $(i

9、nputname=newsletter) 選擇所有的name屬性等于newsletter的input元素 $(inputname!=newsletter) 選擇所有的name屬性不等于newsletter的input元素 $(inputname=news) 選擇所有的name屬性以news開頭的input元素 $(inputname$=news) 選擇所有的name屬性以news結(jié)尾的input元素 $(inputname*=man) 選擇所有的name屬性包含news的input元素 $(inputidname$=man) 可以使用多個屬性進行聯(lián)合選擇，該選擇器是得到所有的含有id屬性并且那

10、么屬性以man結(jié)尾的元素 子元素過濾選擇器： $(ul li:nth-child(2),$(ul li:nth-child(odd),$(ul li:nth-child(3n + 1) $(div span:first-child) 返回所有的div元素的第一個子節(jié)點的數(shù)組 $(div span:last-child) 返回所有的div元素的最后一個節(jié)點的數(shù)組 $(div button:only-child) 返回所有的div中只有唯一一個子節(jié)點的所有子節(jié)點的數(shù)組 表單元素選擇器： $(:input) 選擇所有的表單輸入元素，包括input, textarea, select 和 button

11、 $(:text) 選擇所有的text input元素 $(:password) 選擇所有的password input元素 $(:radio) 選擇所有的radio input元素 $(:checkbox) 選擇所有的checkbox input元素 $(:submit) 選擇所有的submit input元素 $(:image) 選擇所有的image input元素 $(:reset) 選擇所有的reset input元素 $(:button) 選擇所有的button input元素 $(:file) 選擇所有的file input元素 $(:hidden) 選擇所有類型為hidden的i

12、nput元素或表單的隱藏域 表單元素過濾選擇器： $(:enabled) 選擇所有的可操作的表單元素 $(:disabled) 選擇所有的不可操作的表單元素 $(:checked) 選擇所有的被checked的表單元素 $(select option:selected) 選擇所有的select 的子元素中被selected的元素 15:37 瀏覽 (67) 評論 (0) 分類: jquery學(xué)習(xí) 2010-07-07縮略顯示推薦jquery學(xué)習(xí)之jQuery對表單應(yīng)用的操作各種演示文章分類:Web前端 一、表單應(yīng)用 1 獲取和失去焦點改變樣式(P142) $(function() $(:inp

13、ut).focus(function() /獲取焦點觸發(fā)事件 $(this).addClass(focus); /增加樣式 ).blur(function() /失去焦點觸發(fā)事件 $(this).removeClass(focus); /移除樣式 ); ) 2 多行文本框觸發(fā)事件改變文本框高度(P144) $(function() var $comment = $(#comment); /獲取文本框 $(.bigger).click(function() /點擊放大按鈕(.bigger)觸發(fā)事件 if ($comment.height() 500) /判斷實際高度 $comment.anima

14、te(height:+=50,400); /以動畫方式縮小高度 ); ) 3 文本框滾動條高度變化(P145) $(function() var $comment = $(#comment); /獲取文本框 #(.up).click(function() /點擊向上滾動按鈕(.up)觸發(fā)事件 if(!$comment.is(:animated) /判斷是否處于動畫隊列中，避免堆積動畫隊列 $comment.animate(scrollTop:-=50,400); /以動畫方式向上滾動滾動條 ); /（向下滾動代碼從略） ) 4 復(fù)選框全選、全不選、反選等(P146) $(function()

15、$(#checkedAll).click(function() /點擊觸發(fā)全選事件 $(name=items:checkbox).attr(checked,true); /使用attr方法更改checked屬性（注意屬性選擇器），反選設(shè)置false值即可 ); $(#checkedRev).click(function() /點擊觸發(fā)反選事件 $(name=items:checkbox).each(function() /循環(huán)每一個復(fù)選框 $(this).attr(checked, !$(this).attr(checked); /設(shè)置反值（jQuery方法） ); ); ); /如下使用原生

16、JavaScript設(shè)置反選更簡單 $(function() $(checkedRev).click(function() $(name=items:checkbox).each(function() /循環(huán)每一個復(fù)選框 this.checked = !this.checked; /設(shè)置反值（JS原生方法） ); ); ) 5 輸出復(fù)選框選中的值(P148) $(#send).click(function() /點擊觸發(fā)事件 var str=選中的是：rn; /賦值 $(name=items:checkbox:checked).each(function() /循環(huán)每一個選中的復(fù)選框 str

17、+= $(this).val() + rn; /用val()方法獲值并循環(huán)賦值 ); alert(str); /輸出str ) 6 用一個復(fù)選框來控制全部復(fù)選框的全選和反選(P149) $(#checkedAll).click(function() /觸發(fā)事件 if(this.checked) $(name=items:checkbox).attr(checked, true); /判斷賦值 else $(name=items:checkbox).attr(checked,false); /判斷賦值 ); /因為控制全選的復(fù)選框的checked和所有復(fù)選框的checked的值是相同的，所以可以

18、省略判斷如下 $(#checkedAll).click(function() $(name=items:checkbox).attr(checked, this.checked); ) 7 全選狀態(tài)下，任一復(fù)選框取消選中，控制全選的復(fù)選框則也取消選中；所有復(fù)選框同時選中時，控制全選的復(fù)選框則也被選中（聯(lián)動）(P149) /思路1： $(name=items:checkbox).click(function() /點擊任一復(fù)選框 var flag = true; /定義flag變量，初始值為true $(name=items:checkbox).each(function() /循環(huán)復(fù)選框組 i

19、f (!this.checked) flag = false; /判斷當(dāng)存在一個未選中的復(fù)選框時，flag = false ); $(#checkedAll).attr(checked,flag); /將flag變量賦給控制全選的復(fù)選框的checked屬性 ); /思路2： $(name=items:checkbox).click(function() /點擊任一復(fù)選框 var $tmp = $(name=items:checkbox); /定義臨時變量（避免重復(fù)使用選擇器） $(#checkedAll).attr(checked, $tmp.length = $tmp.filter(:che

20、cked).length); /使用filter()方法篩選出選中的復(fù)選框，和全部復(fù)選框的對象比較 length， /然后將返回的布爾值直接賦給#checkedAll ) 8 下拉框應(yīng)用，將一個下拉框中已選中的選項（或者全部選項）添加到另一個下拉框中(P150) $(#add).click(function() var $options = $(#select1 option:selected); /獲取選中項 $options.appendTo(#select2); /追加給另一個下拉框 ); $(#addAll).click(function() var $options = $(#sel

21、ect1 option); /獲取全部項 $options.appendTo(#select2); /追加給另一個下拉框 ); $(#select1).dblclick(function() /雙擊某個選項將其追加給另一個下拉框 var $options = $(option:selected,this); /獲取選中項（注意選擇器） $options.appendTo(#select2); /追加給另一個下拉框 ) 9 表單驗證，在每一個有requred類的文本框后加入“*”以提示必填項(P153) $(form :input.required).each(function() var $r

22、equired = $( *); /創(chuàng)建元素 $(this).parent().append($required); /追加到文檔中，注意parent()方法的使用 ) 10 驗證表單的用戶名和郵箱格式是否正確(P154) $(form :input).blur(function() /失去焦點事件 var $parent = $(this).parent(); /定義臨時變量 $parent.find(.formtips).remove(); /刪除以前的提醒元素，避免堆積重復(fù)提醒 /驗證用戶名 if ($(this).is(#username) if (this.value= | this

23、.value.length 6) /判斷 var errorMsg = 請輸入至少6位的用戶名.; $parent.append( + errorMsg + ); /追加錯誤提示樣式 else var okMsg = 輸入正確.; $parent.append( + okMsg + ); /追加正確提示樣式 / 驗證郵箱 if ($(this).is(#email) if (this.value= | (this.value != & !/.+.+.a-zA-Z2,4$/.test(this.value) /判斷 var errorMsg = 請輸入正確的E-mail地址.; $parent.

24、append( + errorMsg + ); /追加錯誤提示樣式 else var okMsg = 輸入正確.; $parent.append( + okMsg + ); /追加正確提示樣式 ) 11 驗證表單，阻止提交(P155) $(send).click(function() $(form .required:input).trigger(blur); /模擬觸發(fā)blur()事件 var numError = $(form .onError).length; /定義numError變量 if (numError) return false; /判斷錯誤提示個數(shù)（長度），如大于0（即存在

25、錯誤提示）則阻止提交 alert(注冊成功！); ) 12 實時驗證（輸入時驗證，比blur()驗證更及時）(P156) $(form :input).blur(function() /驗證代碼，見前文 ).keyup(function() $(this).triggerHandler(blur); /每次松開按鍵時模擬觸發(fā)blur()事件以實時驗證 ).focus(function() $(this).triggerHandler(blur); /每次得到焦點時模擬觸發(fā)blur()事件以實時驗證 21:14 瀏覽 (92) 評論 (0) 分類: jquery學(xué)習(xí) 2010-07-05縮略顯示

26、jQuery 鼠標(biāo)經(jīng)過Div底色變換（滑動變色）文章分類:Web前端 jQuery 鼠標(biāo)經(jīng)過Div底色變換 .divbox height:300px; width:200px; background:#ffffff; border:solid 1px #ccc; float:left; margin-right:10px; .divOver background:#eff8fe; border:solid 1px #d2dce3; #zztjcolor:#ffffff; #zztj a,#zztj a:link,#zztj a:visited,#zztj a:active color:#fff

27、fff; #zztj a:hover color:#ffffff; script src= $(function() /當(dāng)鼠標(biāo)滑入時將div的class換成divOver $(.divbox).hover(function() $(this).addClass(divOver); ,function() /鼠標(biāo)離開時移除divOver樣式 $(this).removeClass(divOver); ); ); 區(qū)塊A 區(qū)塊B 區(qū)塊C 提示：第一次運行請刷新頁面，因調(diào)用了遠(yuǎn)程的jquery插件，需要加載完成才能運行。 22:39 瀏覽 (404) 評論 (1) 分類: jquery學(xué)習(xí) 2010

28、-07-03縮略顯示jQuery對select操作文章分類:Web前端 /遍歷option和添加、移除option function changeShipMethod(shipping) var len = $(selectname=ISHIPTYPE option).length if(shipping.value != CA) $(selectname=ISHIPTYPE option).each(function() if($(this).val() = 111) $(this).remove(); ); else $(UPS Ground).appendTo($(selectname=

29、ISHIPTYPE); /取得下拉選單的選取值 $(#testSelect option:selected).text(); 或$(#testSelect).find(option:selected).text(); 或$(#testSelect).val(); / 記性不好的可以收藏下： 1,下拉框: var cc1 = $(.formc selectname=country optionselected).text(); /得到下拉菜單的選中項的文本(注意中間有空格) var cc2 = $(.formc selectname=country).val(); /得到下拉菜單的選中項的值 v

30、ar cc3 = $(.formc selectname=country).attr(id); /得到下拉菜單的選中項的ID屬性值 $(#select).empty();/清空下拉框/$(#select).html(); $(1111).appendTo(#select)/添加下拉框的option 稍微解釋一下: 1.selectname=country optionselected 表示具有name 屬性， 并且該屬性值為country 的select元素 里面的具有selected 屬性的option 元素； 可以看出有開頭的就表示后面跟的是屬性。 2,單選框: $(inputtype=r

31、adiochecked).val(); /得到單選框的選中項的值(注意中間沒有空格) $(inputtype=radiovalue=2).attr(checked,checked); /設(shè)置單選框value=2的為選中狀態(tài).(注意中間沒有空格) 3,復(fù)選框: $(inputtype=checkboxchecked).val(); /得到復(fù)選框的選中的第一項的值 $(inputtype=checkboxchecked).each(function() /由于復(fù)選框一般選中的是多個,所以可以循環(huán)輸出 alert($(this).val(); ); 來源：( - jQuery對select操作_龍蝦

32、_新浪博客 $(#chk1).attr(checked,);/不打勾 $(#chk2).attr(checked,true);/打勾 if($(#chk1).attr(checked)=undefined) /判斷是否已經(jīng)打勾 當(dāng)然jquery的選擇器是強大的. 還有很多方法. $(document).ready(function() $(#selectTest).change(function() /alert(Hello); /alert($(#selectTest).attr(name); /$(a).attr(href,xx.html); /window.location.href=x

33、x.html; /alert($(#selectTest).val(); alert($(#selectTest optionselected).text(); $(#selectTest).attr(value, 2); ); ); aaass 11 22 33 44 55 66 jquery radio取值，checkbox取值，select取值，radio選中，checkbox選中，select選中，及其相關(guān)獲取一組radio被選中項的值 var item = $(inputname=itemschecked).val(); 獲取select被選中項的文本 var item = $(se

34、lectname=items optionselected).text(); select下拉框的第二個元素為當(dāng)前選中值 $(#select_id)0.selectedIndex = 1; radio單選組的第二個元素為當(dāng)前選中值 $(inputname=items).get(1).checked = true; 獲取值： 文本框，文本區(qū)域：$(#txt).attr(value)； 多選框checkbox：$(#checkbox_id).attr(value)； 單選組radio： $(inputtype=radiochecked).val(); 下拉框select： $(#sel).val(

35、); 控制表單元素： 文本框，文本區(qū)域：$(#txt).attr(value,);/清空內(nèi)容 $(#txt).attr(value,11);/填充內(nèi)容 多選框checkbox： $(#chk1).attr(checked,);/不打勾 $(#chk2).attr(checked,true);/打勾 if($(#chk1).attr(checked)=undefined) /判斷是否已經(jīng)打勾 單選組radio： $(inputtype=radio).attr(checked,2);/設(shè)置value=2的項目為當(dāng)前選中項 下拉框select： $(#sel).attr(value,-sel3);/設(shè)置value=-sel3的項目為當(dāng)前選中項 $(1111 2222).appendTo(#sel)/添加下拉框的option $(#sel).empty()；/清空下拉框 獲取一組radio被選中項的值 var item = $(inputname=itemschecked).val(); 獲取select被選中項的文本 var item = $(sele