Jquery 学习 初级

 一直在用，也没看过书，用是用了 但好多都乱用，来吧来吧  Code School学学习~~

 1、Jquery 作用？ 

         找到HTML页面元素；2.改变HTML内容；3.根据用户操作作出反馈；4.在页面中使用动画元素；5.与网络交互。。。

 2、Jquery选择器

  下面基本的选择器，选择DOM的不同元素

  原来这个符合$=jquery啊..

• DOM 准备好事件；$(document).ready(function(){  ....});       //(DOM  say "i am ready")
• 取DOM节点元素 $("h1");
  
• 取 有id的元素  $("#XXid");
  
• 取 类名class的元素 $(".classname")；
  
• 取CSS元素    CSS :    P{} 、    #container{} 、  .articles{}
•         分别对应 jquery:  $("P");  $("#container");  $(".articles") ;   

 3、遍历DOM

　  1) $("#id > li");   取该id直属的li节点元素 ；关键符号：  >   直属

     2) $('#XXid,.classname');选择多个元素（用逗号分割）

     3)$("#id   li:first");  取 li的第一个节点 、$("#id   li:last");  最后1个 ;$("#id   li:odd");  奇数；$("#id   li:even");  偶数

     4)$("#id").find("li");  取到该id下的所有li;遍历会快;

     5)遍历还可以 $('li').first();  $('li').last(); $('li').next(); $('li').prev();  

     6)遍历当前元素直属节点 $("#id").children("li"); 

     7)父节点 $("#id").parent();

4、Jquery 字符变成数字 +号

var  quantity = +$(this).val ();

5、Juery 阻止浏览器默认事件（如自动跳到顶端）

$('.vacation'). on('click', ' .expand', 

    function(event){

       event.preventDefault();

});

6、Jquery 动画

$(this).animate ({'top': '-10px'});   //像上跳动10px

$(this).animate ({'top': '-10px'},  'fast');

$(this).animate ({'top': '-10px'},  200 ); //加快速度

$(this).animate ({'top': '-10px'},  'slow');

$(this).animate ({'top': '-10px'},  600 );//减慢速度

或者 CSS 实现

.vacation {

transition: top  0.2 s;
}
.highlighted {
  top : -10 px;
}
$(document ).ready(function () {
  $('#vacations').on('click', '.vacation', function () {

    $(this).toggleClass('highlighted');

});
});

有些浏览器不支持transition 可以加上浏览器

-moz-transition: top  0.2 s;
  -o-transition : top  0.2 s;
  -webkit-transition : top 0.2 s;