JQuery 总结



基本选择器
$("#test") 取出id为test的元素;
$(".test") 取出所有class为test 的元素  <div class="test" ></div>
$("p") 取出所有的P元素 
$("div")选出所有的div元素 
$("*")选出所有的元素 
$('span,#test')取出所有的span元素和id为test的元素
$("div,span,p.myclass")取出所有div，span和拥有class为Myclass的<p>标签的一组元素
*****************************************************************************
             层次选择器
$("div span")选取所有div里面的span元素
$('body div')选取body内所有的div
$('.one+div') 选取  class为one的下一个div元素 ==$(".one").next("div");
***************************************************************************
$('body>div')选取body内子div
$("div > span")选取div元素下元素名是span的子元素
$('#two~div')选取id为two的元素后面所有div兄弟元素  =$("two").nextAll("div")
$("#test").siblings("div")选取id为test 所有的兄弟元素，无论前后位置
***************************************************************************
                 过滤选择器
 ***************************************************************************
 $('div:first')选取所有div元素中第一个div元素
 $('div:last')选取所有div元素中最后一个div元素 
$('div:not(.one)') 选取class不为one的div元素
$('div:even')选取索引为偶数的div元素
$('div:old')选取索引值为奇数的div元素
$('div.eq(3)')选取索引值为3的div元素
$('div.gt(3)')选取索引值大于3的div元素
$('div.lt(3)')选取索引值小于于3的div元素
$(':header')选取所有标题元素<h1><h2><h3>
$(':animated')选取当前正在执行动画的元素
****************************************************************************
                内容过滤选择器
***************************************************************************
$('div:contains(di)')查找文本中含有di的div
$('div:empty')选取没有子元素的div空元素（包括文本）
$('div:parent')选取含有子元素的div元素（包括文本元素）
$('div:has(mini)')选取含有class为mini元素的div元素
**************************************************************************
                可见性过滤选择器
*************************************************************************
$('div : hidden')选取所有不可见元素<input type="hidden"><div style="display:none">
$('div : hidden').show(3000); show()是显示，3000是时间秒
$('div : visible')选取所有的可见div元素
*************************************************************************
                    属性过滤选择器
*************************************************************************
$('div[id]')选取属性拥有id的元素
$('div[title=test]')选取属性title值等于test的div元素
$('div[title！=test]')选取属性title值不等于test的div元素
$('div[title^=te]')选取属性title值以te开始的div元素
$('div[title$=est]')选取属性title值以est结束的div元素
$('div[title*=es]')选取属性title值含有es的div元素 
$('div[id][title*=es]')选取属性id,并且属性title值含有es的div元素
************************************************************************
                    子元素过滤器
************************************************************************
：nth-child(even)能选取每个父元素下的索引值是偶数的元素
: nth-child(odd)能选取每个父元素下的索引值是奇数的元素
: nth-child(2)能选取每个父元素下的索引值是2的元素
: nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素（n从0开始）
$('div.one:nth-child(2)')选取class为one的div父元素下的第2个子元素
$('div.one:first-child')选取class为one的div父元素下第一个子元素
$('div.one:last-child')选取class为one的div父元素下最后一个子元素
$('div.one:only-child')选取class为one的div父元素下只有一个子元素
**************************************************************************
                   表单对象属性过滤器
**************************************************************************
$("#from1 input:enabled").val("value") 改变表单内可用input元素的值
$("#from1 input:disabled").val("value")改变表单内不可用的input元素的值
$("input :checked").length;获取多选框选中的个数
$("select : selected").text()获取下拉框选中的内容
****************************************************************************
                     表单选择器
***************************************************************************
$("#form1：input")选取所有的 input textarea select buttion 等元素
$("#form1 : text") 选取所有的单行文本框
$("#form2 : password")选取所有的密码框
$("#form1:radio")选取所有的单选框
$("#form1:checkbox")选取所有的多选框;
$("#from1:submit");选取所有的提交按钮
$("#form：image")选取所有的图像按钮;
$("#form : reset ")选取所有的重置按钮;
$("#form:button")选取所有的按钮;
$("#form:file")选取所有的上传域;
$("#form:hidden")选取所有不可见元素;

