jquery常见功能

这是第五章，前几张有点毛了，好多函数我都没说，大家自己看啊！我也是学习，觉着这样更能促进学习。我这只是总结不会讲的太细的，但是我会举例子说明的
一个表单有三部分组成
1.表单标签：发送到服务器的url和提交数据的方法2
2.表单域：如文本框，密码框，隐藏，多行文本框，复选框，单选框，下拉选择框，文件上传框。
3.表单按钮 就不用说了吧。就那几个（提交 复位，一般按钮）用于把数据发送到服务器的，或取消的。
在IE6中不支持超链接除外的伪类选择符，所以只能用jquery解决
来个css样式：
.focus{
 border:1px solid #f123;
 background:#fcc;
}
当把这个类用于文本域时，光标进去一个状态，出来一个状态。
代码如下：
$(function(){
 $(":input").focus(function(){//:input 表单筛选器获取对象
  $(this).addClass('focus');//这个focus就是咱们定义的css样式类
 });
})

2.当滚动条高度变化是 引起的内容向下或向上自动更新

其实这里最主要的是scrollTop  这个方法

$(functin(){
 var $comment=$('#comment');// 比如comment是显示内容的文本框的id
 $(".up").click(function(){
  if(!$comment.is(":animated")){向上做动画
   $comment.animate({scrollTop:'-=50'},400);
  }
 });
 $(".down").click(function(){//向下做动画
  if(!$comment.is(":animated")){
   $comment.animate({scrollTop:'+=50'},400);
  }
 });
})

html部分： 
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">//注意overflow这个属性
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. 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.
</div>

3.多选框的操作事件
这里面注意 attr（）
$("#checkedAll").click(function(){
 $('[name=items]:checkbox').attr('checked',true);
});

js效果的反选
$('[name=items]:checkbox').each(function(){//获取name属性为items况且type为checkbox的
 this.checked=!this.checked;//this.checked获取表当前对象是否被选中
})

大家有没有留意到智联招聘上的全选按钮  当都点击全选是，下面的复选框都被选中，当你不想投哪个公司时，你就会班前边的复选框取消掉，然后全选框哪个也取消掉了，当你把下面的全选上事，全选按钮的那个又选上了。
思路：
首先给每个复选框绑定click事件
然后定义一个flag为true
每次点击是都循环复选框组，如果有一个没选中的话，就把flag变为false
最后就获取全选框的类，属性定义成attr（‘checked’，flag）

$("#checkedAll").attr('checked',$tmp.length==$tmp.filter(':checked').length);

4.当双击某个选项时（列如：下拉菜单）让他从左边的下拉框跑到右边的下拉框
$("#selected").dbclick(function(){
 var $optoins=$("option:selected",this)//倒着看this代表当前的对象，  第一个参数代表当前对象里选中的。
 $opotions.appendTo("#seletect2");
});
其实这里的逻辑顺序是先删除后添加  这样也行：  $remobe=$opotins.remove()
$remove.appendTo("#selected2");

5.表单验证中

$('form :input').blur(function(){
 var $parent=$(this).partent();
 if($(this).is("#username")){
  if(this.value=='' || this.value.length<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.length<6){
   $parent.append('<span class="formtips onError">'+errormsg+'</span>');
  }else{
   var okMsg='输入正确';
   $parent.append('<span class='formtips onSuccess'>'+okmsg+'</span>');
  }
 }
})
由于当光标离开时可能会显示出之前的提示框，所以在显示当前提示框时，把他之前的都清空掉

$('form :input').blur(function(){
 $(this).parent().find(".formtips").remove()//获取当前对象的父对象然后找到这个父对象下面的为formtips的类的对象，然后除去
})
在咱们做表单验证时，当每个输入框都匹配成功时，还得再来一次整体验证，前面的是单个验证。
可以用trigger（）这个方法绑定事件
$("#button").click(function(){
 $("form .required:input").trigger('blur');
 var numerror=$("form .onerror").length;
})

$('form :input').blur(function(){
 //代码省略
}).keyup(function(){
 $(this).triggerHandler("blur");
}).focus(function(){
 $(this).triggerHandler("blur");
})

trigger("blur")不仅会触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，既不能将光标定位到文本框上。triggerHandler("blur")只会触发为元。素绑定的blur事件，而不触发浏览器默认的blur事件

5.1完。。。。。。。。。。。。。。。。。。.

5.2章

jquery  函数  odd() even() :has()
这两函数一个是取偶数的一个是取奇数的

给大家看个代码：
$('tbody>tr').click(function(){
 $(this).addClass('selected')
 .siblings().removeClass('selected')
 .end()
 .find(':radio').attr('checked',true);//find（）是在当前对象里寻找
})
注意end()这个方法  它是返回到当前对象的上一个对象上。
$(this) 代表$("tbody>tr")这个对象。当走到siblings（）时，就是另一对象了。所以后面加个个end（）又
跑到了$(this)这个对象上。

.hasClass()
2.复选框与单选框不同，复选框能选择多行变色，并没有限制被选择的次数。当单击某行时，如果已经高亮，则
移除高亮样式并去掉当前复选框的选中状态；如果还没有高亮，则添加高亮样式并将当前行的复选框选中。

$("toby>tr").click(function(){
 //判断当前是否选中
 var hasSelected=$(this).hasClass('selected');
 //如果选中，则移除selected类，否则就加上selected类
 $(this)[hasSelected?"removeClass":"addClass"]('selected');
 //查找内部的checkbox,设置对应的属性
 .find(':checkbox').attr('checked',!hasSelected);

})

$(this)[hasSelected?"removeClass":"addClass"]('selected');  代表两种情况：
$(this)[removeClass]('selected');
$(this)[addClass]('selected');

在一个点击事件中  this代表当前对象（单个DOM对象，）this.id  代表dom对象的id属性

5.2.3   sclice()获取指定字符串     parseFloat(16px,10)  把px去掉 然后把值变成十进制   
$("tr:contains('王五')")addClass("selected");//：contains，能匹配包含指定文本的元素

$(function(){
 $("table tbody tr").hide().fileter(":contains(李)")
})
匹配文本内容然后在筛选出含有这个文本的内容
$(function(){
 $("filtername").keyup(function(){
  $("table tbody tr").hide()
  .filter(":contains('"+$(this).val()+"')").show();
 }).keyup();
});
防止当刷新页面时表单值仍有 但是表格的内容都显示出来加了keyup（）就可以让当DOM加载完成时
立即触发keyup();就相当于触发$("filtername").keyup(function(){});这里面的内容

网页选项卡：类似于火狐首页的

var $div_li=$("div.tab_menu ul li");
$div_li.click(function(){
 $(this).addClass("selected")//当前元素高亮
 .siblings().removeClass("selected");//去掉其他同辈li元素的高度
var index=$div_li.index(this);//获取当前点击的li元素在全部li元素中的索引
$("div.tab_box > div")//选取子节点
.eq(indx).show()//获取li元素对应的div元素
.siblings().hide();//隐藏其他几个同辈元素
}).hover(function(){
 $(this).removeClass();
},function(){
 $(this).addClass();
})

jquery里有个cookie插件
我们公司的网站里用在皮肤换颜色处和 php里的定义方法产不多
$.cookie('skin',this.id,{path:'/',expires:10})