jQuery的笔记

1. 排除头部给行添加样式
例如:
<table>
 <thead>
    <tr><th>姓名</th></tr>
 </thead>
 <tbody>
    <tr><td>梁继龙</td><td>男</td><td>广东阳春</td></tr>
 </tbody>
</table>
//实现
$(function(){
 $('tbody>tr:odd').addClass('odd');  //给tbody中的奇数行添加样式
 $('tbody>tr:even').addClass('even');  //给tbody中的偶数行添加样式
}); 
2．普通的隔行变色
CSS代码　
　.even{background:#FFFFFFF} //偶数行样式
　.odd{background:#FFFFFFF} //奇数行样式
实现
$(function(){
 $('tr:odd').addClass("odd");  　//给偶数行添加样式
 $('tr:even').addClass("even");  //给奇数行添加样式
})
 
/*注意:$('tr:odd')和$('tr:even')选择器中索引是从0开始的，因此第一行是偶数
*/
 

3. 单选框控制表格行高亮
例如:给单击的当前行添加高亮，然后将它的兄弟行的高亮样式去掉，最后将当前行里的单选设置为选中
$('tbody>tr:').click(function(){
 $(this).addClass('selected').siblings().removeClass('selected').end()
 .find(':radio').attr('checked',true);
});
4. 处理默认已经有单选框被选中
$("table:radio:checked").parent().parent().addClass('selected');
//或者
$('table:radio:checked').parents('tr').addClass('selected');
5. 通过has选择器进一步简化，表示含有选中的单选框的<tr>行将被高度显示
$('tbody>tr:has(":checked")').addClsss('selected');

6.复选框控制表格行高亮
注意:复选框与单选框不同，它并没有限制被选择的个数
例如:如果已经高亮了，则移除它并去掉当前复选框的选中的状态，如果没有，则添加样式并将当前行的复选框选中。
$('tbody>tr').click(function(){
 if($(this).hasClass('selected')){  //判断是否有selected高度样式
  $(this).removeClass('selected').find(':checkbox').attr('checked',false);
 }else{
   $(this).addClass('selected').find(':checked').attr('checked',true);
 }
})
//或者用三元运算实现
$('tbody>tr').click(function(){
 //判断当前是否选中
 var hasSelected=$(this).hasClass('selected');
 //如果选中,则移出selected类,否则就加上selected类
 $(this)[hasSelected?"removeClass":"addClass"]('selected')
 //查找内部的checkbox,设置对应的属性
 .find(':checked').attr("checked",!hasSelected);
});
------------------------------------------------------------------------------------------
表格展开关闭实例
$(function(){
 $('tr.parent').click(function(){
  $(this).toggleClass('selected')
 .siblings('.child'+this.id)+toggle();   //隐藏/显示的子行  (.chlid_+this.id)表 示.child class=".child"+某个值即:例如:.child1 或.child2
 })
});
表格的内容筛选
例如:高度显示王五
 $(function(){
 $("table tbody tr").hide()fileter(":contains(王五)").show();
});
   ////----------------表单对象属性过虑示例--------------///
1.改变表单内可用<input>元素的值 
  $(#form1 input:enabled).val("这里变化了");
2.改变表单内不可用<input>元素的值 
  $(#form1 input:disabled).val("这里变化了");
3.获得多选框选中的个数
  $("input:checked").length
4.获得下拉框选中的内容
  $("select:selected").text();
5.选中所有<input>、<textarea>,<select>和<button>元素 
  $(":input")
6.选中所有的上传域
 $(":file")
7.总结：其他属性的所有选中都是$(":+属性类型")
  例如:  $("image")   ....
8.选择第一个元素
  :first
  $('div:first')选取所有<div>元素中第一个<div>元素
9.选取最后一个元素
  :last
  $("div:last")选取所有<div>元素中最后一个<div>元素
10.去除所有与给定选择器匹配的元素
  :not(selector)
  $('inptu:not(.myClass)')选取clas不是myClass的<input>元素
11.选取索引是偶数的所有元素,索引从0开始
  :even
  $("input:even")选取索引是偶数的<input>元素
12.选取索引是奇数的所有元素,索引从0开始
  :odd
  $("input:odd")选取索引是奇数的<input>元素
13.选取索引是等于index的元素(索引从0开始)
  :eq(index)
  $("input:eq(1)")选取索等于1的<input>元素
14.选取索引是大于index的元素(索引从0开始)
  :gt(index)
  $("input:gt(1)")选取索大于1的<input>元素  //注意:大于1,而不包括1
15.选取索引是小于index的元素(索引从0开始)
  :lt(index)
  $("input:lt(1)")选取索小于1的<input>元素  //注意:小于1,而不包括1
16.选取所有的标题元素,例如h1 h2....
  :header
  $(":header")选取网页中所有的<h1>....
17.选取当前正在执行动画的所有元素
  :animated
  $('div:animated')选取当前正在执行动画的<div>元素
//-----------------------事件绑定方法和方法的使用-----------------------
bind()方法
bind(type[,data],fn);
合成事件
1.hover()方法
 语法: hover(enter,leave);
 hover()方法
 准确来说代替bind("mouseenter") and bind("mouseleave")而不是代替bind("mouseover"); and bind("mouseout")
2. toggle()方法
语法  toggle(fn1,fn2,fnN);  fn1 到fnN依次被触发直到完毕
3 .event.stopPropagation() //停止事件冒泡
4.event.preventDefault() //阻止默认行为
5. event,target()方法
作用于是获取触发事件的元素
alert(event.target.href) //获取触发事件的<a>的href属性值
6. event.relateTarget()方法
   mouseover和mouseout所发生的元素可以通过event.target()方法来访问
  event.relateTarget()方法在mouseover中相当于IE浏览器的event.fromElement()方法
  在mouseout中相当于IE浏览器的event.toElement()方法
7.event.pageX()方法和event.pageY()方法
作用是获取到光标相对于页面的x坐标和y坐标 
注意:如果没有使用jquery时,IE浏览器是用event.x()/event.y()方法,而Firefox浏览器中用.event.pageX()/event.pageY()方法
8.event.which()方法
作用是在鼠标事件中获取到鼠标的左,右,中键.在键盘事件获取键盘的按键
$( function(){
   $("body").mousedown(function(e){
   alert(e.which);  //1=左键      2=中   ,3=右
  })
})

9.event.metaKey()方法
针对不同浏览器对键盘中的<ctrl>按键解释不同,在jquery并规定event.metaKey()方法为键盘事件中获取<ctrl>按键
10.event.originalEvent()方法
作用指向原始的事件对象

11.fadeIn()和fadeOut()方法
.fadeIn()和fadeOut()只是改变元素的不透明度
fadeOut方法会指定的一段时间降低元素的不透明度,直到元素完全消失,而fadeOut()刚相反

12.slideUp()和slideDown()方法
  只是改变元素的高度,如果一个元素的display属性值为none当调用slideDown()时,这个元素将会由上至下延伸显示,slideUp正好相反,从下到上缩短隐藏.
 

1.offset()方法
  它的作用是获取元素在当前视窗的相对偏移
  例如:
   var $offset=$('p').offset();  //获取<p>元素的offset() 
   var $left=$offset.left;   //获取左边偏移
 
2.position()方法
    作用是获取相对于最近的一个position样式属性为relative或absolute的祖父节点的相对偏移,与offset()一样
 它返回的对象也包括两个属性,即top和left
  例如:
  var $p=$('p').position() ;     //获取<p>元素的position
  var $left=$p.left/top;     //获取左边/头的偏移 

3.scrollTop()和scrollLeft()方法
  它们的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离
  
 var $p=$('p');
 var $sT=$p.scrollTop(); //获取元素的滚动条距顶端的距离
 var $sL=$p.scrollLeft(); //获取元素的滚动条距左侧的距离
//或者指定参数
 $('textarea').scrollTop(300 );  //元素的垂直滚动条到指定的位置
3-1-1
1.使用HTML-DOM来获取表单对象的方法
document.forms  //html-dom提供一个forms对象
2.使用HTML-DOM来获取元素的SRC属性的方法
element.src
3-2-1
找节点
var $li = $("ul li:eq(1)");  //获取<ul>里第二个<li>节点
3-2-2
查找属性节点
** attr() 方法可以获取各种属性的值,并且方法可以放参数
   eg:
 var   $p=$("p");        //获取<p>节点
 var   p_txt=$p.attr("title");  //获取<p>元素节点属性title
3-2-3
创建节点
例如:创建<li>
</li>子节点到<ul>
下方
var $li=$("<li></li>");  //创建了一个子节点
$("ul").append("$li");      //把子节点添加到<ul>下方
****
注意:
     1.动态创建的新元素节点不会被自动添加到文档中.
     2.当创建单个元素时,要注意闭合标签和使用标准的XHTML格式.例如:创建 一个<p>元素,可以用$("<p/">)或者$("<p></p>"),但是不要使用$("<p>")或者大写$("P/");
 
插入节点的方法
1   append()  向每个匹配的元素内部追加内容
eg:
html代码:
<p>我想说:</p>
jQuery代码
$("p").append("<b>你好</b>")
结果:
<p>我想说:<b>你好</b><p/>
2   appendTo()  将所有匹配的元素追加到指定的元素中实际上,颠倒了常规$(A).append(B)的操作即不是将B追加到A中,而是将A追加到B中
eg:
html代码:
<p>我想说:</p>
jQuery代码
$("<b>你好</b>").append("p")
结果:
<p>我想说:<b>你好</b><p/>
3.prepend()   向每个匹配的元素内部前置内容
eg:
html代码:
<p>我想说:</p>
jQuery代码
$("p").prepend("<b>你好</b>");
结果:
<p><b>你好</b>我想说:<p/>
4  prependTo()  将所有匹配的元素前置到指定的元素中实际上,颠倒了常规$(A).append(B)的操作即不是将B前置到A中,而是将A前置到B中
eg:
html代码:
<p>我想说:</p>
jQuery代码
$("<b>你好</b>").append("p")
结果:
<p>我想说:<b>你好</b></p>

5.after()在每个匹配的元素之后插入内容
html代码:
<p>我想说:</p>
jQuery代码
$("p").after("<b>你好</b>");
结果:
<p>我想说:</p><b>你好</b>
------------------------------------------复选框、下拉框-------------
//全选
$("#checkedAll").click(function(){    //checkedAll被点击的ID
    $('[name=items]:checkbox').attr('checked',true)   //items被选name
}) 
//全不选
$("#checkedNo").click(function(){    //checkedNo被点击的ID
    $('[name=items]:checkbox').attr('checked',false)   //items被选name
})
//反选
$("#checkedReturn").click(function(){    //checkedReturn被点击的ID
    $('[name=items]:checkbox').each(function(){         //each是遍历循环
 $(this).attr("checked",!$(this).attr("checked"));
   })   
}) 
或者
$("checkedReturn").click(function(){
 $('[name=items]:checkbox').each(function(){
 this.checked=!this.checked;
 })
});

//弹出被选的提交
$("#send").click(function(){
   var str="你 选中的是:\r\n";
   $('[name=items]:checkbox:checked').each(function(){
   str +=$(this).val()+"\r\n";
 });
   alert(str);
});

$('[name=items]:checkbox').click(function(){
var $st=$('[name=items]:checkbox');
$('#che').attr('checked'),$st.length==$st.filter(':checked').length
});

-----------------------------------------------------------------
假设将左边的选项添加到右边
$('#add').click(function(){    //dblclick --双击事件
    var $options=$('select1 option:selected');  //获取选中的选项
   // var $remove=$options.remove();   //删除下拉框列表中选中的选项
    $remove.appendTo("select2");;   //追加给对方
});
------------------------------------------------------------显示和隐藏效果-----------
1.show()和hide()方法让元素动起来
例如:指定一个速度关键字slow /normal /fast
$("element").show("slow");
2.指定时间使元素在时间内显示/;隐藏
$("element").show(1000); 
$("element").hide(1000);
3.next的使用
$(this).next("div.content").hide(500);
4.自定义动画animate()
语法:animate(params,speed,callback);
说明: parms:一个包含样式属性及值的映射,例如:{property1:"value1", ..........}
 speed:速度参数,可选
 callback:在动画完成时执行的函数,可选
5.累加和累减动画
"+ =" 或   "-  ="表示在当前位置累加/减
$(function(){
 $("#pane1").click(function(){
 $(this).animate({left: "+=500px"},300); //在当前位置累加500px
    });
});

6.多重动画
A. 同时执行多个动画
 eg: 在元素向右滑动的同时,放大的高度.
  $(function(){
     $("#myImag").click(function(){
      $(this).animate({left:"500px",height:"200px"},3000);
        //或者
       //$(this).animate({left:"500px"},3000).animate({height:"200px"},3000);
  })
})

7.综合动画
单击<div>向右移动并增大高度,将它的不透明从50%变换到100%,然后让它从上到下移动,同时它的宽度变大
当完成这些效果,让它以谈出的方式隐藏
$(function(){ 
     $("#pane1").css("opacity","0.5"); //(opacity)设置不透明度
        $("#pane1").click(function()){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
       .animate({top:"200px",with:"200px"}, 3000).fadeOut("slow");
  }
})
8.停止动画和判断是否处于动画状态
语法:stop([clearQueue][,gotoEnd]);
   clearQueue代表是否要清空未执行完的动画队列,  gotoEnd代表是否直接将正在执行的动画跳转到未状态
 

   -----------层次选择器----------
选择器
  1.$('ancestor descendant')
  选取ancestor 元素里的所有descendant(后代)元素
  $('div span')选取<div>里的所有的<span>元素
  2.$('parent>child')
  选取parent元素下的child(子元素)与$('ancestor descendant')
  有区别,$('ancestor descendant')选择后代元素
  3.$('prev+next')
   选择紧接在prev元素后的next元素
   $('.one+div')选取class为one的下一个<div>元素
  4.$('prev~siblings')
   选取prev元素之后的所有siblings
   $('#two~div')选取ID为two的元素后面的所有<div>兄弟元素
   -------------------------------------------------------------选择器的认识-----------------------------------
//注意:
  1.3.1版本彻底放弃1.1.0版本遗留下的@符号,如果使用1.3.1以上的版本
那么不能在属性前添加@符号
Eg:
  $('div[@title="test"]')   //这是错误的
  $('div[title="test"]')   //这是正确的
1.带空格的选择器与不带选择器的区别
 eg:
  var $a=$('.test :hidden');
  var $b=$('.test:hidden');
 输出长度
 var $a_len=$a.length;  //输出4
 var $b_len=$b.length;  //输出3
选择器
 1. #id根据给定ID匹配一个元素，返回单个元素
 2 .class根据给定的类名匹配元素,返回集合
 3. element根据给定的元素名匹配元素,返回集合
   $('p') //选中所有的<p>元素
 4. *匹配所有元素,返回集合
5. selector1,selector2,...将每一个选择器匹配到的元素合并后一起返回
  $('div,span,p.myClass')选取所有<div>,<span>,和拥有class为myClass的<p>标签的一组元素

1.改变id为one的元素的背景
 $('one').css("background","bEEEEE");
2.改变class为mini的所有元素的背景色
 $('.mini').css("background","bEEEEE");
3.改变元素名是<div>的所有元素的背景
 $('div').css("background","bEEEEE");
4.改变所有元素的背景色
 $('*').css("background","bEEEEE");
5.改变所有的<span>元素和id为two元素的背景色
 $('span,#two').css("background","bEEEEE");

 //$('prev+next')选择器与next()方法等价关系
  $('.one+div') 等价   $('.one').next("div");
  $('#prev+div') 等价  $('#prev').nextAll("div");
triggerHandler和trigger区别.txt
1.trigger("blur')不仅会触发为元素邦定的blur事件,也会触发浏览器默认的blur事件,即不能将浏览器光标定位到文本框上,而triggerHandler("blur")只会触发为元素邦定的blur事件,而不会触发浏览器默认的的blur事件
2.执行默认操作
如果只想触发绑定的focus事件,而不想执行浏览器默认操作用 triggerHandler()方法
$("input").triggerHandler("focus");

$("div").trigger("click!");   //感叹号的作用是匹配所有不包含在命名空间中的click方法
 
---------------------------1.移除事件---------------
1.移除所有click事件
$('#delall').click(function(){$("#btn").unbind("click")});
或者$("delall").click(function(){$("#btn").unbind()})

2.移除单个事件
$("delOne").click(function(){$("#btn").unbind("click",myOnes)})
3.移除节点,remove()和empty()
1).remove()方法的作用是从DOM中所有匹配的元素，传入的参数用于根据jquery表达式来筛选元素
 Eg:从<ul>节点中的第二个<li>元素节点
 $('ul li:eq(1)').remove();  //获取第二个<li>元素节点后,将它从网页中删除
 //或者删除之后再重新添加到<ul>元素里
 var $li=$('ul li:eq(1)').remove();
 $li.appendTo('ul');  //添加/追加到Ul元素里
 2).empty()方法并不是删除节点，而是清空，它能清空元素中的所有的后代节点
 $('ul li:eq(1)').empty();
1.查找元素节点
 var $li==$('ul li:eq(1)');  //获取<ul>里第2个<li>节点
 var li=$li.text();   //获取第2个<li>元素节点的文本内容
2.查找属性节点
 var $p=$('p');    //获取<p>节点
 var p_txt=$p.attr('title');  //获取<p>元素节点属性title