$('p').click(function(){ //获取页面的每一个P元素，给每一个p元素添加一个onclick事件

$('#tb tbody tr:even').css('backgroundColor',',#888');
//获取id为tb的元素，然后寻找它下面的标签，再寻找tbody下索引时偶数的tr元素   
改变它的颜色
});
$('#btn').click(function(){
  var length=$("input [name=check]:checked").length;
  alert("选中个数为： "+length);
});
*******************************************************************
带空格和不带空格
*******************************************************************

var $t_a=$('.test  :hidden');//带空格的
选取class 为test的元素里面的隐藏元素
var $t_b=$('.test:hidden'); //不带空格
选取隐藏的class为test的元素
*******************************************************************
显示隐藏    toggle()
*******************************************************************
 if($category.is(":visible")){
    $category.hide();
 }else{
    $category.hide();
 }
 $toggleBtn.toggle(function(){
        //显示元素
          },function(){
        //隐藏元素
 });

    hide()隐藏元素
    show()显示隐藏的匹配元素
    css(name,value)给元素设置样式
    text(string)设置所有匹配元素的文本内容
    addClass(class)为匹配的元素添加指定类名
****************************************************************
查找节点元素
****************************************************************
var $li=$("ul li:eq(1)");获取ul 里面第2个li节点
var li_text=$li.text();获取第二个li元素节点的文本内容
****************************************************************
查找属性节点
****************************************************************
 var $para =$("p");获取p节点  
var p_text=$para.attr("title");获取p元素节点属性title
****************************************************************
添加节点append
****************************************************************
var $li1=$("<li><li>");  创建第一个元素
var $li2=$("<li><li>");  创建第二个元素
$("ul").append("$li1");   添加到ul节点中
$("ul").append("$li1") .append("$li2");
*******************************************************************
 append() 向每个匹配的元素内部追加内容
appendTo()  <p>我想说</p>
$("<p>你好</p>").appendTo("p");
我想说，你好

prepend()向每个匹配的元素内部前置内容
<p>我想说</p>
$("p").prepend("<b>你好</b>");
你好，我想说

prependTo();$("A").prependTo(B);
将A 放到B的前面
<p>我想说</p>
$("<b>你好</b>").prependTo("p");  
你好，我想说

after()在每个匹配的元素之后插入内容
<p>我想说</p>
$("p").after("<b>你好</b>");
我想说，你好

innerAfter();
$(A).innerAfter(B)将A插入到B的后面
<p>我想说</p>
$("<b>你好</b>").innerAfter("p");
我想说，你好

before()在每个匹配元素之前插入内容
<p>我想说</p>
$("p").before("<b>你好</b>");
你好，我想说

inserBefore();
$(A).before(B)将A插入到B的前面;
<p>我想说</p>
$("<b>你好</b>").innerBefore("p");
你好，我想说
**************************************************
remove 删除节点   empty()
**************************************************
$("ul li:eq(1)").remove();获取第2个li元素节点后把它删除
$("ul li").remove("li[title!=菠萝]");将li元素属性title不等于菠萝的li元素删除

empty()清空节点
$("ul li:eq(1)").empty();获取第二个li元素节点后，清空此元素里面的内容
 ******************************************************************************
复制节点
*******************************************************************************
$("ul li").click(function(){
 $(this).clone().appendTo("ul");复制当前的节点，将它追加到ul元素中
})

$(this).clone(true).appendTo("body"); //参数true
clone()方法中传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件

****************************************************************************
替换节点  replaceWith()   replaceAll()
**********************************************************************************=
将<p title ="请选择你喜欢的水果">你最喜欢的水果是？</p>

$("p").replaceWith("<strong>你最不喜欢的水果</strong>");
$("你最不喜欢的水果").replaceAll("p");
***********************************************************************************
包裹节点  wrap()   wrapAll()      wrapInner() 
*************************************************************************************
$("strong").wrap("<b></b>");用b标签把strong元素包裹起来
<b>
   <strong title="请选择你喜欢的水果">你喜欢的水果是</strong>
</b>
<b>
   <strong title="请选择你喜欢的水果">你喜欢的水果是</strong>
</b>
********************************************************************************
 wrapAll会将所有匹配的元素用一个元素来包裹. wrap()方法是所有的元素进行单独包裹
$("strong").wrapAll("<b></b>");
<b>
      <strong title="请选择你喜欢的水果">你喜欢的水果是</strong>
      <strong title="请选择你喜欢的水果">你喜欢的水果是</strong>
</b>
********************************************************************************
wrapInner()匹配元素的子内容（包括文本节点）
$("strong").wrapInner("<b></b>");
<strong title="选择你喜欢的水果">
   <b>你喜欢的水果是？</b>
