6-jq中的动画
提前注明：jq中的任何动画效果，都可以指定3种表示速度的slow,normal,fast（时间分别为0.6,0.4,0.2秒）或是表示秒钟的数值（毫秒）
6-1 show(para)和hide(para)
$(“element”).hide() //隐藏，会将元素的display样式改为”none”;等同于$(“element”).css(“display”,”none”);
注意：hide()方法在将元素的display属性值设置为none之前，会记住原先的display属性（block,inline,或其他除了none之外的值），当调用show()方法之前，就会根据hide()方法记住的display属性值来显示元素。
6-2 fadeIn()和fadeOut()
//改变元素的不透明度（两者分别为淡入（慢慢显示）和淡出（慢慢消失））
6-3 slideUp()和slideDown()
//只会改变元素的高度（前者将元素由上至下的延伸显示，后者由下到上缩短隐藏）
6-4自定义动画animate(params,speed,callback);
参数说明：
（1）params:一个包含样式属性及值的映射，比如{property1:”value1”,property2:”value2”,}
（2）Speed:速度参数，可选（3）callback:在动画完成时执行的函数，可选
6-5 stop([clearQueue],[gotoEnd]) //停止元素动画
两个参数都是可选参数，都是Boolean值，clearQueue代表是否要请空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。
//判断元素是否处于动画状态--避免动画积累而导致动画与用户行为不一致，解决方法是判断元素是否处于动画状态，如果元素不处于动画状态，再为其添加动画。
If(! $(element).is(“:animated”)){
//如果当前没有进行动画，则添加新动画 }
6-6 delay() //动画执行的过程中，如果对动画进行延迟操作
例 $(this).animate({},3000).delay(1000)
6-6 除了上面提到的动画方法，jq中还有4个专门用于交互的动画方法
Toggle(speed,[callback]); //可以切换元素的可见状态
例 $(“#panel h5.head”).click(function(){
$(this).next().toggle(); });
以上代码等同于：
$(“#panel h5.head”).toggle(function(){
$(this).next().hide();
},function(){
$(this).next().show();
});
slideToggle(speed,[easing],[callback]) //通过高度变化来切换匹配元素的可见性，这个动画效果只调整元素的高度。
例 $(“#panel h5.head”).click(function(){
$(this).next().slideToggle(); });
以上代码等同于：
$(“#panel h5.head”).toggle(function(){
$(this).next().slideUp();
},function(){
$(this).next().slideDown();
});
fadeTo(speed,opacity,[callback]); //该方法可以将元素的不透明度以渐进方式调整到指定值
fadeToggle(speed,[easing],[callback]) //通过不透明度变化来切换匹配元素的可见性
例 $(“#panel h5.head”).click(function(){
$(this).next().fadeToggle(); });
特别注意：
1.animate()方法可以用来代替其他所有的动画方法
代替show()
$(“p”).animate({height:”show”,width:”show”,opacity:”show”},400)等价于$(“p”).show(400)
代替fadeIn()
$(“p”).animate({opacity:”show”},400)等价于$(“p”).fadeIn(400)
代替slideDown()
$(“p”).animate({height:”show”},400)等价于$(“p”).slideDown(400)
代替fadeTo()
$(“p”).animate({opacity:”0.6”},400)等价于$(“p”).fadeTo(400,0.6)
事实上，这些动画就是animate()方法的一种内置了特定样式属性的简写形式。
2.队列动画
（1）一组元素上的动画效果
@@当一个animate()方法中应用多个属性时，动画是同时发生的
@@当以链式的写法应用动画方法时，动画是按照顺序发生的
（2）多组元素上的动画效果
@@默认情况下，动画是同时发生的
@@当以回调的形式应用动画方式，动画是按照回调顺序发生的。
7 jq对表格，表单的操作及更多应用
7-1 表单应用
一个表单有3个基本组成部分：
（1）表单标签：包含处理表单数据所用的服务器端程序URL,以及数据提交到服务器的方法
（2）表单域（3）表单按钮
7-1-1单行文本框应用
例：文本框获得与失去焦点样式变化
$(function(){//注意表单jq选择器
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus")
});
});
7-1-2 多行文本框应用
例：改变文本框高度，定位文本框滚动条位置
$(".bigger").click(function(){
if(!$comment.is(":animated")){
if($comment.height()<500){
$comment.animate({height:"+=50"},400);
}
}
});
$(".smaller").click(function(){
if(!$comment.is(":animated")){
if($comment.height()<500){
$comment.animate({height:"-=50"},400);
}
}
});
定位文本框滚动条位置
$(".bigger").click(function(){
if(!$comment.is(":animated")){
$comment.animate({scrollTop:"-=50"},400);
}
});
$(".smaller").click(function(){
if(!$comment.is(":animated")){
$comment.animate({scrollTop:"+=50"},400);
}
});
7-1-3复选框应用
对复选框最基本的应用，就是对复选框进行全选，反选，和全不选等操作
通过元素的checked属性来达到目的。
例<form method="post" action="">
你爱好的运动是？
<br/>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br/>
<input type="button" id="CheckedAll" value="全 选" />
<input type="button" id="CheckedNo" value="全不选" />
<input type="button" id="CheckedRev" value="反 选" />
<input type="button" id="send" value="提 交" />
</form>
全选$("#CheckedAll").click(function(){$("[name=items]:checkbox").attr("checked","true");
});//通过属性选择器和表单选择器共同锁定某组复选框
全不选$("#CheckedNo").click(function(){$("[name=items]:checkbox").attr("checked","false");
});
反选（稍微有些复杂，需要循环每一个复选框进行设置，取他们的反值）
$("#CheckedRev").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",!$(this).attr("checked"))
});
});
这里改用原生js会简单些
$('[name=items]:checkbox').each(function(){
//直接使用JS原生代码，简单实用
this.checked=!this.checked;
});
//通过复选框选择是否全选，又因为复选框的checked属性的值和控制全选的复选框的checked属性值是相同的，因此可以忽略判断，直接赋值
$("#CheckedAllorNot").click(function(){
$('[name=items2]:checkbox').attr('checked', this.checked);
});
$("#send2").click(function(){
var str="你选中的是：\r\n";
$('[name=items2]:checkbox:checked').each(function(){
str+=$(this).val()+"\r\n";
});
alert(str);
});
但是这种情况下，如果在复选框里取消某一个选项的选中状态时，id为“CheckedAllorNot”的复选框并未取消全选状态，而此时需要它与复合选框能够联系起来，即联动起来。
//通过设置flag标记整个复选框状态，遍历每一个复选框，得到最后的是否全选状态
$("[name=items2]:checkbox").click(function(){
var flag=true;
$("[name=items2]:checkbox").each(function(){
if(!this.checked) flag=false;
});
$("#CheckedAllorNot").attr("checked",flag);
});
//另一方法，通过验证复选框的总数与选中的复选框的数量是否相等来确定是否应该处于选中状态。
$("[name=items2]:checkbox").click(function(){
//定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提高程序效率
var $tmp=$("[name=items2]:checkbox");
//用filter方法筛选选中的复选框，并直接给CheckedAllorNot赋值
$("#CheckedAllorNot").attr("checked",$tmp.length==$tmp.filter(":checked").length);
});
注意：关于attr()和prop()属性的区别：
（jq从1.6开始提供的获取属性的新方法prop()，该方法返回值是标准属性：true/false）
原则（1）：只添加属性名称该属性就会发生效应应该使用prop()
原则（2）只存在true/false的属性应该使用prop()
按照官方说明，如果是设置disabled和checked这些属性时，应使用prop()方法，而不是使用attr()方法，所以在上例中，建议把attr方法都改为prop方法
7-1-4 下拉框应用
实现下图功能
以左面添加为例，且包括双击使内容添加到对面。
$("#add").click(function(){
var $option=$("#select1 option:selected");
var $remove=$option.remove();
$remove.appendTo("#select2");
});
$("#add_all").click(function(){
var $option=$("#select1 option");
var $remove=$option.remove();
$remove.appendTo("#select2");
});
$("#select1").dblclick(function(){
var $option=$("option:selected");
$option.appendTo("#select2");
});
//因为删除和追加这两个步骤可以用appendTo()方法直接完成，所以以上代码可以简写为--以第一个为例$("#add").click(function(){
var $option=$("#select1 option:selected");
$option.appendTo("#select2");
});
表单验证
$(function(){
//如果是必填的，则加红星标识.
$("form :input.required").each(function(){
var $required = $("<strong class='high'> *</strong>"); //创建元素
$(this).parent().append($required); //然后将它追加到文档中
});
//文本框失去焦点后
$('form :input').blur(function(){
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//验证用户名
if( $(this).is('#username') ){
if( this.value=="" || this.value.length < 6 ){
var errorMsg = '请输入至少6位的用户名.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
//验证邮件
if( $(this).is('#email') ){
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
var errorMsg = '请输入正确的E-Mail地址.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
});
//提交，最终验证。
$('#send').click(function(){
$("form :input.required").trigger('blur');
var numError = $('form .onError').length;
if(numError){
return false;
}
alert("注册成功,密码已发到你的邮箱,请查收.");
});
//重置
$('#res').click(function(){
$(".formtips").remove();
});
})
表格应用
1.隔行变色
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
注：$(“tr:odd”),$(“tr:even”)选择器中索引是从0开始的，因此第一行是偶数，且在选择器中要加tbody>,否则表格中头部的一行tr也会算进去。
高亮显示 $("tr:contains('王五')").addClass("selected");
2.单选框控制表格行高亮
需求：当单击某一行后，此行被选中高亮显示，并且单选框被选中。
分析：1-为表格添加单击事件；2-给单击的行添加高亮样式，然后把兄弟行的样式去掉，最后将当前的单选框设置为选中。
$("tbody>tr").click(function(){
$(this).addClass("selected")
.siblings().removeClass("selected")
.end()
.find(":radio").attr("checked",true);
});
复选框
$(function(){
$('tbody>tr').click(function() {
//判断当前是否选中
var hasSelected=$(this).hasClass('selected');
//如果选中，则移出selected类，否则就加上selected类
$(this)[hasSelected?"removeClass":"addClass"]('selected')
//查找内部的checkbox,设置对应的属性。
.find(':checkbox').attr('checked',!hasSelected);
});
// 如果复选框默认情况下是选择的，则高色.
$('tbody>tr:has(:checked)').addClass('selected');
})
表格展开关闭
<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
$('tr.parent').click(function(){ // 获取所谓的父行
$(this)
.toggleClass("selected") // 添加/删除高亮
.siblings('.child_'+this.id).toggle(); // 隐藏/显示所谓的子行
表格内容过滤
Jq中可以利用contains选择器和filter筛选方法来实现内容过滤
$("table tbody tr")
.hide()
.filter(":contains('李')")
.show();
文本框输入，过滤显示
$("#filterName").keyup(function(){
$("table tbody tr")
.hide()
.filter(":contains('"+( $(this).val() )+"')")
.show();
}).keyup();
改变网页字体大小
<div class="msg_caption">
<span class="bigger" >放大</span>
<span class="smaller" >缩小</span>
</div>
<div>
<p id="para">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</p>
</div>
$("span").click(function(){
var thisEle = $("#para").css("font-size");
var textFontSize = parseInt(thisEle , 10);//去单位
var unit = thisEle.slice(-2); //获取单位
var cName = $(this).attr("class");
if(cName == "bigger"){
if( textFontSize <= 22 ){
textFontSize += 2;
}
}else if(cName == "smaller"){
if( textFontSize >= 12 ){
textFontSize -= 2;
}
}
$("#para").css("font-size", textFontSize + unit);
});
网页选项卡
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
var $div_li =$("div.tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected") //当前<li>元素高亮
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
$("div.tab_box > div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
.eq(index).show() //显示 <li>元素对应的<div>元素
.siblings().hide(); //隐藏其它几个同辈的<div>元素
}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});});
Jq和Ajax的应用
js手写ajax
function ajax(){
//原生js手写ajax--单击一个按钮，取回一个服务器端的字符串
//声明一个空对象用来装入XMLHttpRequest
var xmlHttpRequest=null;
//给该对象赋值
if(window.ActiveXObject){//IE5,IE6
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHttp");
}else if(window.XMLHttpRequest){//除上述2者以外
xmlHttpRequest=new XMLHttpRequest();
}
//实例化成功以后，使用open()方法初始化该对象，指定http方法和要使用的url
xmlHttpRequest.open("GET","test.php",true);//默认情况下，使用该对象发送http请求是异步进行的，但这里显示设置
//因为要做一个异步调用，所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器，当它的readyState值改变时调用。
//当readyState值被改变时，会激发一个readyStatechange事件，可以使用onreadyStatechange属性来注册该回调事件处理器
xmlHttpRequest.onreadystatechange=requestCallBack;
//使用send()方法发送该请求，因为这个请求使用的http的get方式，所以可以在没有指定参数或使用null参数的情况下使用send()
xmlHttpRequest.send();
function RequestCallBack(){
if(xmlHttpRequest.readyState==4){//请求完全加载
if(xmlHttpRequest.status==200){//http响应成功状态码
document.getElementById("resText").innerHTML=xmlHttpRequest.responseText;
}
}
}
}
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
