//累加你选择的个数

<!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. hdu 4135 Co-prime(容斥)

    Co-prime Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  2. html li标签前面添加图标三种方法

    今天无聊写下这个例子,希望对初学者有帮助,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf ...

  3. class 类(4)

    要将类实例化,然后通过实例来调用类的方法(函数).在此,把前面经常做的这类事情概括一下: 方法是类内部定义函数,只不过这个函数的第一个参数是self.(可以认为方法是类属性,但不是实例属性) 必须将类 ...

  4. ibatis使用--SqlMapClient对象

    SqlMapClient对象 这个对象是iBatis操作数据库的接口(执行CRUD等操作),它也可以执行事务管理等操作.这个类是我们使用iBATIS的最主要的类.它是线程安全的.通常,将它定义为单例. ...

  5. PHP中$_SERVER的具体參数与说明

    PHP编程中常常须要用到一些server的一些资料.特把$_SERVER的具体參数整理下,方便以后使用. $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名称,与 document ...

  6. 初识QML学习机制

    在QML中,一个用户界面被指定为具有属性的对象树,这使得Qt更加便于很少或没有编程经验的人使用,JavaScript在QML中作为一种脚本语言,对QML进行逻辑方面的编程. AD:WOT2015 互联 ...

  7. CSS transform(变形)和transform-origin(变形原点)

    transform(变形)和transform-origin(变形原点)的说明: 目前这两个属性得到了除去ie以外各个主流浏览器webkit,firefox,opera的支持,属性名分别为 -webk ...

  8. EF数据建模（一）

    大中型软件开发过程中常会使用ORM技术,ORM全称是“对象-关系映射Object-Relation-Mappping”.是将数据库中的数据对象的形式表现出来,并将通过面向对象的方式将这些对象组织起来, ...

  9. razor类型强制转换

    一.如果后台得到的是一个List类型 1.后台得到数组数据 var dutyList = IOCFactory.R<IEmployeeContract>().BatchFind(m =&g ...

  10. （转）Javascript面向对象编程（二）：构造函数的继承（作者：阮一峰）

    对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物& ...