</strong>
**********************************************************************************
属性操作  attr()获取和设置元素属性  removeAttr()删除元素属性
*********************************************************************************
var $para=$("p");  //获取<p>节点
var p_text=$para.attr("title");      //获取<p>元素节点属性title
$("p").attr("title"  ,  "you title")    //设置单个属性值
$("p").attr("title" : "you title" , "name":"test"); 
$("p").removeAttr("title")            //删除<p>元素的属性title
<p title="你喜欢的水果是?">你喜欢的水果是?</p>
删除后的效果 :  <p>你喜欢的水果是</p>
***********************************************************
             样式操作 attr()设置样式  addClass()追加样式
************************************************************
<p  class="myClass" title="你喜欢的水果是？">你喜欢的水果是？</p> 
  class也是P元素的属性 获取和设置都可以用 attr()来完成
var $p_class=$("p").attr("class");   //获取P元素的class
$("p").attr("class","hight"); 将p元素的class设为hight

*************************************************************
 addClass()追加样式

*****************************************************************
<p>test</p>
$("p").addClass("hight");
结果为 :  <p class="hight">test</p>
$("p").addClass("another");
结果为:<p class="hight  another">test</p>

*********************************************************************** 
 attr()设置样式
*********************************************************************** 
$("p").attr("class","hight");
结果为: 空的
$("p").attr("class","another");
结果为:<p class="another">test</p>
********************************************************************* 
 移除样式    removeClass()
********************************************************************** 
$("p").removeClass("hight") //移除<p>元素中值为“hight”的class
<p class="hight  another">test</p>
结果为 :<p class="another">test</p>
$("p").removeClass("hight").removeClass("another"); 把<p>元素的两个class都删除
$("p").removeClass("hight another") ;   把<p>元素的两个class都删除
$("p").removeClass();//不带参数时，移除<p>元素里的所有class
**************************************************************************
切换样式  toggle()        toggleClass()样式上的重复切换
***************************************************************************
  $toggleBtn.toggle(function(){
     //显示元素
}，function(){
  //隐藏元素
});   
$("p").toggleClass("another")//重复切换类名another 
当单击“切换样式”按钮后<p>元素的html代码由
<p class="myclass" title="你喜欢的水果？">你喜欢的水果是?</p>
变为 : <p class="myclass  another" title="你喜欢的水果？">你喜欢的水果是?</p>
再单击“切换样式”按钮后<p>元素的html代码由又变成原来的样子
*************************************************************************************
判断是否含有某个样式  hasClass()
**************************************************************************************
$("p").hasClass("another");===等于===$("p").is(".another");
判断P标签中是否含有“another”的 class
**************************************************************************************
设置和获取html、文本和值  text()  val()
**************************************************************************************
$("p").html();//获取<p>元素的html代码
$("p").html("<strong>你最喜欢的水果是?</strong>");
$("p").text();获取<p>元素的文本内容
$("p").text(" 你最喜欢的水果是? ");

****************************************************************************************
             focus() 获取焦点   blur()失去焦点
****************************************************************************************
当地址框获取鼠标焦点时，如果地址框的值为“请输入邮箱地址”，则清空地址框内的值
$("#address").focus(function(){
  var text_val=$(this).val();获取地址文本框的值
if(text_val=="请输入邮箱地址"){  // text_val==this.defaultValue
  $(this).val("");
}
});
当失去焦点时，如果地址框的值为空，则将地址框的值设置为“请输入邮箱地址”
$("#address").blur(function(){
   var text_val=$(this)val()//获取地址文本框的值
   if(text_val==""){
   $(this).val("请输入邮箱地址"); //$(this).val(this.defaultValue);
}
});
对密码框进行操作
$("#password").focus(function(){
   var text_val=$(this).val();
   if(text_val=="请输入邮箱密码"){
    $(this).val("");
}
});

$("#password").blur(function(){
  var text_val=$(this).val();
  if(text_val==""){
   $(this).val="请输入邮箱密码"
 }
});
******************************************************
选中单选，复选，下拉框
******************************************************
    <select id="single">
         <option>选择1号</option>
         <option>选择2号</option>
       <option>选择3号</option>
       </select>
         <select id="multipe" multiple="multiple" style="height: 120px">
       <option selected="selected">选择1号</option>
       <option>选择2号</option>
       <option>选择3号</option>
       <option>选择4号</option>
       <option selected="selected">选择5号</option>
  </select>
      <input type="checkbox" value="check1" />多选1
      <input type="checkbox" value="check2" />多选2
     <input type="checkbox" value="check3" />多选3
     <input type="checkbox" value="check4" />多选4
     <input type="radio" name="a" value="radio1">单选1
     <input type="radio" name="a"  value="radio2">单选2
     <input type="radio" name="a"   value="radio3">单选3
