//累加你选择的个数

<!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>

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. JavaScript闭包函数的写法

    <script type="text/javascript"> //通过js内置的函数构造器创建函数 var func=new Function('a','b','re ...

  2. 操作系统下查看HBA卡信息wwn的方法

    一.Windows 系统在Windows系统中,可以使用FC HBA卡厂家提供的管理软件查看光纤适配器的WWN号码,具体如下:Qlogic:SANsurferEmulex:HBAnyware http ...

  3. SDK命令行操作

    * 使用前需要先在path中添加Android SDK的环境变量,跟Java JDK的配置相同 我当前目录如下:F:\Program\Android SDK\tools:F:\Program\Andr ...

  4. KVO详解

    NSKeyValueObserving非正式协议定义了一种机制,它允许对象去监听其它对象的某个属性的修改. 我们可以监听一个对象的属性,包括简单属性,一对一的关系,和一对多的关系.一对多关系的监听者会 ...

  5. 利用iptables实现基于端口的网络流量统计

    如何统计某个应用的网络流量(包括网络流入量和网络流出量)问题,可以转换成如何基于端口号进行网络流量统计的问题.大部分网络应用程序都是传输层及以上的协议,因此基于端口号(tcp, udp)统计网络流量基 ...

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

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

  7. css布局详解（二）——标准流布局（Nomal flow）

    css标准流布局(Nomal flow) 一.正常流 这是指西方语言中文本从左向右,从上向下显示,这也是我们熟悉的传统的HTML文档中的文本布局.注意,在非西方的语言中,流方向可能不同.大多数元素都在 ...

  8. tomcat 支持https

    HTTP是平时浏览网页时候使用的一种协议.HTTP协议传输的数据都是未加密的,也就是明文的,因此使用HTTP协议传输隐私信息非常不安全.为了保证 这些隐私数据能加密传输,于是网景公司设计了SSL(Se ...

  9. 基于Pojo的开发模式（day03）

    上一次的文章讨论到了Spring的设计目标:使得JEE开发更易用. ok,作为一个Java开发人员,应该都知道struts这个框架,不知道是否大家都清楚struts1和struts2的区别. 首先,这 ...

  10. eclipse 添加jar包的方式

    参考资料地址:http://blog.csdn.net/mazhaojuan/article/details/21403717