传智博客佟老师jqurey学习笔记,以及例子代码详细注释。

时间:2022-11-16 20:11:01

************本人水平有限,在学习时请用批判的态度学习,有问题给我留言************

传智博客佟老师jqurey学习笔记,以及例子代码详细注释。

 

1、写js的时候用aptanaIDE),有jquery的代码提示。

传智博客佟老师jqurey学习笔记,以及例子代码详细注释。

code assist里面的jqurey1.3选上就可以了。

 

 

2、为一个元素增加事件的时候不要在html里加,在js中加。

不要写<inputtype=”button” onclick=”xxx” id=”id”>

要写成:document.getElementById(“id”).onclick= function(){}

 

3、把js剥离出来,做到htmljs的分离。

Html中除了引入js之外,不要别的js代码。

 

4Jqurey选择器:基本选择器、层级选择器、基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单选择器、表单对象属性选择器

选择器练习下载:http://download.csdn.net/source/1484406

 

 

5、选择器中的空格问题

带空格的是子选择器,不带空格的是可见性过滤选择器

传智博客佟老师jqurey学习笔记,以及例子代码详细注释。

 

 

例子1、品牌列表  需要一张小图片,还有jqurey1.3.1js

下载地址:http://download.csdn.net/source/1484474

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

       <head>

       <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

       <title></title>

              <styletype="text/css">

                     *{margin:0; padding:0;}

                     body{font-size:12px;text-align:center;}

                     a{ color:#04D; text-decoration:none;}

                     a:hover{ color:#F50; text-decoration:underline;}

                     .SubCategoryBox{width:600px; margin:0 auto; text-align:center;margin-top:40px;}

                     .SubCategoryBoxul { list-style:none;}

                     .SubCategoryBoxul li { display:block; float:left; width:200px; line-height:20px;}

                     .showmore{ clear:both; text-align:center;padding-top:10px;}

                     .showmorea { display:block; width:120px; margin:0 auto; line-height:24px; border:1pxsolid #AAA;}

                    

                     .showmorea span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}

                    

                     .promoteda { color:#F50;}

              </style>

              <scripttype="text/javascript" src="scripts/jquery-1.3.1.js"></script>

              <scripttype="text/javascript">

                     $(document).ready(function(){//dom加载完毕时执行

                            //得到classSubCategoryBoxdiv中的ul 中的li,索引大于5,不选最后一个

                            //即后两行

                            var$hideBandes = $("div.SubCategoryBox ul li:gt(5):not(:last)");

                            $hideBandes.hide();//dom加载完毕先隐藏

                           

                            //classshowmorediv中的所有a标记增加click方法

                            $("div.showmore>a").click(function(){

                                   $hideBandes.toggle();//点击是循环隐藏和显示

                                  

                                   if($hideBandes.is(":visible")){//如果是显示的

                                          //给几个特定的元素增加样式,div中的ul中的li  内容过滤 包含 佳能等几个内容时

                                          $("divul li").filter(":contains('佳能'), :contains('尼康'), :contains('奥林巴斯')")      

                                                                 .addClass("promoted");

                                                                

                                          $(".showmore>a>span").css("background","url(img/up.gif) no-repeat 0 0");//改变小箭头图片

                                          $(".showmore>a>span").text("显示精简品牌");//改变文字

                                   }else{//如果是隐藏的

                                          //去除加上去的样式

                                          $("divul li").filter(":contains('佳能'), :contains('尼康'), :contains('奥林巴斯')")      

                                                                 .removeClass("promoted");

                                          $(".showmore>a>span").css("background","url(img/down.gif) no-repeat 0 0");//改变小箭头图片

                                          $(".showmore>a>span").text("显示全部品牌^^");//改变文字

                                   }

                                  

                                   returnfalse;

                            });

                     });

              </script>

       </head>

       <body>

              <divclass="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>

                     <divclass="showmore">

                            <ahref="more.html"><span>显示全部品牌</span></a>

                     </div>

              </div>

       </body>

</html>

 

例子2、超链接和图片提示效果  需要几张图片  jqurey1.3.1js

代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

<html>

       <head>

              <metahttp-equiv="Content-Type" content="text/html;charset=utf-8">

              <title>UntitledDocument</title>

              <styletype="text/css">

                     body{

                            margin:0;

                            padding:40px;

                            background:#fff;

                            font:80% Arial, Helvetica, sans-serif;

                            color:#555;

                            line-height:180%

                     }

                    

                     img{

                            border:none;

                     }

                    

                     li{

                            list-style:none;

                            float:left;

                            display:inline;

                            margin-right:10px;

                            border:1px solid #AAAAAA;

                     }

                    

                     #tooltip{

                            position:absolute;

                            border:1px solid #ccc;

                            background:#333;

                            padding:2px;

                            display:none;

                            color:#fff;

                     }

              </style>

              <scripttype="text/javascript" src="scripts/jquery-1.3.1.js"></script>

              <scripttype="text/javascript">

                     $(function(){//dom加载完执行

                            //设定图片层距离鼠标的位置

                            varx = 10;

                            vary = 20;

                           

                            $("a.tooltip").mouseover(function(e){//选择classtooltipa标记,添加鼠标经过事件的方法

                                   this.myTitle= this.title;//得到a标记的title属性

                                   this.title= "";//把原来的title属性设为空字符串

                                  

                                   varimageTitle = this.myTitle ? ("<br>" + this.myTitle) :"";//判断myTitle是否为空,不为空给它前面加 br

                                  

                                   varim = "<div id='tooltip'><img src='" + this.href + "'alt='产品预览图'/>"+ imageTitle + "</div>";//创建一个div

                                   $("body").append(im);//把创建的div追加到body

                                  

                                   //设定追加的div的位置,e是鼠标的位置,再加上距离鼠标的位置,就是div的位置

                                   $("#tooltip").css("left",e.pageX + x + "px")

                                                .css("top", e.pageY + y+ "px")

                                                         .show("fast");//显示 速度设为

                            }).mouseout(function(){//鼠标移出事件的方法

                                   this.title= this.myTitle;//myTitle还给title

                                   $("#tooltip").remove();//删除新添加的div

                            }).mousemove(function(e){//鼠标在图片上移动的事件的方法

                                   //修正位置

                                   $("#tooltip").css("left",e.pageX + x + "px")

                                                .css("top", e.pageY + y+ "px");

                            }).click(function(){returnfalse;});//取消a标记的默认方法

                     })

              </script>

       </head>

       <body>

              <h3>有效果:</h3>

              <ul>

                     <li><ahref="images/apple_1_bigger.jpg" class="tooltip"title="苹果iPod"><img src="images/apple_1.jpg" alt="苹果 iPod"/></a></li>

                     <li><ahref="images/apple_2_bigger.jpg" class="tooltip"title="苹果 iPodnano"><img src="images/apple_2.jpg" alt="苹果 iPodnano"/></a></li>

                     <li><ahref="images/apple_3_bigger.jpg" class="tooltip"title="苹果iPhone"><img src="images/apple_3.jpg" alt="苹果iPhone"/></a></li>

                     <li><ahref="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><ahref="images/apple_1_bigger.jpg" title="苹果 iPod"><imgsrc="images/apple_1.jpg" alt="苹果 iPod" /></a></li>

                     <li><ahref="images/apple_2_bigger.jpg" title="苹果 iPod nano"><imgsrc="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>

                     <li><ahref="images/apple_3_bigger.jpg" title="苹果 iPhone"><imgsrc="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>

                     <li><ahref="images/apple_4_bigger.jpg" title="苹果 Mac"><imgsrc="images/apple_4.jpg" alt="苹果 Mac"/></a></li>

              </ul>

       </body>

</html>