標籤：
//累加你選擇的個數<!DOCTYPE html><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.js"></script> <script> $(function () { var xg = "<li title=‘西瓜‘>西瓜</li>"; var xj = "<li title=‘香蕉‘>香蕉</li>"; var ll = "<li title=‘榴蓮‘>榴蓮</li>"; //添加 $(xg).appendTo("ul"); $(xj).prependTo("ul"); //在橘子後面添加榴蓮 $(ll).insertAfter("[title = 橘子]"); //遍曆ul的子項目li 為沒個li都添加點擊事件 $("ul").children().click(function () { //擷取點擊的 title 屬性值 var ti = $(this).attr("title"); //如果ol li裡面的內容不包括此內容 代表ol 裡面沒有此標籤 if ($("ol li:contains(" + ti + ")").length == 0) { //添加此標籤到ol中 $(this).clone().appendTo("ol"); //為此標籤的後面添加一個span標籤 用來計數 $("ol li:contains(" + ti + ")").append("<span>1</span>"); } else { //先得到span裡面的數字 var num = $("ol li:contains(" + ti + ") span").text(); //進行累加 $("ol li:contains(" + ti + ") span").text(parseInt(num) + 1); } }); }); </script></head><body> <ul> <li title=‘蘋果‘>蘋果</li> <li title=‘橘子‘>橘子</li> <li title=‘菠蘿‘>菠蘿</li> </ul> <ol></ol></body></html>
讓提示條跟這滑鼠走
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> #d1{ background-color:#888; color:#444; border:solid 1px #444; position:absolute; /*可以手動定位此標籤*/ } </style> <script src="jquery.js"></script> <script> $(function () { //滑鼠進入A標籤事件 $("a").mouseover(function () { //取到A標籤的title屬性的值 var str = $(this).attr("title"); //產生div字串 var tip = ‘<div id="d1">‘ + str + ‘</div>‘; //往body中添加一個div $(tip).appendTo("body"); }).mouseout(function () { //滑鼠划出事件 //刪除div $("#d1").remove(); }).mousemove(function (e) { //滑鼠移動事件 e可以用來定位滑鼠位子 //因為在CSS樣式中絕對位置了，可以設定left 和top屬性 left:距離頁面左邊距離 top:距離頁面上面距離 $("#d1").css({ "left": "" + (e.pageX + 15) + "px", "top": "" + (e.pageY + 15) + "px" }); }); }); </script></head><body> <a href="#" title="這是預設的提示">這是預設的提示</a> </body>
</html>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> #d1{ background-color:#888; color:#444; border:solid 1px #444; position:absolute; /*可以手動定位此標籤*/ } </style> <script src="jquery.js"></script> <script> $(function () { //滑鼠進入A標籤事件 $("a").mouseover(function () { //取到A標籤的title屬性的值 var str = $(this).attr("title"); //產生div字串 var tip = ‘<div id="d1">‘ + str + ‘</div>‘; //往body中添加一個div $(tip).appendTo("body"); }).mouseout(function () { //滑鼠划出事件 //刪除div $("#d1").remove(); }).mousemove(function (e) { //滑鼠移動事件 e可以用來定位滑鼠位子 //因為在CSS樣式中絕對位置了，可以設定left 和top屬性 left:距離頁面左邊距離 top:距離頁面上面距離 $("#d1").css({ "left": "" + (e.pageX + 15) + "px", "top": "" + (e.pageY + 15) + "px" }); }); }); </script>
</head><body> <a href="#" title="這是預設的提示">這是預設的提示</a> </body></html>
JQuery DOM 有關代碼練習
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
