jQuery学习笔记（一）

最新推荐文章于 2024-01-20 21:49:50 发布

glymm

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量63

点赞数

分类专栏： jQuery学习文章标签： jQuery QQ XHTML JavaScript HTML ViewUI

jQuery学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

从头开始，最基本的格式：

$(document).ready(function(){ 
// Your code here... 
});

一个很经典的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>StripingTable</title> 
<script src="jquery-latest.pack.js" type="text/javascript"></script>  
<!--将jQuery引用进来--> 
<script type="text/javascript"> 
$(document).ready(function(){  //这个就是传说的ready 
        $(".stripe tr").mouseover(function(){   
                //如果鼠标移到class为stripe的表格的tr上时，执行函数 
                $(this).addClass("over");}).mouseout(function(){  
                                //给这行添加class值为over，并且当鼠标一出该行时执行函数
 $(this).removeClass("over");})  //移除该行的class 
        $(".stripe tr:even").addClass("alt"); 
                //给class为stripe的表格的偶数行添加class值为alt 
}); 
</script> 
<style type="text/css"> 
th { 
        background:#0066FF; 
        color:#FFFFFF; 
        line-height:20px; 
        height:30px; 
} 

td { 
        padding:6px 11px; 
        border-bottom:1px solid #95bce2; 
        vertical-align:top; 
        text-align:center; 
} 

td * { 
        padding:6px 11px; 
} 

tr.alt td { 
        background:#ecf6fc;  /*这行将给所有的tr加上背景色*/ 
} 

tr.over td { 
        background:#bcd4ec;  /*这个将是鼠标高亮行的背景色*/ 
} 

</style> 
</head> 

<body> 
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">  
<!--用class="stripe"来标识需要使用该效果的表格--> 
<thead> 
  <tr> 
    <th>姓名</th> 
    <th>年龄</th> 
    <th>QQ</th> 
    <th>Email</th> 
  </tr> 
</thead> 
<tbody> 
  <tr> 
    <td>qq</td> 
    <td>0</td> 
    <td>10000</td> 
    <td>10000@qq.com</td> 
  </tr> 
  <tr> 
    <td>qq</td> 
    <td>0</td> 
    <td>10000</td> 
    <td>10000@qq.com</td> 
  </tr> 
  <tr> 
    <td>qq</td> 
    <td>0</td> 
    <td>10000</td> 
    <td>10000@qq.com</td> 
  </tr> 
  <tr> 
    <td>qq</td> 
    <td>0</td> 
    <td>10000</td> 
    <td>10000@qq.com</td> 
  </tr> 
  <tr> 
    <td>qq</td> 
    <td>0</td> 
    <td>10000</td> 
    <td>10000@qq.com</td> 
  </tr> 
  <tr> 
    <td>qq</td> 
    <td>0</td> 
    <td>10000</td> 
    <td>10000@qq.com</td> 
  </tr> 
</tbody> 
</table> 
<p>PS: 以前表格里写的是作者的基本信息，因为个人隐私，我给屏蔽了，如果想要请单独pm或留言 </p> 
</body> 
</html>

[color=orange]把很多个div的样式写在一起（ms主要用在背景的效果，比如渐变、shadow等）[/color]

<div class="wrap1"> 
<div class="wrap2"> 
<div class="wrap3"> 
<img src="java.gif" alt="The object casting a shadow" /> 
</div> 
</div> 
</div>

可以写成

<script> 
$(document).ready(function(){ 
$("img.dropshadow") 
.wrap("<div class='wrap0'><div class='wrap1'><div class='wrap2'>" + 
"<div class='wrap3'></div></div></div></div>"); 
}); 
</script>

这样在页面就可以简单的写

<img src="java.gif" class="dropshadow" alt="The object casting a shadow" />

可以复制代码比较一下：

<!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>Onion Skin DropShadwo with jQuery</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<style> 
.wrap0, .wrap1, .wrap2, .wrap3 { 
  display:inline-table; 
  /* \*/display:block;/**/ 
  } 
.wrap0 { 
  float:left; 
  background:url(shadow.gif) right bottom no-repeat; 
  } 
.wrap1 { 
  background:url(shadow180.gif) no-repeat; 
  } 
.wrap2 { 
  background:url(corner_bl.gif) -18px 100% no-repeat; 
  } 
.wrap3 { 
padding:10px 14px 14px 10px; 
  background:url(corner_tr.gif) 100% -18px no-repeat; 
  } 
  body { background: #fff;} 
</style> 
<script src="jquery.js" type="text/javascript"></script> 

<script> 
$(document).ready(function(){ 
$("img.dropshadow") 
.wrap("<div class='wrap0'><div class='wrap1'><div class='wrap2'>" + 
"<div class='wrap3'></div></div></div></div>"); 
}); 
</script> 
</head> 

<body> 
<h1>Onion Skinned - With jQuery</h1> 
<p>First, the old-school, multiple divs hard coded into the html as seen on the <a href="http://www.p
<div class="wrap0"> 
<div class="wrap1"> 
  <div class="wrap2"> 
   <div class="wrap3"> 
    <img src="ball.jpg" alt="The object casting a shadow" /> 
   </div> 
  </div> 
</div> 
</div> 

<p style="clear:both;">And now, the jQuery method, which uses javascript to wrap the image at runtime
     <img src="ball.jpg" class = "dropshadow" alt="The object casting a shadow" /> 
     <p>View the source of this page and you'll see the huge difference in markup!</p> 
</body> 
</html>

附：原版教材，感谢原作者
以前的PDF没有链接，又加上了一些超链，但是一些失效的没加

glymm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记（一）

从头开始，最基本的格式：[code="java"]$(document).ready(function(){ // Your code here... });[/code]一个很经典的例子：[code="java"]
复制链接

扫一扫