css或javascritp 居中一个float或一个块

CSS代码:

[cce_xml]
<style type="text/css">
    .con {
        position: relative;
        float: left;
        left: 50%;
        background: lightblue;
    }
    .box {
        position: relative;
        float: left;
        left: -50%;
        width: 100px;
        height: 100px;
        background: lightcoral;
    }
</style>
<body>
    <div class="con">
        <div class="box"></div>  
    </div>
</body>
[/cce_xml]

javascript代码:

[cce]
<body>
    <div id="con" class="box"></div>  
    <script type="text/javascript">
        var con = document.getElementById('con');
        con.style.position = 'relative';
        con.style.left = (document.body.offsetWidth - con.clientWidth) / 2 + 'px';
    </script>
</body>
[/cce]

jq代码:

[cce]
<body>
    <div class="box"></div>
    <script type="text/javascript" src="../js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
         $('.box').css({
              'position' : 'relative',
              'left' : ($(window).width() - $('.box').outerWidth()) / 2 + 'px'
          })
     </script>
</body>
[/cce]

Jquery 动画下拉菜单

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>动画菜单</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-size: 14px;
    }
    
    a {
        color: #333;
        text-decoration: none
    }
    
    ul {
        list-style: none;
    }
    
    .nav {
        height: 30px;
        border-bottom: 5px solid #F60;
        margin-left: 50px;
        width: 600px;
    }
    
    .nav li {
        float: left;
        position: relative;
        height: 30px;
        width: 120px
    }
    
    .nav li a {
        display: block;
        height: 30px;
        text-align: center;
        line-height: 30px;
        width: 120px;
        background: #efefef;
        margin-left: 1px;
    }
    
    .subNav {
        position: absolute;
        top: 30px;
        left: 0;
        width: 120px;
        height: 0;
        overflow: hidden
    }
    
    .subNav li a {
        background: #ddd
    }
    
    .subNav li a:hover {
        background: #efefef
    }
    </style>
    <script>
    $(function(){
      $("li").hover(
          function(){
            $(this).find("ul").stop().animate({"height":"150px"}, 500);//找到当前节点下的ul并动画改变其值
          },
          function(){
            $(this).find("ul").stop().animate({"height":"0px"}, 500);
          }
        )
    })
    </script>
</head>

<body>
    <ul class="nav">
        <li><a href="#">一级菜单</a>
            <ul class="subNav">
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单</a>
            <ul class="subNav">
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单</a></li>
        <li><a href="#">一级菜单</a></li>
        <li><a href="#">一级菜单</a></li>
    </ul>
</body>

</html>

[/cce_js]

jdfw

Jquery 菜单伸展动画

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航菜单</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
a{color:#333;text-decoration:none}
ul{list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;}
ul li{float:left; margin-top:20px;}
a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;}
a.on, a:hover{ color:#fff;background-color:#F60;height:30px; line-height:30px; }
</style>
<script>
  $(function(){
    $('a').hover(
      function(){
        $(this).stop().animate({"width":"160px"},200);
      },
      function(){
        $(this).stop().animate({"width":"120px"},200);
      }
      );
  });
</script>
</head>
<body>
<ul>
    <li><a class="on" href="#">首  页</a></li>
    <li><a href="#">新闻快讯</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">售后服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</body>
</html>
[/cce_js]

显示效果:

jdfw

jquery 停车动画效果 animate

1.代码:

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <title>停车动画</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <style>
    * {
        padding: 0px;
        margin: 0px;
    }
    
    body {
        background: #D5DEE7;
    }
    
    .boxgrid {
        width: 720px;
        height: 701px;
        border: solid 2px #8399af;
    }
    
    .boxgrid img.car {
        position: absolute;
        top: 0;
        left: 720px;
    }
    </style>
</head>

<body>
    <div class="boxgrid">
        <img src="1.jpg" alt="" class="car" width="350" height="341" />
        <img src="2.jpg" alt="" calss="" width="350" height="341" /></div>
</body>
<script>
$(document).ready(function() {
    $('.boxgrid').hover(function() {
        $(".car").animate({
            left: '0px'
        }, {
            duration: 300
        });
    }, function() {
        $(".car").animate({
            left: '720px'
        }, {
            duration: 300
        });
    });
});
</script>

</html>

[/cce_js]

jdfw

 

2.

[cce_js]
<!DOCTYPE html>
<html>

<head>
    <title>停车动画</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <style>
    * {
        padding: 0px;
        margin: 0px;
    }
    
    body {
        background: #D5DEE7;
    }
    
    .car {
        position: absolute;
        top: 0;
    }
    </style>
</head>

<body>
    <img class="car" src="1.jpg" width="350" height="341" />
</body>
<script>
$(document).ready(function() {
	$("img").hover(function(){
		$(".car").animate({top:"500px"},{duration:600})
	},function(){
		$(".car").animate({top:"0px"},{duration:600})
	})
            });
</script>

</html>

[/cce_js]

jdfw

jquery 自定义改变li背景函数

案例:

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>

<body>
    <ul>
        <li>改别我的背景</li>
    </ul>
</body>
<script>
(function($){
    $.extend({
        "changColor": function(color){
            $("li").bind("mouseover",function(){
                $("li").css("backgroundColor",color);
            });
        }
    });
})(jQuery);
$(function(){
    $.changColor("red");
})
</script>

</html>

[/cce_js]

jquery 常用工具类函数

1.browser获取浏览器的名称与版本信息(谷歌和火狐有效)

$.browser.chrome为true是谷歌浏览器

$.browser.mozilla为true是火狐浏览器

$.browser.version显示浏览器版本号

[cce_js]
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>获取浏览器名称和版本号</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">获取浏览器名称和版本号</span> 
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var strTmp = "您的浏览器名称是:";
                if ($.browser.chrome) { //谷歌浏览器
                    strTmp += "Chrome";
                }
                if ($.browser.mozilla) { //火狐相关浏览器
                    strTmp += "Mozilla FireFox";
                }
                strTmp += "<br /><br /> 版本号是:" //获取版本号
                       +$.browser.version;
                $(".content").html(strTmp);
            });
        </script>
    </body>
</html>
[/cce_js]

2检测浏览器是否属于w3c例子模型

w3c盒子模型:不包含padding和border

IE例子模型:包含padding和border

$.support.boxModel为true是w3c例子模型

[cce_js]
<html>
    <head>
        <title>检测是否是盒子模型</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">检测是否是盒子模型</span> 
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var strTmp = "您打开的页面是:";
                if ($.support.boxModel) { //是W3C盒子模型
                    strTmp += "W3C盒子模型";
                }
                else { //是IE盒子模型
                    strTmp += "IE盒子模型";
                }
                $(".content").html(strTmp);
            });
        </script>
    </body>
</html>
[/cce_js]

3.判断一个对象是否为空

$.isEmptyObject为true 是空,否则为false非空

[cce_js]
<html>
    <head>
        <title>检测对象是否为空</title>
        <meta charset="utf8"/>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">检测对象是否为空</span> 
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var obj = { "姓名": "土豪一族" };
                var strTmp = "您定义了一个:";
                if ($.isEmptyObject(obj)) { //检测是否为空
                    strTmp += "空对象";
                }
                else {
                    strTmp += "非空对象";
                }
                $(".content").html(strTmp);
            });
        </script>
    </body>
</html>
[/cce_js]

4.判断对象是否是原始对象

$.isPlainObject(obj),如果是{}或new Object()建立的对象就返回true.否则返回false

[cce_js]
<html>
    <head>
        <title>检测对象是否为原始对象</title>
        <meta charset="utf8"/>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">检测对象是否为原始对象</span> 
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var obj = {};
                var strTmp = "您定义了一个:";
                if ($.isPlainObject(obj)) { //检测是否为原始对象
                    strTmp += "原始对象";
                }
                else {
                    strTmp += "非原始对象";
                }
                $(".content").html(strTmp);
            });
        </script>
    </body>
</html>
[/cce_js]

5.检测两个节点的包含关系

$.contains(container,contained)

如果一个dom节点包含另一个节点,返回true,否则返回false

container:包含其它节点的容器

contained:被包含的节点

[cce_js]
<!DOCTYPE html>
<html>
    <head>
        <title>检测两个节点的包含关系</title>
        <meta charset="utf8" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">检测两个节点的包含关系</span> 
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var node_a = document.body.firstChild;
                var node_b = document.body;
                var strTmp = "对象node_b";
                if ($.contains(node_b,node_a)) { //检测是否包含节点
                    strTmp += " 包含 ";
                }
                else {
                    strTmp += " 不包含 ";
                }
                strTmp += "对象node_a";
                $(".content").html(strTmp);
            });
        </script>
    </body>
</html>
[/cce_js]

6.字符串操作函数

$.trim 删除字符串两边的空格,但不能删除字串中间的空格

$.trim(str)

[cce_js]
<!DOCTYPE html>
<html>
    <head>
        <title>字符串操作函数</title>
        <meta charset="utf8"/>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">字符串操作函数</span> 
                <span class="fr">
                    <input id="btnShow" name="btnShow" type="button" value="计算" />
                </span>
            </div>
            <div class="content">
                <input id="txtName" name="txtName" type="text" />
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    $(".tip").html("");
                    var strTmp = "内容:";
                    var strOld = $("#txtName").val();
                    var strNew =$.trim(strOld);
                    strTmp += strOld;
                    strTmp += "<br/><br>除掉空格符前的长度:"
                    strTmp += strOld.length;
                    strTmp += "<br/><br>除掉空格符后的长度:"
                    strTmp += strNew.length;
                    $(".tip").show().append(strTmp);
                });
            });
        </script>
    </body>
</html>
[/cce_js]

7.url操作函数

$.param 使用对象或数组按照key/value格式进行序列化编码,常用于向服务器端发送url请求

$.param(obj)

obj:一个需要序列化的对象也可以是个数组

[cce_js]
<!DOCTYPE html>
<html>
    <head>
        <title>URL操作函数</title>
        <meta charset="utf8"/>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">URL操作函数</span> 
            </div>
            <div class="content">
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                //基本信息对象
                var objInfo = new Object();
                objInfo.name = "白富美";
                objInfo.sex = 1;
                //序列化对象
                var objNewInfo =$.param(objInfo);
                //显示序列化后的对象
                var strTmp = "<b>对象 白富美 序列化后</b>:<br/><br/>";
                strTmp += objNewInfo;
                //显示在页面中
                $(".tip").show().append(strTmp);
            });
        </script>
    </body>
</html>
[/cce_js]

8.$.extend()扩展工具函数

可以以原有的工具函数进行扩展

$.extend({options})

options:自定义插件的函数内容

自定义函数案例:

[cce_js]
<!DOCTYPE html>
<html>
    <head>
        <title>使用$.extend()扩展工具函数</title>
        <meta charset="utf8"/>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">自定义工具函数求两值中最小值</span> 
                <span class="fr">
                    <input id="btnShow" name="btnShow" type="button" value="计算" />
                </span>
            </div>
            <div class="content">
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            /*------------------------------------------------------------/
            功能:返回两个数中最小值
            参数:数字p1,p2
            返回:最小值的一个数
            示例:$.MinNum(1,2);
            /------------------------------------------------------------*/
            (function ($) {
                $.extend({
                    "MinNum": function (p1, p2) {
                        return (p1 > p2) ? p2 : p1;
                    }
                });
            })(jQuery);
            $(function () {
                $("#btnShow").bind("click", function () {
                    $(".tip").html("");
                    var strTmp = "17与18中最小的数是:";
                    strTmp +=$.MinNum (17, 18);
                    //显示在页面中
                    $(".tip").show().append(strTmp);
                });
            });
        </script>
    </body>
</html>
[/cce_js]

使用$.extend扩展object对象

$.extend(obj1,obj2,objN)

obj1-objn,需要合并的原有对象

[cce_js]
<!DOCTYPE html>
<html>
    <head>
        <title>使用$.extend()扩展Object对象</title>
        <meta charset="utf8" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">合并原有对象</span> 
            </div>
            <div class="content">
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var objInfo = { name: "" };
                var objMess = { name: "白富美,", title: "欢迎与我联系!" };
                var objNewInfo =$.extend(objInfo,objMess);
                var strTmp = "<b>对象 白富美 合并后</b>:<br/><br/>";
                strTmp += objNewInfo.name + objInfo.title;
                //显示在页面中
                $(".tip").show().append(strTmp);
            });
        </script>
    </body>
</html>
[/cce_js]

 

11

jquery animate()方法CSS属性集的自定义动画

把元素从一个CSS样式改变为另一个样式,style只能是数值型

animate({style},速度,函数)
[cce_js]
<body>
<div id="box">伸展伸展伸展伸展</div>
<script type="text/javascript">
function sz(){
	$("#box").animate({width:20},1000);	};	
setTimeout('sz()',5000); //设置时间控制伸展
//鼠标点击控制收缩伸展
$(document).ready(function(){					
	$("#box").animate({width:800},1000);
	$("#ss").click(function(){
	$("#box").animate({width:20},1000);		 
});//收缩效果
	$("#sz").click(function(){
	$("#box").animate({width:800},1000);	 
});//伸展效果
});
</script>
<a href="#" id="ss">收缩一下</a>&nbsp;<a href="#" id="sz">伸展一下</a>
</body>

[/cce_js]

jquery 常用UI型插件

1.draggable 拖曳插件

调用drggable可以实现各种拖曳元素的效果

$(selector).draggable({options})

options:调用时配置对象,根据该对象可以设置各种拖曳效果。

containment:指定拖曳区域(parent父中)

axis:设置拖曳的坐标方向(x 或 Y)

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>

    <body>
        <div id="divtest">
            <div class="drag">任意拖曳a</div>
            <div class="drag">任意拖曳b</div>
        </div>
        <script type="text/javascript">
        $(function(){
            $(".drag").draggable({containment:"parent"});
        })
        </script>
    </body>

</html>

[/cce_js]

2.droppable放置插件

使用该插件可以将拖曳后的任意元素方置在指定区域中

$(selector).droppable({options})

selector:为接受拖曳元素

options:o 为配置对象

drop:为当被接收拖曳元素完成进入接收元素的窗口时触发的函数调用

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>放置插件</title>
    <meta charset="utf-8" />
    <style>
    #divtest {
        width: 282px;
    }
    
    .box {
        width: 280px;
        border: solid 1px #eee;
        margin: 10px 0px;
    }
    
    .box .title {
        padding: 8px;
        background-color: Blue;
        color: #fff;
        height: 23px;
        line-height: 23px;
        font-size: 15px;
        font-weight: bold;
    }
    
    .box .drag {
        padding: 5px;
        cursor: move;
    }
    
    .box .drag div {
        border: solid 1px #fff;
        background-color: red;
        color: #fff;
        cursor: move;
        width: 35px;
        padding: 20px;
        text-align: center;
    }
    
    .box .cart {
        padding: 5px;
        cursor: move;
    }
    
    .box .cart div {
        padding: 5px;
        height: 55px;
        text-align: center;
    }
    
    .focus {
        background-color: #eee;
    }
    </style>
    <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="divtest">
        <div class="box">
            <div class="title">产品区</div>
            <div class="drag">
                <div>苹果</div>
            </div>
        </div>
        <div class="box">
            <div class="title">回收站</div>
            <div class="cart">
                <div id="tip">还没有产品</div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $(function() {
        $(".drag").draggable();//被移动的元素
        $(".cart").droppable({
            drop: function() { 
                $(this).addClass("focus") //增加新样式
                .find("#tip").html("");//删除HTML
            }
        })
    });
    </script>
</body>

</html>

[/cce_js]

3.sortable拖曳排序插件

将序列元素(<option>,<li>)按任意位置拖曳从而形成新元素列

$(seletor).sortable({options})

seletor:进行拖曳排序的元素

option:调用方法时的配置对象

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>拖曳排序插件</title>
    <meta charset="utf-8" />
    <style>
    #divtest {
        width: 282px;
    }
    
    #divtest .title {
        padding: 8px;
        background-color: Blue;
        color: #fff;
        height: 23px;
        line-height: 23px;
        font-size: 15px;
        font-weight: bold;
    }
    
    ul {
        float: left;
        width: 280px;
        padding: 5px 0px;
        margin: 0px;
        font-size: 14px;
        list-style-type: none;
    }
    
    ul li {
        float: left;
        width: 264px;
        height: 32px;
        line-height: 32px;
        padding: 3px 8px;
        border: solid 1px #ccc;
        background-color: #eee;
        cursor: move;
        margin: 2px 0px;
    }
    
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
    </style>
    <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="divtest">
        <div class="title">
            <span class="fl">我最喜欢的运动</span>
        </div>
        <div class="content">
            <ul>
                <li>1)足球</li>
                <li>2)散步</li>
                <li>3)篮球</li>
                <li>4)乒乓球</li>
                <li>5)骑自行车</li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
    $(function() {
        $("ul").sortable({ 
            delay:2,//为防止于点击事件冲突,延时2秒
            opacity:0.35//以透明度0.35随意拖动
        })
    });
    </script>
</body>

</html>

[/cce_js]

显示效果

4.accordion 面板折叠插件

面板折叠插件可以实现页面中指定区域类似折叠效果,即点击标题时展开内容,再点另一标题时,关闭已展开的内容

$(selector).accordion({options})

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>面板折叠插件</title>
        <meta charset="utf8"/>
        <link href="Css/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div id="accordion">
                <h3>
                    <a href="#">白富美</a></h3>
                <p>咱们结婚吧!</p>
                <h3>
                    <a href="#">土豪族</a></h3>
                <p>咱们交个朋友吧!</p>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#accordion").accordion();
            });
        </script>
    </body>
</html>
[/cce_js]

jdfw

 

5.tabs 选项卡插件

可以将ul中的li定义为选项标题,在标题中再使用a 中的href属性设置选项标题对应的内容,

$(selector).tabs({options})

options:可以使用ajax方式来加载内容

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>选项卡插件</title>
    <meta charset="utf8"/>
    <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
    <style>
    #divtest {
        width: 282px;
        font-size: 13px;
    }
    
    p {
        padding: 0px;
        margin: 0px;
        line-height: 23px;
    }
    </style>
    <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="divtest">
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">最爱吃的水果</a></li>
                <li><a href="#tabs-2">最喜欢的运动</a></li>
            </ul>
            <div id="tabs-1">
                <p>橘子</p>
                <p>香蕉</p>
                <p>葡萄</p>
                <p>苹果</p>
                <p>西瓜</p>
            </div>
            <div id="tabs-2">
                <p>足球</p>
                <p>散步</p>
                <p>篮球</p>
                <p>乒乓球</p>
                <p>骑自行车</p>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $(function() { $("#tabs").tabs({
            //设置各选项卡在切换时的动画效果
            fx: {
                opacity: "toggle",
                height: "toggle"
            },
            event: "mousemove" //通过移动鼠标事件切换选项卡
        })
    });
    </script>
</body>

</html>

[/cce_js]

jdfw

6.dialog对话框插件

可以实现javascript中alert和confirm的功能

$(selector).dialog({options})

selector:为显示弹出对话框元素,通常为div或options,可以设置对话框的确定取消按键的执行代码

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>对话框插件</title>
    <meta charset="utf8" />
    <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
    <style>
    body {
        font-size: 62.5%;
    }
    
    #divtest {
        width: 282px;
    }
    
    #divtest .content {
        background-color: #eee;
        padding: 8px;
        height: 23px;
        line-height: 23px;
    }
    
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
    </style>
    <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="divtest">
        <div class="content">
            <span id="spnName" class="fl">张三</span>
            <input id="btnDelete" type="button" value="删除" class="fr" />
        </div>
        <div id='dialog-modal'></div>
    </div>
    <script type="text/javascript">
    $(function() {
        $("#btnDelete").bind("click", function() { //询问按钮事件
            if ($("#spnName").html() != null) { //如果对象不为空
                sys_Confirm("您真的要删除该条记录吗?");
                return false;
            }
        });
    });

    function sys_Confirm(content) { //弹出询问信息窗口
        $("#dialog-modal").dialog({
            height: 140,
            modal: true,
            title: '系统提示',
            hide: 'slide',
            buttons: {
                '确定': function() {
                    $("#spnName").remove();
                    $(this).dialog("close");
                },
                '取消': function() {
                    $(this).dialog("close");
                }
            },
            open: function(event, ui) {
                $(this).html("");
                $(this).append("<p>" + content + "</p>");
            }
        });
    }
    </script>
</body>

</html>

[/cce_js]

jdfw

7.menu菜单插件

可以通过ul 创建多级内联或弹出式菜单,支持通过键盘方式控制菜单滑动,允许为菜单的各个选项添加图标,

$(selector).menu({options})

selector:菜单列表最外层的ul元素

options:方法配置对象

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>菜单工具插件</title>
    <meta charset="utf8" />
    <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
    <style>
    body {
        font-size: 62.5%;
    }
    
    .ui-menu {
        width: 150px;
    }
    </style>
    <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>

<body>
    <ul id="menu">
        <li><a href="#">小明一中</a>
            <ul>
                <li><a href="#">高中部</a>
                    <ul>
                        <li><a href="#">高一(1)班</a></li>
                        <li><a href="#">高一(2)班</a></li>
                        <li><a href="#">高一(3)班</a>
                            <ul>
                                <li><a href="#">小胡</a></li>
                                <li><a href="#">小李</a></li>
                                <li><a href="#">小陈</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">初中部</a>
                    <ul>
                        <li><a href="#">初一(1)班</a></li>
                        <li><a href="#">初一(2)班</a></li>
                        <li><a href="#">初一(3)班</a></li>
                    </ul>
                </li>
                <li><a href="#">教研部</a></li>
            </ul>
        </li>
        <li class="ui-state-disabled"><a href="#">大明二中</a></li>
    </ul>
    <script type="text/javascript">
    $(function() {
        $("#menu").menu();
    });
    </script>
</body>

</html>

[/cce_js]

jdfw

8.spinner微调按钮插件

微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘上的上下方向键改变输入值

$(selector).spinner({options});

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>微调按钮插件</title>
    <meta charset="utf8" />
    <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
    <style>
    #divtest {
        font-size: 62.5%;
        width: 382px;
    }
    
    #divtest .title {
        padding: 8px;
        background-color: Blue;
        color: #fff;
        height: 23px;
        line-height: 23px;
        font-size: 15px;
        font-weight: bold;
    }
    
    #divtest .content {
        padding: 8px 0px;
        background-color: #fff;
        font-size: 13px;
    }
    
    #divtest .content .input {
        width: 120px;
    }
    
    #divtest .content .prev {
        width: 100px;
        height: 70px;
        border: solid 1px #ccc;
    }
    
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
    </style>
    <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="divtest">
        <div class="title">
            选择颜色值</div>
        <div class="content">
            <span id="spnColor" class="input fl">
                    <input />
                </span>
            <span id="spnPrev" class="prev fr"></span>
        </div>
    </div>
    <script type="text/javascript">
    $(function() {
                //定义变量
                var intR = 0,
                    intG = 0,
                    intB = 0,
                    strColor;
                $("input").spinner({
                        //初始化插件
                        max: 10,
                        min: 0,
                        //设置微调按钮递增/递减事件
                        spin: function(event, ui) {
                            if (ui.value == 8)
                                spnPrev.style.backgroundColor = "red";
                            else
                                spnPrev.style.backgroundColor = "green";
                        },
                        //设置微调按钮值改变事件
                        change: function(event, ui) {
                            var intTmp = $(this).spinner("value");
                            if (intTmp < 0) $(this).spinner("value", 0);
                            if (intTmp > 10) $(this).spinner("value", 10);
                            if (intTmp == 8)
                                spnPrev.style.backgroundColor = "red";
                            else
                                spnPrev.style.backgroundColor = "green";
                        }

        });
    });
    </script>
</body>

</html>

[/cce_js]

jdfw

9.tooltip工具提示插件

可以定制元素的提示外观,提示内容支持变量,ajax远程获取,还可以自定义提示内容显示的位置

$(selector)tooltip({options})

selector:需要显示提示信息的元素

options:在该对象中可以设置提示信息的弹出,隐藏时的效果的所在位置

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>工具提示插件</title>
        <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                工具提示插件</div>
            <div class="content">
                <div>
                    <label for="name">
                        姓名</label>
                    <input id="name" name="name" title="我是土豪,欢迎与我做朋友" />
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#name").tooltip({
                    show: {
                        effect: "slideDown",
                        delay: 350
                    },
                    hide: {
                        effect: "explode",
                        delay: 350
                    },
                    position: {
                        my: "left top",
                        at: "left bottom"
                    }
                });
            });
        </script>
    </body>
</html>
[/cce_js]

jdfw

11

jquery 常用插件

1.validate表单验证插件

$(form).validate({options})

form参数表示表单元素名称

options参数表示调用方法时的配置对象,所有验证规则和异常信息显示的位置都在该对象中进行设置

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf8" />
    <title>表单验证插件</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.js"></script>
    <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script>
</head>

<body>
    <form id="frmV" method="get" action="#">
        <div id="divtest">
            <div class="title">
                <span class="fl">表单验证插件</span>
                <span class="fr">
                        <input id="btnSubmit" type="submit" value="提交" />
                    </span>
            </div>
            <div class="content">
                <span class="fl">邮箱:</span>
                <br />
                <input id="email" name="email" type="text" />
                <br />
                <span class="tip"></span>
            </div>
        </div>
    </form>
    <script type="text/javascript">
    $(function() {
        $("#frmV").validate({
                /*自定义验证规则*/
                rules: {
                    email: {
                        required: true,
                        email: true
                }
            },
            /*错误提示位置*/
            errorPlacement: function(error, element) {
                error.appendTo(".tip");
            }
        });
    });
    </script>