*****************************************************************************
    $("#single").val("选择2号");
   $("#multipe").val(["选择2号","选择3号"]);
   $(":checkbox").val(["check2","check3"]);
   $(":radio").val(["radio2"]);
*******************************************************************************
 遍历节点  children()       next()       prev()       siblings()        closest()
******************************************* ***********************************
children() 只考虑子元素，而不考虑任何后代元素
$("body").children();
$("p").children();
var $ul =$("ul").children();
*******************************************************************************
 next()    取得匹配元素后面紧邻的同辈元素
$("p").next();  取得紧邻<p>元素后的同辈元素
prev()    取得匹配元素前面紧邻的同辈元素
$("ul").prev() 取得紧邻<ul>元素前的同辈元素
siblings()  取得匹配元素前后所有的同辈元素
$("p").siblings() 取得紧邻<p>元素的同辈元素
closest() 取得最近的匹配元素
***********************************************************************************
   css-dom  操作
**********************************************************************************
$("p").css("color"); 获取<p>元素的样式颜色
$("p").css("color","red") <p>元素的样式颜色为红色
$("p").css({"fontSize":"30px","backgroundColor":"blue"});//同时设置字体大小和背景颜色
$("p").css({ fontSize : " 30px ", backgroundColor  :  " blue "} )
带上引号，既可写成“font-size”, 也可写成“fontSize”建议加引号
透明度：opacity
$("p").css("opacity","0.5"); 将<p>元素的透明度设置为半透明
$(element).css("height"); 获取某个元素的height属性
$("p").height();       获取<p>元素的高度值
$("p").height(100)   设置<p>元素高度值为100px
$("p").height("10em") 设置<p>元素的高度值为10em
$("p").width()  获取<p>元素的宽度值
$("p").width("400px");设置<p>元素的宽度为400px
***************************************************** 
1. offset()方法
**************************************************** 
它主要作用是获取元素在当前视窗的相对偏移，返回的对象包括两个属性 即top 和left
var offset =$("p").offset();   获取<p>元素的offset()
var left = offset.left; 获取左偏移
var top = offset.top;获取右偏移
*****************************************
2. position()方法
****************************************
var position=$("p").position(); 获取<p>元素的position();
var left =position.left();
var top=postion.top;
*****************************************
3. scrollTop()  方法  和scorllLeft() 方法
******************************************
这两方法作用分别是获取元素滚动条距顶端的距离和距左侧的距离
var $p=$("p");
var scrollTop=$p.scrollTop();获取元素滚动条距顶端的距离
var scrollLeft=$p.scrollLeft();获取元素的滚动条距左侧的距离
可以为这两个方法指定一个参数
$("textarea").scrollTop(300); 元素垂直滚动条滚动到指定位置
$(textarea).scrpllLeft(300) 元素横向滚动条滚动到指定位置
$("a.tooltip").mouseover(function(){
   显示
}).mouseout(function(){
   隐藏
})
*********************************************
事件绑定
**********************************************
bind(type [,data],fn); 它有3个参数 
  1. 第1个参数是事件类型，包括：blur、focus、load、resize、scroll、unload、click、
dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter
mouseleave、change、select、submit、keydown、keypress、keyup和error
也可以是自己定义的名称
  2.第2个参数为可选参数，作为even.data属性值传递给事件对象的额外数据对象
  3.第3个参数则是用来绑定的处理函数 

 $(function(){
  $("#panel h5.head").bind("click",function(){
   $(this).next("div.content").show();
   })
 })
 $(function(){
  $("#panel h5.head").bind("click",function(){
    var $content=$(this).next("div.content");
    if($content.is(":visible")){ 如果内容显示
       $content.hide()
}else{
      $content.show();
   }
  })
})
******************************************************************
改变绑定事件的类型
******************************************************************
$(function(){
 $("#panel h5.head").bind("mouseover",function(){
  $(this).next("div.content").show();
})
$("#panel h5.head").bind("mouseout",function(){
  $(this).next("div.content").head();
})
})
*****************************************
简写绑定事件
*****************************************
$(function(){
  $("#panel h5.head").mouseover(function(){
   $(this).next("div.content").show();
})
 $("#panel h5.head").mouseout(function(){
   $(this).next("div.content").hide();
})
********************************************
合成事件
********************************************
 1.hover(enter,leave);
hover()方法用于模拟光标悬停事件。当光标移动到元素上时会触发第一个函数enter,
当光标移出这个元素时，会触发指定的第2个函数
$(function(){
  $("#panel h5.head").hover(function(){
    $(this).next("div.content").show();
},function(){
  $(this).next("div.content").hide();

   })  
 })
})
*****************************************
toggle(fn1,fn2,.....fnN);
*****************************************
toggle()方法用于模拟鼠标连续单机事件，第1次单机元素，触发指定的第一个函数（fn1）
在单机同一元素师，则触发指定的第2 个函数（fn2）,如果有更多的函数则依次触发
 $(function(){
  $("#panel h5.head").toggle(function(){
     $(this).next("div.content").show();
},function(){
   $(this).next("div.content").hide();
})
})
****************************************************************************************
toggle可以切换元素的课件状态 ，如果元素师可见的，单击切换后则为隐藏，如果元素是隐藏的
单击后则为可见的 ，即也可以写成下面的代码
*****************************************************************************************
$(function(){
 $("#panel h5.head").toggle(function(){
     $(this).next("div.content").toggle();
},function(){
   $(this).next("div.content").toggle();
})
})
***************************************************************************************
再次加强效果
***************************************************************************************
.highlight{
  background:# orange;
}
$(function(){
 $("#panel h5.head").toggle(function(){
   $(this.addClass("highlight"));//添加高亮显示
   $(this).next("div.content").show();
},function(){
   $(this).removeClass("highlight");//移除高亮显示
   $(this).next("div.conteent").hide();
})
*******************************************************************
事件冒泡
********************************************************************
$(function(){
 $('span').bind("click",function(){//为span元素绑定click事件
   var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
   $("#msg").html(txt);
//为div 元素绑定click事件
 $("#content").bind("click",function(){
  var txt=$("#msg").html()+"<p>外层span被单击</p>";
 $("#msg").html(txt);
})
//为body 元素绑定click事件
$("body").bind("click",function(){
  var txt=$("#msg").html()+"<p>body元素被单击</p>";
 $("#msg").html(txt);
})
})
})
})
<div id="content">
  外层div元素
  <span>内层span元素</span>
  外层div元素
</div>
<div id="msg"></div>
***********************************************
事件对象
*************************************************
在程序中使用事件对象非常简单，只需为函数添加一个参数
$("element").bind("click",function(event){ //event事件对象
  //...........
})
*******************************************
停止冒泡事件 stopPropagation()
******************************************
$("span").bind("click",function(event){ //event 事件对象
  var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
   $("#msg").html(txt);
   event.stopPropagation(); //事件停止冒泡
   //  可以把event.stopPropagation()
   // 改为 return false; 
})
*************************************************
阻止元素默认行为preventDefault() 
*************************************************
$(function(){
 $("#sub").bind("click",function(event){
  var username=$("#username").val();//获取元素的值
   if(username==""){
   $("#msg").html("<p>用户名不能为空</p>");
    event.perventDefault();//阻止默认行为（表单提交）
 }
})
})
 可以把 event.perventDefault();//阻止默认行为（表单提交）
改为  return false；
*************************************************************
 事件对象属性
*************************************************************
（1）event.type()方法 可以获取到事件类型
$("a").click(function(event){
 alert(event.type);//获取事件类型
  return false；//阻止事件跳转
})
************************************************************
移除事件
************************************************************
$(functin(){
 $("#btn").bind("click",function(){
  $("#test").append("<p>我的绑定函数1</p>");
}).bind("click",function(){
  $("#test").append("<p>我的绑定函数2</p>");
})
})
<button id="btn">单击我</button>
<dv id="test"></div>
<button id="delAll">删除所有事件</button>
 $('#delAll').click(function(){
  $("#btn").unbind("click");
   $("#btn").unbind( ); 效果一样
})
*************************************************************
unbind（[type][ ,data]）;
***************************************************************
第1个是参数类型，第2个参数是将要移除的函数
 （1）如果没有参数，则删除所有的绑定事件
 （2）如果提供了事件类型作为参数，则只删除该类型下的绑定事件
 （3）如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件
