Download presentation
Presentation is loading. Please wait.
1
jQuery 標籤操作 建國科技大學 資管系 饒瑞佶 2013/4 V1
2
注意事項 大小寫有差 要先選擇處理對象(網頁標籤) 結合Javascript撰寫需要的處理程序
3
標籤與屬性選擇
4
jQuery標籤選擇方式 $(‘p’) ：選擇 <p> 標籤，其他以此類推
$(‘p.intro’) ：選擇所有 class=“intro” 的 <p> 標籤 $(‘p#demo’) ：選擇 id=“demo” 的第一个 <p> 標籤
5
jQuery屬性選擇方式 $(‘[href]’) ：選擇所有具有 href 屬性的標籤
$(‘[href$=“.jpg’]’) ：選擇所有 href 值以 ".jpg" 结尾的標籤
![jQuery屬性選擇方式 $(‘[href]’) ：選擇所有具有 href 屬性的標籤](http://slidesplayer.com/slide/16757874/97/images/5/jQuery%E5%B1%AC%E6%80%A7%E9%81%B8%E6%93%87%E6%96%B9%E5%BC%8F+%24%28%E2%80%98%5Bhref%5D%E2%80%99%29+%EF%BC%9A%E9%81%B8%E6%93%87%E6%89%80%E6%9C%89%E5%85%B7%E6%9C%89+href+%E5%B1%AC%E6%80%A7%E7%9A%84%E6%A8%99%E7%B1%A4.jpg "$(‘[href$= .jpg’]’) ：選擇所有 href 值以 .jpg 结尾的標籤.")
6
其他 $(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" 的標籤
7
透過jQuery操作標籤元素事件
8
提示！ 使用$(‘標簽名’) 選擇處理對象 透過bind()讓標籤結合Javascript
$(‘標簽名’).bind(‘事件’,function(){ }); $(‘標簽名’).事件(function(){ }); 事件：click、change、keyup、keydown、focus、blur(lost focus) 透過unbind()讓標籤脫離Javascript控制
9
架構 jQuery 當整個DOM載入完成後才執行
10
加上HTML DOM元素
11
加上jQuery控制
12
result
13
透過jQuery操作標籤元素
14
透過JS增加標籤元素 div#newelement
15
讓新增的標籤也可以套用jQuery // 讓新增的div也可以有click
$(document).on('click', 'div', function(event){ $(this).css({'color':'red','font-weight':'bold'}); });
16
透過JS移除標籤
17
透過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>
18
透過JS移除選定的標籤
Similar presentations
![雅安市教师资格定期注册 政策解读 雅安市教育局政策法规科. 一、执行文件： 一、执行文件： 1 、《四川省教育厅关于印发《四川省中小学教师资格定期 注册试点实施细则（试行）》的通知》（川教 [2014]60 号）； 1 、《四川省教育厅关于印发《四川省中小学教师资格定期 注册试点实施细则（试行）》的通知》（川教.](/40/11047852/big_thumb.jpg "雅安市教师资格定期注册 政策解读 雅安市教育局政策法规科. 一、执行文件： 一、执行文件： 1 、《四川省教育厅关于印发《四川省中小学教师资格定期 注册试点实施细则（试行）》的通知》（川教 [2014]60 号）； 1 、《四川省教育厅关于印发《四川省中小学教师资格定期 注册试点实施细则（试行）》的通知》（川教.>")
