[jQuery]選取器--畫面中某Id物件

[jQuery]強大的選取器之--畫面中某Id物件

語法

假設畫面中某物件的Id是div1,那麼jQuery取得該物件的語法是


例外的處理:

假設有好幾個物件的Id都是div1

  • 依照w3c的規則,一個畫面中物件的Id應該是唯一的(不可重複)
  • 如果有這樣的情況,可以透過其他的方式(例如:透過自訂的屬性)選到指定的物件

 

範例:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Script/jquery-1.10.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btn1').click(function () {
                $('#div1').html('<b>我是div1</b>');
            });

            $('#btn2').click(function () {
				//舊版本方式
                //$('div:[subid="1"]').addClass('st1');

				//新版方式,不要:
                $('div[subid="1"]').addClass('st1');
            });
        })
		</script>
    <style type="text/css">
        .st1
        {
            backGround-Color: yellow;
        }
    </style>
</head>
<body>

    <input type="button" id="btn1" name="btn1" value="div1" />
    <input type="button" id="btn2" name="btn2" value="取第2個div2" />
    <hr />
    <div id="div1"></div>

    <div id="div2">我是第1個div2</div>
    <div id="div3" subid="1">我是第2個div2</div>
    <div id="div4">我是第3個div2</div>
    <div id="div5">我是第4個div2</div>
    <div id="div6">我是第5個div2</div>

</body>
</html>

 

範例說明:

畫面中只有一個id為div1的物件,可是有許多個id為div2的物件

 

btn1示範透過Id來取得物件

btn2示範透過自訂屬性subid來取得物件集合

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat