jQuery 常用代码

来源：互联网发布：苹果手机录音软件编辑：程序博客网时间：2024/05/29 03:18

1、商品列表的全显示与部分显示之间的切换：

<!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>
<link rel="stylesheet" type="text/css" href="css/default.css" />

<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){                                     // 等待DOM加载完毕.
   var $category = $('ul li:gt(5):not(:last)');             // 获得索引值大于5的品牌集合对象(除最后一条)
   $category.hide();                                // 隐藏上面获取到的jQuery对象。
   var $toggleBtn = $('div.showmore > a');             // 获取“显示全部品牌”按钮
   $toggleBtn.click(function(){
          if($category.is(":visible")){
               $category.hide();                          // 隐藏$category
               $(this).find('span')
                   .css("background","url(img/down.gif) no-repeat 0 0")
                   .text("显示全部品牌");                  //改变背景图片和文本
               $('ul li').removeClass("promoted");           // 去掉高亮样式
          }else{
               $category.show();                          // 显示$category
               $(this).find('span')
                   .css("background","url(img/up.gif) no-repeat 0 0")
                   .text("精简显示品牌");                  //改变背景图片和文本
               $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
                   .addClass("promoted");               //添加高亮样式
          }
       return false;                             //超链接不跳转
   })
})
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>

2、超链接提示和图片提示效果

<!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="../../scripts/jquery.js" type="text/javascript"></script>
<style type="text/css">
body{
   margin:0;
   padding:40px;
   background:#fff;
   font:80% Arial, Helvetica, sans-serif;
   color:#555;
   line-height:180%;
}
img{border:none;}
ul,li{
   margin:0;
   padding:0;
}
li{
   list-style:none;
   float:left;
   display:inline;
   margin-right:10px;
   border:1px solid #AAAAAA;
}

/* tooltip */
#tooltip{
   position:absolute;
   border:1px solid #ccc;
   background:#333;
   padding:2px;
   display:none;
   color:#fff;
}
</style>
<script type="text/javascript">
//<![CDATA[
$(function(){
   var x = 10;
   var y = 20;
   $("a.tooltip").mouseover(function(e){
       this.myTitle = this.title;
       this.title = "";
       var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
       var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
       $("body").append(tooltip);   //把它追加到文档中
       $("#tooltip")
           .css({
               "top": (e.pageY+y) + "px",
               "left": (e.pageX+x) + "px"
           }).show("fast");      //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
       this.title = this.myTitle;
       $("#tooltip").remove();   //移除
    }).mousemove(function(e){
       $("#tooltip")
           .css({
               "top": (e.pageY+y) + "px",
               "left": (e.pageX+x) + "px"
           });
   });
})
//]]>
</script>

</head>
<body>
<h3>有效果：</h3>
   <ul>
       <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
       <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
       <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
       <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
   </ul>

<br/><br/><br/><br/>
<br/><br/><br/><br/>

<h3>无效果：</h3>
<ul>
       <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
       <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
       <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
       <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
   </ul>
</body>
</html>

3、网页换肤

<!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="css/default.css" rel="stylesheet" type="text/css" />
    <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
    
   <script src="../../scripts/jquery.js" type="text/javascript"></script>
   
   <script src="js/jquery.cookie.js" type="text/javascript"></script>
   <script type="text/javascript">
       //<![CDATA[
       $(function(){
           var $li =$("#skin li");
           $li.click(function(){
               switchSkin( this.id );
           });
           var cookie_skin = $.cookie( "MyCssSkin");
           if (cookie_skin) {
               switchSkin( cookie_skin );
           }
       });
       function switchSkin(skinName){
               $("#"+skinName).addClass("selected")                 //当前<li>元素选中
                              .siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中
               $("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
               $.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });
       }
       //]]>
   </script>
</head>
<body>
    <ul id="skin">
       <li id="skin_0" title="灰色" class="selected">灰色</li>
       <li id="skin_1" title="紫色">紫色</li>
       <li id="skin_2" title="红色">红色</li>
       <li id="skin_3" title="天蓝色">天蓝色</li>
       <li id="skin_4" title="橙色">橙色</li>
       <li id="skin_5" title="淡绿色">淡绿色</li>
   </ul>

    <div id="div_side_0">
       <div id="news">
            <h1 class="title">时事新闻</h1>
       </div>
    </div>

    <div id="div_side_1">
       <div id="game">
           <h1 class="title">娱乐新闻</h1>
       </div>
    </div>

</body>
</html>

4、下拉框左右选择

<!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>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {
   float:left;
   text-align: center;
   margin: 10px;
}
span {
   display:block;
   margin:2px 2px;
   padding:4px 10px;
   background:#898989;
   cursor:pointer;
   font-size:12px;
   color:white;
}
</style>

<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   //移到右边
   $('#add').click(function() {
   //获取选中的选项，删除并追加给对方
       $('#select1 option:selected').appendTo('#select2');
   });
   //移到左边
   $('#remove').click(function() {
       $('#select2 option:selected').appendTo('#select1');
   });
   //全部移到右边
   $('#add_all').click(function() {
       //获取全部的选项,删除并追加给对方
       $('#select1 option').appendTo('#select2');
   });
   //全部移到左边
   $('#remove_all').click(function() {
       $('#select2 option').appendTo('#select1');
   });
   //双击选项
   $('#select1').dblclick(function(){ //绑定双击事件
       //获取全部的选项,删除并追加给对方
       $("option:selected",this).appendTo('#select2'); //追加给对方
   });
   //双击选项
   $('#select2').dblclick(function(){
       $("option:selected",this).appendTo('#select1');
   });
});
</script>

</head>
<body>
   <div class="centent">
       <select multiple="multiple" id="select1" style="width:100px;height:160px;">
           <option value="1">选项1</option>
           <option value="2">选项2</option>
           <option value="3">选项3</option>
           <option value="4">选项4</option>
           <option value="5">选项5</option>
           <option value="6">选项6</option>
           <option value="7">选项7</option>
       </select>
       <div>
           <span id="add" >选中添加到右边>></span>
           <span id="add_all" >全部添加到右边>></span>
       </div>
   </div>

   <div class="centent">
       <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
           <option value="8">选项8</option>
       </select>
       <div>
           <span id="remove"><<选中删除到左边</span>
           <span id="remove_all"><<全部删除到左边</span>
       </div>
   </div>
</body>
</html>