处理函数会被删除

$(function(){
  $("#btn").bind("click",myfun1=function(){
   $("#test").append("<p>我的绑定函数1</p>")
}).bind("click",myfun2=function(){
    $("#test").append("<p>我的绑定函数2</p>")
})
})
删除单独某个事件
$("#del").click(funciton(){
 $("#btn").unbind("click",myfun2);//删除绑定函数2
})
***************************************************************
One（type,[data], fn）方法
****************************************************************
$(function(){
  $("#btn").one("click", function(){
   $("#test").append("<p>我的绑定函数1</p>")
}).one("click", function(){
    $("#test").append("<p>我的绑定函数2</p>")
})
})
用户第1次单击按钮时，处理函数才执行，之后的单击毫无作用
*****************************************************************
模拟操作
******************************************************************
$("#btn").trigger("click");//页面加载完毕后立即输出想要的结果
$("#btn").click();  //简化写法
***************************************************************
 2. 触发自定义事件
*****************************************************************
$("#btn").bind("myClick",function(){
 $("#test").append("<p>我的自定义事件</p>");
})
触发这个事件，用以下代码
$("#btn").trigger("myClick");
***************************************************
 3.传递数据
trigger(type [,data])
*******************************************************
第1个是触发的事件类型,第二个参数是要传递给事件处理函数的附加数据
$("#btn").bind("myClick",function(event,message1,message2){//获取数据
  $("#test").append("<p>"+message+message2+"</p>");
})
$("#btn").trigger("myClick",["我的自定义","事件"]);//传递两个数据

*****************************************************************
绑定多个事件类型
******************************************************************
$(funcion(){
 $("div").bind("mouseover mouseout",function(){
   $(this).toggleClass("over");
})
 })
第二种    //当光标滑入<div>元素时，该元素的class切换为over,
当光标划出<div>元素时class切换为原来的值
$(function(){
 $("div").bind("mouseover",function(){
  $(this).toggleClass("over");
}).bind("mouseout",function(){
  $(this).toggleClass("over");
}) 
})
**********************************************************************
添加命名空间，便于管理
**********************************************************************
$(function(){
$("div").bind("click.plugin",function(){
  $("body").append("<p>click事件</p>");
})
$("div").bind("mouseover.plugin",function(){
 $("body").append("<p>mouseover事件</p>");
})
$("div").bind("dbclick",function(){
 $("body").append("<p>dbclick事件</p>");
})

$("button").click(function(){
 $("div").unbind(".plugin");
})
})
结果“plugin”的命名空间被删除，“dbclick”事件仍然存在
$("div").unbind("click").unbind("mouseover")
******************************************************
相同的事件名称，不同命名空间执行方法
******************************************************
$(function(){
 $("div").bind("click",funcion(){
  $("body").append("<p>click事件<p>");
})
$("div").bind("click.plugin",function(){
  $("body").append("<p>click.plugin事件</p>");
})
$("button").click(function(){
 $("div").trigger("click!");
 $("div").trigger("click");//去掉感叹号 ，两者都被触发
})
})
trigger("click!");后面的感叹号的作用是匹配所有不包含在命名空间的click方法

**************************************************************
jquery  中的动画
***************************************************************
$("element").hide(); //隐藏element元素
element.css("display","none"); //通过css隐藏元素
$("element").show();
$("element").show("slow"); slow 600毫秒，normal 400，fast200
$("element").show(1000); 元素在1000毫秒内显示出来
$("element").hide(1000);元素在1000毫秒内隐藏
$("#panel h5.head").toggle(function(){
   $(this).next("div.content").hide(500);
},function(){
   $(this).next("div.content").show(500);
})
*********************************************
fadeln()方法  和fadeOut()方法
*************************************************
这两个方法只改变元素的不透明度，直到元素消失
$("#panel h5.head").toggle(function(){
 $(this).next("div.content").fadeOut() ;
},function(){
 $(this).next("div.content").fadeln() ;
})
***********************************************
slideUp()方法和slideDown()方法
**************************************************
这两个方法只会改变元素的高度，如果一个元素的display属性
值为“none”,当调用slideDown()方法时，这个元素由上至下延伸
slideUp()由下到上缩短至隐藏
$("#panel h5.head").toggle(function(){
  $(this).next("div.content").slideUp();
},function(){
$(this).next("div.content").slideDown();
})
******************************************************
自定义动画方法animate()
*******************************************************
animate(params,speed,callback);
（1）params:一个包含样式属性及值的映射，比如{propety1:"value",propety2:"value",....}
（2）speed:速度参数，可选
（3）callback:在动画完成时执行的函数，可选

#panel{
 position:relative; 必须把元素的position样式设置为relative或者relative
 width:100px;
 height:100px;
 border:1px solid #0050D0;
 background:#96E555;
 cursor:pointer;
}
$(function(){
  $("#panel").click(function(){
 $(this).animat({left:"500px"},3000); 3秒内向右移动500像素
 })
})
*********************************************************
累加、累减动画
**********************************************************
$(function(){
  $("#panel").click(function(){
  $(this).animate({left:"+=500px"},300);当前位置累加500px  
})
 })
***********************************************************
多重动画
************************************************************
$(function(){
 $("#myImg").click(function(){
  $(this).animate({left:"500px",height:"200px"},3000); 同时发生
})
})
$(this).animat({left:"500px"},3000)
$(this).animat({height:"200px"},3000)这两个动作分开执行
$(this).animat({left:"500px"},3000).animat({height:"200px"},3000)这是链式写法
***************************************************************
综合动画
****************************************************************
$(function(){
 $("#panel").css("opacity","0.5 ")设置不透明度
 $("#panel").click(function(){
  $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
  .animate({top:"200px",width:"200px"},3000)
  .fadeOut("slow");
})
})
***********************************************************************
动画回调函数
**********************************************************************
css("border","5px solid blue")
只要把css()方法写在最后一个动画的回调函数里
 $("#panel").click(function(){
  $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
  .animate({top:"200px",width:"200px"},3000，function(){
   $(this).css("border","5px solid blue")
     })
    })
  })
********************************************************
停止动画和判断是否处于动画状态
*********************************************************
1.停止元素的动画
stop([clearQueue] [,gotoEnd] );
参数clearQuenue和gotoEnd 
2.判断元素是否处于动画状态
if(!$(element).is(":animated")){ //判断元素是否正处于动画状态
  //如果当前没有进行动画，则添加新动画
}
*************************************************************
toggle(speed,[callback])
slideToggle(speed,[callback])
fadeTo(speed,opacity,[callback])
1 . toggle()方法
 $("panel h5.head").click(function(){
  $(this).next("div.content").toggle();
})
2 .sideToggle()方法 通过高度变化来切换匹配元素的可见性
$("#panel h5.head").click(function(){
  $(this).next("div.content").slideToggle();
 })
