//累加你选择的个数

<!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. java java.uitl.Random产生随机数

    通过使用java.uitl.Random产生一个1-10内的随机数.例: Random random = new Random(); int i = Math.abs(random.nextInt() ...

  2. WPF与输入法冲突研究之一：百度输入法会导致WPF程序的崩溃！

    在学习和使用了WPF一段时间之后,有点感觉WPF是个不太成熟的框架,不知道是我学的太肤浅,还是WPF得BUG太多! >>>>>>>模拟场景<<&l ...

  3. [置顶] IOS7状态栏StatusBar官方标准适配方法

    IOS7状态栏StatusBar官方标准适配方法 hello,大家好,ios7正式版已经发布,相信大家都在以各种方式来适配ios7. 如果你已经下载了xcode5,正准备使用,你会发现各种布局的改变. ...

  4. 至Webserver构造svgz的文件需要http头，让你的浏览器中打开svgz档

    IE8以及IE8不支持以下浏览器SVG的.svgz它是svg压缩文件格公式,本文介绍的配置独立的浏览器,但浏览svgz请IE9+要么Firefox,Chrome和其他现代的浏览器打开. 让我们以正确显 ...

  5. OpenMp 基本

      OpenMp是由OpenMP Architecture Review Board牵头提出的,并已被广泛接受的,用于共享内存并行系统的多线程程序设计的一套指导性的编译处理方案(Compiler Di ...

  6. 什么是 gnuplot

    Gnuplot是一个命令行的交互式绘图工具(command-driven interactive function plotting program).用户通过输入命令,可以逐步设置或修改绘图环境,并 ...

  7. await与async的简单了解

    异步方法的返回类型可以为Task.Task.void.方法不能声明ref或out参数. 无法捕捉返回类型为void的异步方法引发的异常,如果返回Task或Task的异步方法中出现异常,则在任务等待时将 ...

  8. Android-图标

    首先需要申明一点,系统图标并不存在于项目资源中,而是存在于设备中. 这就带来一个大问题,界面风格的控制权交到了不同的设备手中.这是我们不愿意看到的. 如何解决这个问题?有两种方法: 1.创建自己的图标 ...

  9. CodeFirst Fluent API

    本文转自:疯狂的我  CodeFirst Fluent API EF的好处之一就是实现了概念模型和存储模型的分离,我们可以为概念实体和存储实体起不同的名称,同时还可以将一个概念实体映射到多个存储实体, ...

  10. Linux设置日期

    $ date -s "2016-07-13 14:54" 把时间设置为2016-07-13 14:54