2017年1月23日 星期一

JQUERY 取值 設定值 用法

參考引用:[JS] JQUERY 取值 設定值 用法
--

  1. 最近常常前端寫一寫
  2. 發現忘了OO怎麼取值 怎麼設定值
  3. 就趁機整理一份成一篇文章好了
  4. 主要應該分成 取值 取自定屬性 設定值
  5. TextBox (最基本的)
  6. Html定義
  7. <input type="text" name="text1" value="text" test="測試用" />
  8. 取值
  9. $('input[name="text1"]').val();
  10. 取自訂屬性
  11. $('input[name="text1"]').attr("test");
  12. 設定值
  13. $('input[name="text1"]').val("text123");
  14. 設定自訂屬性
  15. $('input[name="text1"]').attr("test","測試用123");
  16. Checkbox
  17. Html定義
  18. <label>
  19. <input type="checkbox" name="check1" value="a" test="b" />Check
  20. </label>
  21. 取值
  22. $('input[name="check1"]').val()
  23. 取自訂屬性
  24. $('input[name="check1"]').attr("test")
  25. 取得是否被勾選
  26. $('input[name="check1"]').prop("checked");
  27. 設定值
  28. $('input[name="check1"]').val("text123");
  29. 設定自訂屬性
  30. $('input[name="check1"]').attr("test","測試用123");
  31. 設定勾選
  32. $('input[name="check1"]').prop("checked",true);
  33. RadioButton
  34. Html定義
  35. <label><input type="radio" name="radio1" value="0" text="test1" checked />測試</label>
  36. <label><input type="radio" name="radio1" value="1" text="test2" />實作</label>
  37. 取得現在選取的值
  38. $('input[name="radio1"]:checked').val()
  39. 取現在選取的自訂屬性
  40. $('input[name="radio1"]:checked').attr("text")
  41. 設定測試為勾選狀態
  42. $('input[name="radio1"][value="0"]').prop("checked",true);
  43. 取得此欄位是否為勾選狀態
  44. $('input[name="radio1"][value="0"]').is(':checked')
  45. Dropdownlist
  46. Html定義
  47. <select name="select1">
  48. <option value="val1" Text="text1" test="test1" >1</option>
  49. <option value="val2" Text="text2" test="test2" SELECTED>2</option>
  50. </select>
  51. 取得現在選取的值
  52. $('select[name="select1"]').val()
  53. 取得現在選取的自訂屬性 (兩種都可以)
  54. $('option:selected', 'select[name="select1"]').attr('test');
  55. $( 'select[name="select1"] :selected').attr('test');
  56. 設定現在選取的值 (兩種效果一樣)
  57. $('select[name="select1"]').val("val1");
  58. $('select[name="select1"]').val("1");
  59. 取得此選項是否為勾選狀態
  60. $('select[name="select1"] option[value="val2"]').is(':selected');
  61. 取所有option 看是否為勾選
  62. $('select[name="select1"] option').each(function(){
  63. alert($(this).is(':selected'));
  64. });

沒有留言:

張貼留言