</body>

</html>

[/cce_js]

2.form表单插件:

通过表单插件调用ajaxForm()方法,提交表单数据,通过option对象获取服务器返回数据

$(form).ajaxForm({options})

form 表单元素名

option:一个配置对象,用于发送ajax请求过程,设置发送时的数据和参数

[cce_php]
test.php:
<?php 
$name = $_POST["user"];
$pass = $_POST["pass"];
echo "用户名是:".$name."用户密码是:".$pass;
 ?>
[/cce_php]
[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://www.imooc.com/data/jquery.form.js"></script>
</head>

<body>
<form action="#" id="frmV" method="post">
<div id="divtest">
    <div class="title">
      <span>用户登录页</span>
      <span><input type="submit" id="btnSubmit" value="提交"></span>
    </div>
    <div class="content">
      <span>用户名</span><br>
        <input type="test" id="uesr" name="user"/><br>
      <span>用户密码</span><br>
          <input type="password" id="pass" name="pass" /><br>
        <div class="tip"></div>
    </div>

</div>
  
<script>
  $(function(){
    var options = {
      url:"http://localhost/html/test.php",
      target:".tip"
    }
    $("#frmV").ajaxForm(options);
  })
</script>

</form>
</body>

</html>

[/cce_js]

3.lightBox图片灯箱插件

该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下两张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片,

$(linkimage).lightBox({options})

linkimage:为包含图片的a元素名称

options:为方法配置对象

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="http://www.imooc.com/data/jquery.notesforlightbox.css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://www.imooc.com/data/jquery.notesforlightbox.js"></script>
</head>

<body>
<div id="divtest">
  <div class="title">
    <span>我的相册</span>
  </div>
  <div class="content">
    <div class="divPics">
      <ul>
        <li><a href="http://localhost/html/image/1.jpg" title="第一张"><img src="http://localhost/html/image/1.jpg" alt=""/></a></li>
        <li ><a href="http://localhost/html/image/2.jpg" title="第二张"><img src="http://localhost/html/image/2.jpg" alt=""/></a></li>
        <li ><a href="http://localhost/html/image/3.jpg" title="第三张"><img src="http://localhost/html/image/3.jpg" alt=""/></a></li>
      </ul>
    </div>
  </div>
</div>
<script>
  $(function(){
    $(".divPics a").lightBox({//注意要指出A
      overlayBgColor:"#666",//图片浏览时的背景色
      overlayOpacity:0.5,//背景色透明度
      containerResizeSpeed:600//图片切换的速度

    });
  });
</script>
</body>

</html>

[/cce_js]

显示效果:

QQ截图20151209094008

4.jqzoom图片放大镜插件

在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()方法,显示于小图片相同的大图片的区域,从而实现放大镜的效果,

$(linkimage).jqzoom({options})

linkimage:包含图片的a元素的名称

options:插件方法配置对象

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="http://www.imooc.com/data/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://www.imooc.com/data/jquery.jqzoom.js"></script>
</head>

<body>
    <div id="divtest">
        <div class="title">
            <span>我的相册</span>
        </div>
        <div class="content">
             <a href="http://localhost/html/image/1.jpg" title="第一张" id="jqzoom"><img src="http://localhost/html/image/small1.png" alt="" /></a>
        </div>
    </div>
    <script>
    $(function() {
        $("#jqzoom").jqzoom({//绑定图片放大插件
           zoomWidth:750,//小图片所选区域的宽
           zoomHeight:469,//小图片所选区域的高
           zoomType:'reverse'//设置放大境的类型

        });
    });
    </script>
</body>

</html>

[/cce_js]

显示效果:

QQ截图20151209100041

5.cookie 插件

可以很方便的通过对cookie对象保存,读取,删除用户的信息,还能通过cookie插件保存用户的浏览记录,

保存:$.cookie(key,value)

读取:$.cookie(key)

删除:$.cookie(key,null)

[cce_js]
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script src="http://www.imooc.com/data/jquery.cookie.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
  <div class="title">
    <span class="fl">cookie插件</span>
    <span class="fr">
      <input type="button" id="btnSet" value="设置" />
    </span>
  </div>
  <div class="content">
    <span class="fl">用户名:</span><br>
    <input type="text" name="username" id="username"/><br>
    <input type="checkbox" id="chksave" />是否保存用户名
  </div>
</div>
<script>
  $(function(){
    if($.cookie("username")){
      $("#username").val($.cookie("username"));//如果username存在,读取cookie中的值
    }
  $("#btnSet").bind("click",function(){
    if ($("#chksave").is(":checked")) {//判断是否选中多选框
      $.cookie("username",$("#username").val(),{path:"/",expires:7});//保存到cookie
    }
    else {
      $.cookie("username",null,{path:"/"});//删除cookie中的内容
    }
  });

  });
</script>
  
</body>
</html>
[/cce_js]

6,autocomplete 搜索插件

搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定,当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择,

$(textbox).autocomplete(urlDate,[options]);

textbox:文本框元素名称

urlData:插件返回的相近字符串数据

options:调用插件方法时配置对象

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf8"/>
        <title>搜索插件</title>
        <link href="http://www.imooc.com/data/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script src="http://www.imooc.com/data/jquery.autocomplete.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">搜索插件</span>
            </div>
            <div class="content">
                <span class="fl">用户名</span><br />
                <input id="txtSearch" name="txtSearch" type="text" />
                <div class="tip">
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];
                $("#txtSearch").autocomplete(arrUserName, {
                    minChars: 0, //双击空白文本框时显示全部提示数据
                    formatItem: function (data, i, total) {
                        return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
                    },
                    formatMatch: function (data, i, total) {
                        return data[0];
                    },
                    formatResult: function (data) {
                        return data[0];
                    }
                }).result(SearchCallback); 
                function SearchCallback(event, data, formatted) {
                    $(".tip").show().html("您的选择是:" + (!data ? "空" : formatted));
                }
            });
        </script>
    </body>
