jquery表單對象屬性過濾選取器用法

來源:互聯網
上載者:User

jquery表單對象屬性過濾選取器用法

   本文執行個體講述了jquery表單對象屬性過濾選取器用法。分享給大家供大家參考。具體分析如下:

  ?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>表單對象屬性過濾選取器</title>

<script src="jquery-1.6.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

//=========舉例1===========================

//:enabled 用法: $(”input:enabled”) 傳回值 集合元素

//說明: 匹配所有可用元素.意思是尋找所有input中不帶有disabled=”disabled”的input.不為disabled,

//當然就為enabled啦.

$("input:enabled").val("我是有效按鈕");

//=========舉例2===========================

//:disabled 用法: $(”input:disabled”) 傳回值 集合元素

//說明: 匹配所有不可用元素.與上面的那個是相對應的.

$("input:disabled").val("我是無效的按鈕");

//=========舉例3===========================

//:checked 用法: $(”input:checked”) 傳回值 集合元素

//說明: 匹配所有選中的被選中元素(複選框、單選框等,不包括select中的option).這話說起來有些繞口.

//...<1> 提取所有選中的name='love'的複選框

$("#btnTest").click(function () {

ShowElements($("input[name='love']:checked")); //第一種寫法

//ShowElements($("[name='love']:checked")) //第二種寫法

});

//=========舉例4===========================

//:selected 用法: $(”select option:selected”) 傳回值 集合元素

//說明: 匹配所有選中的option元素.

//...<1> 所有name='city'的下拉框的選中項

$("#btnTest2").click(function () {

ShowElements($("select[name='city'] option:selected"));

});

//...<2> 所有name='prov'的下拉框的選中項

//$("#btnTest2").click(function () {

// ShowElements($("select[name='prov'] option:selected"));

//});

});

function ShowElements(arr) {

//alert(arr.length);

var output = "";

for (var i = 0; i < arr.length; i++) {

if (output == "") {

output = arr.eq(i).val();

}

else {

output += "," + arr.eq(i).val();

}

}

alert(output);

}

</script>

</head>

<body>

<input type="button" disabled="disabled" value="button1" />

<input type="button" value="button2" />

<input type="button" value="button3" />

<input type="button" disabled="disabled" value="button4" />

<input type="button" id="btnTest" value="點擊我檢查複選框" />

<input type="checkbox" name="love" value="1" />足球

<input type="checkbox" name="love" value="2" />籃球

<input type="checkbox" name="love" value="3" />排球

<input type="checkbox" name="Other" value="3" />非愛好類<br />

我是下拉框<input type="button" id="btnTest2" value="點擊我檢查下拉框" />

<select name="city">

<option value='beijing'>北京</option>

<option value='shanghai'>上海</option>

<option value='shenzhen'>深圳</option>

</select>

<select name="prov">

<option value='jiangxi'>江西省</option>

<option value='shichuan'>四川省</option>

<option value='guangdong'>廣東省</option>

</select>

</body>

</html>

  希望本文所述對大家的jQuery程式設計有所協助。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.