jQuery笔记（二）基本语法和效果

基本语法

$(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

选择器

• 选择器可以使用 this、id（#）、class（.）、html元素（如p）
• 后代选择，如$("ul li:first")，选取ul的第一个li
• =等于，!=不等于，$("[href$='.jpg']")，替代部分，以.jpg结尾

命名冲突

var jq=jQuery.noConflict()

jQ效果

jQ事件

• click 
• dbclick
• focus
• mouseover

 

 效果

几种都分有出现、消失、切换模式。参数为speed和callback

隐/现/切：hide/show/toggle

淡入/淡出/切/切换至：fadeIn/fadeOut/fadeToggle/fadeTo

滑出/滑走/切：slideDown/slideUp/slideToggle

 

动画

语法：

$(selector).animate({params},speed,callback);

实例

params可以是绝对的，相对的，或者toggle等预设值

$("button").click(function(){
  $("div").animate({
    left:'250px',//绝对值
    opacity:'0.5',
    height:'+=150px',//相对值
    width:'toggle'
  });
}); 

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right。

默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute

队列动画

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

jQuery stop() 方法

语法

$(selector).stop(stopAll,goToEnd);

 jQuery Callback 函数

$(selector).hide(speed,callback) 

注意callback函数要写在里面， 这样才会在动画完全执行完毕后实现，单独书写callback函数，那么alert一类的callback会先执行。

jQuery - Chaining方法链接

$("#p1").css("color","red").slideUp(2000).slideDown(2000);