</html>
[/cce_js]

显示为:

7.contextmenu右键菜单插件

右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过插件弹出一个快捷菜单,点击菜单各项名称执行相应操作,

$(seletor).contextMenu(menuId,{options});

seletor:为绑定插件的元素

meunID:为快速菜单元素,

options:为配置对象

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf8"/>
        <title>右键菜单插件</title>
        <link href="http://www.imooc.com/data/jquery.contextmenu.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script src="http://www.imooc.com/data/jquery.contextmenu.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title"><span class="fl">点击右键</span></div>
            <div class="content">
                <input id="btnSubmit" type="button" value="提交" />
                <div class="tip"></div>
            </div>
            <div class="contextMenu" id="sysMenu">
                <ul>
                    <li id="Li3"><img src="http://img.mukewang.com/52e4b34b0001bb6d00160016.jpg" alt="" />保存</li>
                    <li id="Li4"><img src="http://img.mukewang.com/52e4b3680001424900160016.jpg" alt="" />退出</li>
                </ul>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnSubmit").contextMenu("sysMenu",
                  { bindings:
                     {
                         'Li3': function (Item) {
                             $(".tip").show().html("您点击了“保存”项");
                         },
                         'Li4': function (Item) {
                             $(".tip").show().html("您点击了“退出”项");
                         }
                     }
                  });
            });
        </script>
    </body>
</html>
[/cce_js]

8.focusColor插件,获取鼠标焦点改变其背景色

$(id).focusColor(color)

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf8"/>
        <title>自定义对象级别插件</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script src="http://www.imooc.com/data/jquery.lifocuscolor.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">对象级别的插件</span>
            </div>
            <div class="content">
                <ul id="u1">
                    <li><span>橘子</span><span>水果</span></li>
                    <li><span>芹菜</span><span>蔬菜</span></li>
                    <li><span>香蕉</span><span>水果</span></li>
                </ul>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#u1").focusColor("#ccc"); //调用自定义的插件
            })
        </script>
    </body>
</html>
[/cce_js]

显示为:

11

jquery 在使用$.get时出现undefined解决办法

[cce_php]
http://localhost/html/test.php 文件内容:
<?php 
echo json_encode(array("name"=>"土豪"));
 ?>
[/cce_php]
[cce_js]
js文件内容:
<script>
    $.get("http://localhost/html/test.php",function(data){
        alert(data.name);
    })
</script>
[/cce_js]

上例:在使用$.get调用test.php文件内容时会出现undefined,原因是test.php产生的字符串没有进行对象化处理,这时需要对data进行如下处理:

[cce_js]
<script>
    $.get("http://localhost/html/test.php",function(data){
        var dataObj=eval("("+data+")");//json对象化处理
        alert(dataObj.name);
    })
</script>
[/cce_js]