首页 > 代码库 > JQuery DOM 有关代码练习
JQuery DOM 有关代码练习
//累加你选择的个数<!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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/#" 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="http://www.mamicode.com/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="http://www.mamicode.com/#" title="这是默认的提示">这是默认的提示</a> </body></html>
JQuery DOM 有关代码练习