jQuery 札记

• Selector

  $() => selector，里面可以放'div','.button','#green'等等element。这个整体相当于一个object，它有许多的method
  

  • selector在选择element时要注意表达方法：
    
    • div 级用’div’
    • class=’hello’ 级用’.hello’
    • id=’hello’ 级用’#hello’

• 一般结构

  $(document).ready(something);
  // document有两点特殊：不是HTML element； 不用加引号
  // ready表示一旦HTML加载完，即刻执行something
  
  // 更为一般具体的结构表示为：
  $(document).ready(function(){
      $('thingToTouch').event(function(){ // 用来触发，如果想effect立即呈现，可以去掉这部分
          $('thingToEffect').effect(); // 用来描述要呈现的效果
      });
  });
  

• 一些简单用法

  $('div').dblclick(function(){...}); //  双击触发
  $('div').mouseenter(function(){
      $('div').hide(); // 当鼠标移动到div上时隐藏div
  });
  $('div').hover(function(){...}); //  当鼠标移动到div上时触发
  $('div').hover(
      function(){
          $(this).addClass('active'); // 当鼠标移动到div上时触发
      }, // 注意这里是 "," 号不是 ";" 号
      function(){
          $(this).removeClass('active'); // 当鼠标移开时触发
      }
  ); // 这种写法很常见，两个function并非一定要是对立功能
  
  $('div').fadeTo('fast',0.65); // div快速变透明，透明指数为0.65
  $('p, li').fadeTo('slow', 0); // 对p, li同时生效
  $('div').fadeOut('fast');  // 隐去
  $('div').blowUp('fast'); // 出现
  
  var $p = $('p'); // 这个$p与普通的abc没什么区别，$号在这里没什么特别的意义。
  
  $('div').click(...); // 点击
  
  $('div').click(function(){
      $(this).hide(); // 点哪个div哪个div隐藏，如果把this换成'div'，则点任何一个div，全部div都消失。
      // 注意这个this是没有引号的
  });
  
  $('<p>hello</p>').appendTo('body');
  $('body').append('<p>hello</p>'); // 这两种方法都可以向body中插入一段代码。
  $('#one').after('<p>hello</p>') // 也可以实现插入代码的目的，类似地还有before
  
  #('p').remove(); // 可以把p移除，包含p与其content
  
  $('#text').addClass('hightlighted'); // 给id='text' 加class 'hightlighted'，类似的还有removeClass
  $('#text').toggleClass('hightlighted'); // 自动判断id='text'是否有class='hightlighted'，没有就add，有就remove
  
  $('div').height('200px'); // 可调整div高度，类似的还有width
  
  $('p').html('hello'); // 将第一个p的值置为'hello'
  
  $('p').val(); // 取p的值
  $('input[name=firstinput]').val(); // 取名为firstinput的input的值
  
  $(document).on(click, 'item', function(){
      $(this).remove();
  }); // 这一块都是放在$(document).ready()中的，这里的.on()可以用来删除id=item的元素，对于原先HTML没有，后来创建的元素，一般地remove是删不掉的，只有这种.on()的方法可以。
  
  $(document).keydown(function(){
      $('div').animate({left: '+=10px'}, 500); // 按任意键使div右移10px，延时500ms
  });
  // 注意两点：
  // 1. 应用的是document；
  // 2. animate只有left和top两个方向
  
  parseInt(key.which, 10) //key.which在这里返回一个字符串，10表示将串以10进制转换。parseInt的数字参数(这里即10)的范围是2～36
  

• jQuery UI的一些方法

  $('div').effect('explode'); // 将元素散开
  $('div').effect('bounce', {times: 3}, 500); // 上下弹跳3次，一共500ms
  $('div').effect('slide'); // 从左往右出现
  
  $('div').draggable(); // 可拖动div
  $('div').resizable(); // 可拖动改变大小，注意是resizable，不是resizeable，没有字母"e"
  $('ol').selectable(); //  可高亮选中的li
  $('ol').sortable(); // 可拖动改变顺序
  
  $('#menu').accordion(); //可将menu折叠
  

注意：用jQueryUI和jQuery时都要记得在HTML页面中包含相应的.js文件

http://www.codecademy.com/en/tracks/jquery