jQuery学习笔记一

语法：

$(selector).action()

$(document).ready(function(){

});

选择器：

元素选择器：

$("p")
$("p.id")
$("p#class")

属性选择器：

$("[href]")
$("[href = '#')")
$("[href\$='.jpg']")

CSS选择器：

$("p").css("color", "red");

\$("ul li:first")
\$("div#intro .head")  

jQuery事件：

事件函数

$(document).ready(function(){
    $("button").click(function(){
       $("p").hide();
    });
});

名字冲突

其他JavaScript库也会使用$符号 所以可以使用自定义名字来替代$符号
var jq = jQuery.noConflict()
$.noConflict() 使用jQuery来替代$

jQuery事件

$(document).ready(function)
$(selector).click(function)
$(selector).dbclick(function)
$(selector).focus(function)
$(selector).mouseover(function)

jQuery隐藏/显示

$("#hide").click(function(){
    $("p").hide();
});

$("p").show();
$("p").toggle();//切换隐藏与显示

$(selector).hide(speed, callback)//speed可选slow, fast 或是 毫秒

jQuery淡入淡出

fadeIn(speed, callback)  // 淡入已隐藏元素
fadeOut() // 淡出可见元素
fadeToggle()// 切换淡入与淡出
fadeTo(speed, opacity, callback) //必需的 opacity 参数 设置为给定的不透明度 介于 0 与 1 

jQuery滑动

slideDown() // 向上滑动
slideUp()// 向下滑动
slideToggle()// 切换滑动 向上滑动的元素变为向下滑动

jQuery动画

$(selector).animate({params}, speed, callback)
/* 
     params <R>(required) 形成动画的css参数
     speed <O>(optional) 规定时长
     callback<O> 回调函数
*/

• 默认地，所有 HTML 元素都有一个静态位置，且无法移动**。
  如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
• 当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
• 也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

• 使用预定义值
  您甚至可以把属性的动画值设置为 “show”、”hide” 或 “toggle”：

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

• 编写多个animate() 按照队列顺序执行

jQuery停止动画

$(selector).stop(stopAll, goToEnd);
// stopAll <O> <D>(default)[false] 停止所有动画效果 默认为false 仅停止当前活动动画执行后续队列
//   goToEnd <O> <D>[false] 立即完成当前动画

jQuery Callback

$(selector).action(speed, callback)

需要在动作执行完之后执行语句 则需要使用callback参数
类如：

$("p").hide(5000);
alert("1");

则会先弹窗再隐藏模块
正确应该这么写：

$("p").hide(5000, function(){
    alert("1");
});

jQuery Chaining

如需链接一个动作，您只需简单地把该动作追加到之前的动作上

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

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