jQuery 入门笔记

添加jQuery库：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

PS： ../1/.. 可以找到1.*.* 的最高版本。

2.0.2 不再支持IE8-

jQuery语法：

$(selector).action()

文档加载完后执行：

$(document).ready(function(){  
    // [code]
});

PS：如需调用f()函数，f()必须在[code]区调用，而不能取代 function(){}；定义位置可以在 ready() 之内也可以其外。

jQuery选择器( document.querySelector )：

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的第一个元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery事件：

$("button").click(function());
$("button").dblclick(function());
$("input").focus(function());

jQuery效果：

#隐藏/显示

$(selector).toggle(speed,callback);
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

$("p").hide();
$("p").hide(1000);
$("p").hide(fast);
$("p").hide(slow);

#淡入/淡出

$(selector).fadeToggle(speed,callback);
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
// 用法同上，下同
$(selector).fadeTo(speed,opacity,callback);

opacity为透明度，取值范围 (0,1)，值越小越透明

$("#div").fadeTo(slow,0.2);

#滑动

$(selector).slideToggle(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideDown(speed,callback);

#动画

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

.. params[必须] 为 动画形成后的CSS属性

！如需调整位置，元素的position不能为static）

！font-size 需要写成 fontSize 形式

.. speed 当取值为"fast"和"slow"时，切记加引号！

示例：

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"fast");
  div.animate({height:'100px',opacity:'0.4'},1000);        // speed 不需要引号
  div.animate({width:'toggle'},"slow");                          // 使用预定义动画

#停止动画

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

.. stopAll

！默认为false，表示只停止当前动画，然后继续执行队列中的下一个动画；

！改为true后，表示停止队列中所有动画

.. goToEnd 默认为false

！默认为false，表示立马停止动画

！true表示 把当前动画瞬间走完

参见 示例

#Callback

动画结束后执行语句。

$("p").hide(1000,function(){
     alert("The paragraph is now hidden");
});

#Chaining

合并同一元素的动画，节省重复查找元素的时间。

$("p").css("color","white")
          .css("backgroundColor","black")
          .slideUp()
          .slideDown();

PS：各个动画按队列顺序依次执行。

jQuery

jQuery

jQuery

jQuery