3.fadeTo()方法 可以把元素的不透明度以渐进方式调整指定的值
$("#panel h5.head").click(function(){
 $(this).next("div.content").fadeTo(600,0.2);
})
***********************************************************************
改变样式属性
***********************************************************************
hide()和show() 显示和隐藏
fadeIn()和faddeOut()改变透明度
slideUp()和slideDown()只改变高度
fadeTo()只改变不透明度
toggel() 显示和隐藏
sideToggle() 只改变高度
animate() 自定义动画方法
****************************************************************************
表单应用
****************************************************************************
失去焦点和得到焦点改变文本框内的样式
.focus{
  border:1px solid #f00;
  background: #fcc;
}
$(function(){
   $(":input").focus(function(){
    $(this.addClass("focus"))
},blur(function(){
   $(this).removeClass("focus");
}))
})
*****************************************************************************
改变文本域的大小
*****************************************************************************
$(function(){
  var $content=$("#content");//获取文本框的内容
   $(".bigger").click(function(){
    if($content.height()<500){
   $content.height($content.height()+50);
  //$content.animate({height : "+=50"},400);
  //评论框的高度会在0.4秒内增大50px
}
})
$(".smaller").click(fucntion(){
  if($content.height()>50){
  $content.height($content.height()-50);
 //$content.animate({height : "+=50"},400);
  //评论框的高度会在0.4秒内减小50px
  }
 })
})
********************************************************************************
滚动条高度变化
********************************************************************************
$(function(){
   var $content=$("#content");
  $(".up").click(function(){//"向上"按钮绑定单击事件
  if(!$comment.is(":animated")){//判断是否处于动画
  $content.aimate({scrollTop:“-=50”},400);
}
})
 $(".down").click(function(){
  if(!$content.is(":animate")){
  $content.animate({scrollTop : "+=50"},400);
}
})
})
***************************************************
复选框的应用
****************************************************
全选
$("#checkedAll").click(function(){
  $("[name=items]:checkbox").attr("checked",true);
})
全不选
$("#checkedNo").click(function(){
 $("[name=items]:checkbox").attr('checked',false);
})
})
反选
$("#checkRev").click(function(){
 $("[name=items]":checkbox).each(function(){
 //  $(this).attr("checked",!$(this).attr("checked"))
     this.checked=!this.checked;
})
})
*********************************************************
下拉框的应用
*********************************************************
<span id="add">将选中的添加到右边</span>
<span id="add_all">全部添加到右边</span>
<span id="remove">选中的删除到左边</span>
<span id="remove_all">全部删除到左边</span>
$("#add").click(function(){
  var $opttions=$("#select1 option:selected");获取选中的项
  var $remove=$options.remove(); 删除下拉表中的选项
  $remove.appendTo("#select2"); 追加到右边
})
简化写法
$("#add").click(function(){
  var $options=$("#select1 option:selected")//获取选中的项
  $options.appendTo("#select2"); //追加到对方

$("#add_all").click(function(){
  var $options=$("#select1 option");获取全部选项
  $options.appendTo("#select2");追加给对方
})
})
双击某个选项添加给对方
$("#select1").dblclick(function(){//绑定双击事件
 var $options=$("option:selected",this);获取选中的项
 $options.appendTo("#select2"); 追加个对方
})
************************************************************** 
表单的验证
***************************************************************
$("form:input.required").each(function(){
 var $required=$("<strong class="high"> *</strong>"); 创建元素
 $(this).parent().append($required);//把它追加到文档中
})
$("form ;input").blur(function(){
  为表单添加失去焦点事件
}) .keyup(function(){
  用户松开按键的时候出发
}).focus(function(){
   元素得到焦点时出发
})
******************************************************************
表格的应用
*******************************************************************
隔行变色 
.even{background : #FFF38F} 偶数行样式
.odd{background：#FFFFEEE} 奇数样式
$(function(){
 $("tr : odd").addClass("odd");
 $("tr : even").addClass("even");
})
上边的会连表头算进去，排除表头，将选择符改成下面的代码
$(function(){
 $("tbody>tr : odd").addClass("odd");
 $("tbody>tr : even").addClass("even");
})
*************************************************
contains()高亮显示  
$("tr:contaions('王五')").addClass("seected");高亮显示王五所在的行

将鼠标选中的高亮显，同时选中单选框
$("tbody>tr").click(function(){
  $(this)
            .addClass("selected")
            .siblings().removeClass("selected")
            .end()
            .find(":radio").attr("checked",true)
})
将默认选中的高亮显示  
$('table : radion:checked').parent().parent().addClass("selected");
$("tbody>tr:has(:checked)").addClass("selected");
*******************************************************************
复选框控制表格高亮
******************************************************************* 
$("tbody>tr").click(function(){
  if($(this).hasClass("selected")){//判断是否含有selected高亮样式
   $(this)
            .removeClass("selected");
            .find(":checkbox").attr("checked",false);
}else{
    $(this)
             .addClass("selected")
             .find(":checkbox").attr("checked",true)
}
})
简化后的
$("tbody>tr").click(funciton(){
 var hasSelected=$(this).hasClass("selected");判断当前是否选中
  $(this)[hasSelected?"removeClass":"addClass"]("selected");
  如果选中，则移除selected类，否则就加上selected类
 .find(":checkbox").attr("checked",!hasSelected)查找内部的checkbox，设置对应属性
})
**************************************************************************8
$(function(){
 $("tr.parent").click(function(){ 获取所谓父行
   $(this)
          .toggleClass("selected") 添加/删除高亮显示
          .siblings(".child_"+this.id).toggle();隐藏显示所谓的子行
})
})
**************************************************************************
表格内容筛选  
**************************************************************************
$("tr:contains("王五")").addClass("selected"); 
//contains选择器，能匹配包含指定文本的元素
$(function(){ 只显示出姓李的
  $("table tbody tr").hide()
         filter(":contains(李)").show() ;
})
查找
$(function(){
 $("#filterName").keyup(function(){
   $("table tbody tr").hide()
    .filter(":contains('"+( $(this).val() )+"')").show();
})
})
 字体切换   22页
隐藏显示切换  22页
 换肤24页