jQuery入门教程之二
时间：2009-11-24 来源：SSVFDN 作者：SSVFDN 点击数：2
在第二节教程开始之前·我想让各位先看下，下面这个网址的动画效果~~~
02_01.html
看完这个效果~不知各位是不是以为很难~~
其实不然·这点简单的效果对于jQuery的自定义动画是非常简单的东西
各位可以看以下代码：
| $(document).ready(function(){ $(".run").click(function(){ $("#box").animate({opacity: "0.1", left: "+=400"}, 1200) .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow") .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow") .animate({top: "0"}, "fast") .slideUp() .slideDown("slow") return false; }); }); |
animate (用于创建自定义动画的函数)
这段代码的意思就是点击class run 运行id box的自定义动画~
.animate({opacity: "0.1", left: "+=400"}, 1200) <-- 透明度降到0.1 向右移动400 速度为1200 [+=400 (在原坐标上加400)]
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow") <--透明度改为0.4 向下移动160 高度与宽度改为20 速度为slow
可能有人就奇怪为什么
| $("#box").animate({opacity: "0.1", left: "+=400"}, 1200).animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow") |
这样写也可以~~其实就算一个jQuery一个特性~我个人是称之为“连动联系”就相当于影片一样~其实是一帧一帧连串起来的~
而这个也正是这样·~等上一次自定义动画完了，下一个动画才触发
slideUp 通过高度变化（向上减小）来动态地隐藏所有匹配的元素
slideDown 通过高度变化（向下增大）来动态地显示所有匹配的元素
OK~不知这样的解释对各位以后写动感的效果是否有帮助~
现在开始进行下一个步骤~
jQuery 的选择器
之所以先讲这个，因为本身有CSS基础的人对它就不会太陌生而且容易掌握.废话不说多，各位看观~先向下瞧
02_02.html
第一行为红字,第二行是灰色，第三行是蓝色
在这里就是应用到了jQuery的选择器
| $(document).ready(function(){ $("#box p:first-child").css("color","#f00"); //id box下的第一个p子元素 $("#box p:eq(1)").css("color","#ccc"); //id box下的第二个p子元素 脚本一般是从0开始算的 所以1第二个 $("#box p:last-child").css("color","#03c") //id box下的最一个P子元素 }); |
first-child 匹配第一个子元素
last-child 匹配最后一个子元素
eq 匹配一个给定索引值的元素
even 匹配所有索引值为偶数的元素，从 0 开始计数 //隔行换色 $("tr:even").css("background","#ccc")
odd 匹配所有索引值为奇数的元素，从 0 开始计数 //隔行换色 $("tr:odd").css("background","#f00")
nth-child 匹配其父元素下的第N个子或奇偶元素
only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配(就是查找唯一的子元素~)
parent > child 在给定的父元素下匹配所有的子元素
|
$(".boxLi > p").css("color","#f00"); <div class="boxLi"> |
相信大家在上面的例子页面已经看到这个了·~<p>孙级文字</p>在.boxLi下的div里面~所以不属于子级~那么相对而言~color:#f00也就对它没用
上面这些就是以后大家在jQuery时常用到的选择器~掌握好这些对你以后的查找DOM元素是很有帮助的
我再给各位讲下事件，我们用的比较多的事件有
click 点击触发事件
dblclick 双击触发事件
mousedown 鼠标在元素上点击后触发
mousemove 鼠标在元素上移动来触发
mouseout 鼠标从元素上离开后会触发
mouseover 鼠标移入对象时触发
hover 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
当然我们除了直接用jQuery查到DOM元素以外~有时还需要给特定的标签加个CLASS 或 ID 或者其它属性
对我们来说想给某个标签增加东西一般用的jQuery代码有：
addClass 为每个匹配的元素添加指定的类名
| [$("div").addClass("box")] <div></div> <-- <div class="box"></div> |
removeClass 从所有匹配的元素中删除全部或者指定的类。
| [$("div").removeClass()] <div class="box"></div> <-- <div></div> |
toggleClass 如果存在（不存在）就删除（添加）一个类。
| [$("p").toggleClass("selected")] <p>Hello</p><p class="selected">Hello Again</p> <-- <p class="selected">Hello</p>, <p>Hello Again</p> |
attr 为所有匹配的元素设置一个计算的属性值。
| [$("img").attr("title", "图片01")] <img src="test.jpg"/> <-- <img src="test.jpg" title="图片01"/> |
removeAttr 从每一个匹配的元素中删除一个属性
| [$("img").removeAttr("title")] <img src="test.jpg" title="图片01"/> <-- <img src="test.jpg" /> |
相信这几个简单的效果大家就能明白怎么给标签加类名与属性值了吧~
可能有人会问怎么增加ID呢~
其实addCLASS toggleClass 大家一看就明白这个只是增加CLASS类的~
如果想添加ID的话我们还是需要用attr如
[$("div").attr("id","box")] <div></div> <-- <div id="box"></div>
或者我们可以同时增加ID与CLASS
[$("div").attr("id","box").addClass("box")] 这样就可以了~
对于我们写网站来说有时需要直接在HTML插入style的样式表如
| [$(".box").attr("style","background:#000;color:#f00")] <div class="box"></div> <-- <div class="box" style="background:#000;color:#f00"></div> |
我想大部分都会这样的想~~其实不然~因为这种方法有一个问题~
如果原先class box就有style属性值的话~ <div class="box" style="border:#000 1px solid"></div>
直接这样的话~那就会把class box 原先上的style替换掉~本有一像素的描边没有了~
那怎么写才不会替换掉这个原先的style呢~
其实jQuery里给我们了一个很简单的css方法
[$(".box").css({background:"#000",color:"#f00"})] 这样写的结束就是在原先有的 <div class="box" style="border:#000 1px solid"></div> 基础上再追加背景与字体颜色代码如下 <div class="box" style="border:#000 1px solid;background:#000;color:#f00"></div>
css 在所有匹配的元素中，设置一个样式属性的值。
| $("p").css({ color: "#ff0011", background: "blue" }); |
如果属性名包含 "-"的话，必须使用引号:
| $("p").css({ "margin-left": "10px", "background-color": "blue" }); |
OK~第二节到此结束~~偶闪~
| 来顶一下 |
