jQuery 標籤操作 建國科技大學 資管系 饒瑞佶 2013/4 V1
注意事項 大小寫有差 要先選擇處理對象(網頁標籤) 結合Javascript撰寫需要的處理程序
標籤與屬性選擇
jQuery標籤選擇方式 $(‘p’) ：選擇 <p> 標籤，其他以此類推 $(‘p.intro’) ：選擇所有 class=“intro” 的 <p> 標籤 $(‘p#demo’) ：選擇 id=“demo” 的第一个 <p> 標籤
jQuery屬性選擇方式 $(‘[href]’) ：選擇所有具有 href 屬性的標籤 $(‘[href$=“.jpg’]’) ：選擇所有 href 值以 ".jpg" 结尾的標籤
其他 $(this)：目前 HTML標籤 $(‘p’)：所有 <p>標籤 $(‘p.intro’)：所有 class="intro" 的 <p>標籤 $(‘.intro’)：所有 class="intro" 的標籤 $(‘#intro’)：id="intro" 的第一个標籤 $(“ul li:first”)：每个 <ul> 的第一个 <li>標籤 $(“[href$=‘.jpg’]”)：選擇所有 href 值以 ".jpg" 结尾的標籤 $(“div#intro .head”)：id="intro" 的 <div> 元素中的所有 class="head" 的標籤
透過jQuery操作標籤元素事件
提示！ 使用$(‘標簽名’) 選擇處理對象 透過bind()讓標籤結合Javascript $(‘標簽名’).bind(‘事件’,function(){ }); $(‘標簽名’).事件(function(){ }); 事件：click、change、keyup、keydown、focus、blur(lost focus) 透過unbind()讓標籤脫離Javascript控制
架構 jQuery 當整個DOM載入完成後才執行
加上HTML DOM元素
加上jQuery控制
result
透過jQuery操作標籤元素
透過JS增加標籤元素 div#newelement
讓新增的標籤也可以套用jQuery // 讓新增的div也可以有click $(document).on('click', 'div', function(event){ $(this).css({'color':'red','font-weight':'bold'}); });
透過JS移除標籤
透過JS移除標籤 <script> $(document).ready(function(){ var divid; // 透過jquery增加新標籤 $('#button').click(function(){ $('body').append('<div style="border:1px solid black;cursor:pointer;width:200px;color:#FF6600" id=' + divid + '>new div element id=' + divid + '</div>'); divid=divid + 1; }); // 讓新增的div也可以有click $(document).on('click', 'div', function(event){ $(this).css({'color':'red','font-weight':'bold'}); // 刪除標籤 $('#button1').click(function(){ $('div#3').remove(); </script> </head> <body> <input type="button" id="button" value="增加新標籤2" /> <input type="button" id="button1" value="刪除新標籤2" /> </body>
透過JS移除選定的標籤