1. //累加你选择的个数
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <script src="jquery.js"></script>
  8.     <script>
  9.         $(function () {
  10.             var xg = "<li title='西瓜'>西瓜</li>";
  11.             var xj = "<li title='香蕉'>香蕉</li>";
  12.             var ll = "<li title='榴莲'>榴莲</li>";
  13.             //添加
  14.             $(xg).appendTo("ul");
  15.             $(xj).prependTo("ul");
  16.             //在橘子后面添加榴莲
  17.             $(ll).insertAfter("[title = 橘子]");
  18.             //遍历ul的子元素li 为没个li都添加点击事件
  19.             $("ul").children().click(function () {
  20.                 //获取点击的 title 属性值
  21.                 var ti = $(this).attr("title");
  22.                 //如果ol li里面的内容不包括此内容  代表ol 里面没有此标签
  23.                 if ($("ol li:contains(" + ti + ")").length == 0) {
  24.                     //添加此标签到ol中
  25.                     $(this).clone().appendTo("ol");
  26.                     //为此标签的后面添加一个span标签  用来计数
  27.                     $("ol li:contains(" + ti + ")").append("<span>1</span>");
  28.                 }
  29.                 else {
  30.                     //先得到span里面的数字
  31.                     var num = $("ol li:contains(" + ti + ") span").text();
  32.                     //进行累加
  33.                     $("ol li:contains(" + ti + ") span").text(parseInt(num) + 1);
  34.                 }
  35.             });
  36.         });
  37.     </script>
  38. </head>
  39. <body>
  40.     <ul>
  41.         <li title='苹果'>苹果</li>
  42.         <li title='橘子'>橘子</li>
  43.         <li title='菠萝'>菠萝</li>
  44.     </ul>
  45.     <ol></ol>
  46. </body>
  47. </html>

让提示条跟这鼠标走

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style>
  7.         #d1{
  8.             background-color:#888;
  9.             color:#444;
  10.             border:solid 1px #444;
  11.             position:absolute;     /*可以手动定位此标签*/
  12.         }
  13.     </style>
  14.     <script src="jquery.js"></script>
  15.     <script>
  16.         $(function () {
  17.             //鼠标进入A标签事件
  18.             $("a").mouseover(function () {
  19.                 //取到A标签的title属性的值
  20.                 var str = $(this).attr("title");
  21.                //生成div字符串
  22.                 var tip = '<div id="d1">' + str + '</div>';
  23.                 //往body中添加一个div
  24.                 $(tip).appendTo("body");
  25.             }).mouseout(function () {  //鼠标划出事件
  26.                 //删除div
  27.                 $("#d1").remove();
  28.             }).mousemove(function (e) {   //鼠标移动事件   e可以用来定位鼠标位子
  29.                 //因为在CSS样式中绝对定位了，可以设置left 和top属性  left:距离页面左边距离  top:距离页面上面距离
  30.                 $("#d1").css({ "left": "" + (e.pageX + 15) + "px", "top": "" + (e.pageY + 15) + "px" });
  31.             });
  32.         });
  33.     </script>
  34.  
  35. </head>
  36. <body>
  37.     <a href="#" title="这是默认的提示">这是默认的提示</a>
  38.  
  39. </body>
    </html>

JQuery DOM 有关代码练习的更多相关文章

  1. jQuery DOM操作之结点转移复制

    jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...

  2. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

  3. [转]jQuery DOM Ready

    一直以来,各种JS最佳实践都会告诉我们,将JS放在HTML的最后,即</body>之前,理由就是:JS会阻塞下载,而且,在JS中很有可能有对DOM的操作,放在HTML的最后,可以尽可能的保 ...

  4. JQuery DOM操作（属性操作/样式操作/文档过滤）

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

  5. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  6. 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。

    <!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...

  7. Jquery DOM元素的方法

    jQuery DOM 元素方法 函数 描述 .get() 获得由选择器指定的 DOM 元素. .index() 返回指定元素相对于其他指定元素的 index 位置. .size() 返回被 jQuer ...

  8. 在线运行Javascript,Jquery,HTML,CSS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...

  9. jQuery DOM

    请尊重知识,请尊重原创 更多资料参考请见  http://www.cezuwang.com/listFilm?page=1&areaId=906&filmTypeId=1  jQuer ...

随机推荐

  1. python数据类型-布尔值

    布尔是计算机里最基本的判断单位,布尔只有两个值:真或假,即True False,也就是1或0. 在以后学习流程控制时会经常用到布尔值. 先来看简单的小例子: >>> 1+1 > ...

  2. html.css随便记

    css 绝对定位:一个元素绝对定位时,浏览器首先将它从流中完全删除,然后浏览器再把这个元素放在属性指定的位置上,对其他元素没有影响   绝对定位要相对于最近的父级元素进行定位 position: ab ...

  3. DenyHosts限制SSH登录尝试次数

    DenyHosts官方网站为:http://denyhosts.sourceforge.net 1. 安装 # tar -zxvf DenyHosts-2.6.tar.gz # cd DenyHost ...

  4. #python基础学习模块:marshal 对象的序列化

    #标准库地址:https://docs.python.org/2/library/marshal.html"""有时候,要把内存中一个对象持久化保存磁盘或者序列化二进制流 ...

  5. http接口测试浏览器插件

    http接口测试浏览器插件: Chrome: https://chrome.google.com/webstore/detail/chrome-poster/cdjfedloinmbppobahmon ...

  6. mysql 1449 ： The user specified as a definer (&#39;root&#39;@&#39;%&#39;) does not exist 解决方法

    权限问题,授权 给 root  全部sql 权限 mysql> grant all privileges on *.* to root@"%" identified by & ...

  7. Windows系统下nodejs安装及配置

    关于nodejs中文站,眼下活跃度最好的知识站应该是http://www.cnodejs.org/ ,而http://cnodejs.org/则活跃度较低.Express.js是nodejs的一个MV ...

  8. unity的坑

    http://dearymz.blog.163.com/blog/static/20565742013341916919/ 编辑器: Hierarchy窗口中是场景中的Game Object列表 Pr ...

  9. CPU使用率和Load Average的关系

    看了几篇博客总结的区别,自己终于明白了含义,在这里将理解总结一下: 对于定义和解释,感觉淘测试上的更容易理解: 引用如下: CPU使用率:  一段时间内CPU的使用状况,从这个指标可以看出某一段时间内 ...

  10. AVT Vimba与OpenCV环境配置

    近来,由于项目需求,需要使用AVT的一款相机采集图像并进行相应的算法处理.环境的配置过程较为复杂,特此记录,以做备忘.也给有需要的小伙伴们一些key point的分享. 搭建环境:Windows7 + ...