本章节主要讲解jQuery的动画和节点的操作。
jQuery属性的操作与设置
主要有这几种方法：text（），html（），val（），attr（），prop（）。
text，设置或返回被选元素的文本内容。
(1.)基本使用
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").text("hello <br>word</br>");
);
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">改变所有p元素的文本内容</button>
</body>
</html>但是内容最后的呈现不包含内容的标签，也就是说显示word不会加粗。
(2).text( )
当text中不传内容的时候，会返回所有调用标签的文本，但是返回的文本不包含标签。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
alert($("p").text());
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is <b>another</b> paragraph.</p>
<button class="btn1">获得 p 元素的文本内容</button>
</body>
</html>
(3).text(function(index,oldcontent){})
index 表示该元素对应的下标 oldcontent 表示的是原先的内容
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").text(function(i,n){
return "这个 p 元素的 "+i+" 是：" + n;
});
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">改变所有 p 元素的文本内容</button>
</body>
</html>html，表示被选元素的内容（innerHTML）
(1).html("xxx")
和text同样的效果设置被选元素。
html与text区别就是前者不会将内容里的标签过滤，后者会将内容里的标签过滤。
(2).html()
还是会返回被选对象中第一个元素的文本内容，不想text那样返回全部元素的文本内容。
(3).html(function(index,oldcontent){})
使用方法同text一样。
val，设置和返回表单元素被选中的值，等价于给value设置值。
(1).val("xxx")
给表单元素设置value
(2).val()
返回第一个匹配元素的value
(3).val(function(index,oldcontent){})
使用同html和text一样
attr，我们通过她可以去给元素的属性设置，比如img的sre
(1).attr("key","value");
当然也可以多属性同时设置，采用json的形式
$("img").attr({
"width":"60px",
"height":"60px"
});
单属性
$("img").attr("src","2.jpg");
(2).attr("key")
获取被选元素的对应属性的值
(3).attr("key",function(index,oldcontent){})
使用方法同html一样
*****************************
prop的含义和使用方法和attr一样的，都是对元素的属性设置但是两者在使用上是有区别的
- 操作对象不同
- 应用版本不同
- 用于设置属性值得类型不同
attr是通过setAttribute，所以在赋值的时候传的一定是字符串，若不是字符串也会通过toString的方法转成字符串。
prop则是通过js对象的属性，传的值可以是数组，对象等任意类型的、
- 其他细节问题
在jQuery1.6以前，attr（）方法不仅承认了attribute还承担了property，知道jQuery1.6之后新增函数prop，让prop去承担property的获取与设置。
在jQuery1.6以前对于表单元素的checked，disabled，selected等属性返回的是布尔值
在jQuery1.6之后对于表单元素的checked，disabled，selected等属性需要通过prop去获取和设置，返回的也是布尔值；若你非要通过attr去获取，若是为true则会返回属性的名字，false则会返回undefined。如该元素已被选中则染回selected，未被选中则返回undefined。在某些版本中，attr获取的表示该属性初始化的值，不随后面值得改变而改变。
因此在jQuery1.6之后，jQuery认为attr对于checked disabled selected获取来的值表示这些属性初始化的值，也就是说不管后面这些值改变成了什么，用attr获取来的值就是初始化时候的值。使用对于这些属性最好使用prop方法去设置和修改
<input id="uid" type="checkbox" checked="checked" value="1">
<script type="text/javascript">
// 当前jQuery版本为1.11.1
var uid = document.getElementById("uid");
var $uid = $(uid);
document.writeln( $uid.attr("checked") ); // checked
document.writeln( $uid.prop("checked") ); // true
// 取消复选框uid的选中(将其设为false即可)
// 相当于 uid.checked = false;
$uid.prop("checked", false);
// attr()获取的是初始状态的值，即使取消了选中，也不会改变
document.writeln( $uid.attr("checked") ); // checked
// prop()获取的值已经发生变化
document.writeln( $uid.prop("checked") ); // false
</script>****************************
jQuery动画
基本动画
show，hide，toggle
slideUp，slideDown，slideToggle
fadeIn，fadeOut，fadeToggle，fadeTo
show，hide对立的 toggle表示显示当前状态对立的状态，如若当前是show，则显示hide。
show()----------->表示默认的动画时间
show(time)-------------->表示指定的动画时间
show(time,function(){ })------------------>前者表示时间，后者是动画结束的回调
hide，toggle的使用方法和show一样。
slideup，slidedown，slideToggle
使用方法同show一样效果看上面。
fadeIn，fadeOut，fadeToggle，fadeTo
分别表示淡入，淡出，设置对立状态，渐变到指定透明度值
除了fadeTo以外其他的使用方式和show一样，以外fadeTo需要多一个参数
fadeTo（time，toValue，function(){ }）第一个参数表示动画时间，第二个参数表示渐变到指定的透明度，第三个参数表示动画结束时的回调--------->第二个参数的值范围0-1 如0.2
自定义动画
jQuery给我了一个自定义方法的函数animate（）
这是jQuery中的参数，第一个是修改属性的值，第二个表示动画时间，第三个表示速率，第四个表示动画结束时候的回调。其实我们之前写的运动动画框架和jQuery的思路是差不多的，下面我们来看看如何使用。
<script type="text/javascript">
$(function() {
$("button:lt(1)").click(function() {
// 第一个参数 对象 需要动画的样式
// 第二个参数 speed 动画执行的时间
// 第三个参数 动画执行的效果
// 第四个参数 回调函数
$("div:eq(0)").animate({left:700},8000);
$("div:eq(1)").animate({left:700},8000,"linear");
$("div:eq(2)").animate({"left":"700","width":"500px"},8000,"linear",function() {
alert("end");
});
});
});
</script>下面来一个实战demo吧
我们直接拿jQuery1中的demo加以修改即可
<script type="text/javascript">
$(function() {
// 1 获取一级菜单
var $lis = $(".wrap>ul>li");
// 2 注册事件 onmouseenter onmouseout
$lis.mouseenter(function() {
// 让对应二级菜单显示
$(this).css({
"height": '100px'
});
$(this).children('ul').stop().slideDown(1000);
});
$lis.mouseleave(function() {
// 让对应二级菜单隐藏
$(this).css({
"height": '30px'
});
$(this).children('ul').stop().slideUp(1000);
});
});
</script>我们可以看到 在动画前面加了stop(),为什么要加stop？因为我们后面的动画是有时长的，在1s内完成，因为你每次获取失去焦点，都会触发动画，频繁的触发，导致动画的堆积从而当鼠标移走会还会持续的显示动画，所以需要在动画前添加stop，表示停止正在进行的动画，也就是说直接执行接下来需要执行的动画，这样一来就没有堆积的动画了。
jQuery的属性操作和动画已经讲完，接下来会来讲jQuery的节点，事件绑定等知识点，如有表达错的请谅解，并请提出指出，且修改错误，望能共同进步。
7980
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
