//累加你选择的个数

<!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. 通向码农的道路（enet开源翻译计划 一）

    QQ 324186207群 enet交流技术.主要是为了研究tcp内部执行机制,欢迎大家增加探讨.小弟水平有限.翻译难免有误. . Features: ENet evolved specificall ...

  2. MySQL具体解释（7）-----------MySQL线程池总结(一)

    线程池是Mysql5.6的一个核心功能.对于server应用而言,不管是web应用服务还是DB服务,高并发请求始终是一个绕不开的话题.当有大量请求并发訪问时,一定伴随着资源的不断创建和释放.导致资源利 ...

  3. [RxJS] Logging a Stream with do()

    To help understand your stream, you’ll almost always want to log out some the intermediate values to ...

  4. 卸载rpm包提示：error: specifies multiple packages

    –allmatches  Remove all versions of the package which match PACKAGE_NAME. Normally an error is issue ...

  5. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  6. c# 代码执行时间

    Stopwatch sw = new Stopwatch(); sw.Start(); Thread.Sleep(2000); sw.Stop(); System.Diagnostics.Trace. ...

  7. oracle to_char()及to_date()函数使用

    to_char(x[,format]) :将x转换成字符串,可以使用format参数来格式化字符串输出. to_date(x[,format]) :将字符串x转换成日期,可以使用format匹配要转换 ...

  8. 空值排序(oracle和sqlserver)

    oracle认为 null 最大. 升序排列,默认情况下,null值排后面. 降序排序,默认情况下,null值排前面. 改变空值办法: (1)用nvl函数或decode函数将null转换为一特定值 替 ...

  9. 如何修改UIButton按下后默认的蓝色效果

    其实有两个简单方法:1.修改xib属性检查器Highlight Tint的值: 2.通过代码修改:btn.tintColor=[UIColor grayColor];或者[btn setTintCol ...

  10. c#串口编程时,忽略跨线程检查报错

    1.直接在main_Form_Load的初始化中加 //忽略跨线程检查 // System.Windows.Forms.Control.CheckForIllegalCrossThreadCalls ...