JQuery随笔_选择器 JQuery效果

JQuery所有的函数在一个 document.ready()函数中，这是为了防止在文档为加载完成时就执行
函数，导致出现未知错误。
JQuery有两种方式实现在文档就绪后执行相应函数

1.$(doucument).ready(function(){

//自己定义的函数
});
2.$(function(){

//自己定义的函数

});

JQuery
选择器

$("#id")
//通过 ID查找元素

$(".class") //通过class查找元素

$("name") //通过元素名查找元素

$("p.className")
//选取class = className的P元素

$("p:first") //选取第一个p元素

$("ul li:first")
//选取第一个ul 里面的第一个li元素

$("[href]")
//选取带有herf属性的元素

$("a[target='_blank']")
//选取所有target = ‘_blank’的 a 元素；($("a[target!='_blank']") 不等于)

$(":button")
//选取所有
type = button 的input或者button 元素

$("tr:even")
//选取偶数位置的tr元素

$("tr:odd")
//选取奇数位置的突然元素

JQuery效果
hide和show
(隐藏和显示)
$("id
or name or .class").hide(time); //其中的time参数可以是slow或者实际的毫秒数
$("id
or name or .class").show(time); //其中的time参数可以是slow或者实际的毫秒数
fadeIn,fadeOut,fadeToggle和fadeTo(淡入，淡出，淡入淡出，淡化)
fadeIn,fadeOut,fadeToggle中以fadeIn为例子
$("id
or name or .class").fadeIn(time); //其中的time参数可以是slow或者实际的毫秒数
$("id
or name or .class").fadeTo(time,percen); //time参数可以是slow或者实际的毫秒数，

percen是淡化的程度 (0<percen<1.0)
slideDown ,slideUp和slideToggle(向下滑动，向上滑动，交替)

$("id or name or .class").slideDown(time); ////其中的time参数可以是slow或者实际的毫秒数
animate (动画)
$("id
or name or .class").animate({params},time);
//第一个参数是定义形成动画的css属性，动画完成所需的

时间
Example:

$("button").click(function(){
$("div").animate({left:'250px'},2000);
});

注：默认情况下，所有的HTML元素都有一个静态的位置，是不可移动的。如果需要移动元素，
请将元素的css 属性中的position属性设置为relative
， absolute 或者fixed。
当使用 animate() 时，必须使用 Camel
标记法书写所有的属性名，比如，必须使用 paddingLeft
而不是 padding-left，使 用 marginRight
而不是 margin-right，等等。
在animate函数的params属性定义的时候可以使用相对大小
Example:

$("button").click(function(){

$("div").animate({

width ： '+=100px';

},3000);

});

也可以使用预定义值
Example ： width
： 'toggle'
stop() (停止动画)
$(selector).stop(stopAll,goToEnd);
stop() 函数有两个参数 ： 第一个参数stopAll 默认值是false，设置为true时会停止页面所有动画

不设置为true，只会终止当前正在执行的动画，其他后续动画会继续执行。

第二个参数goToEnd 默认值是false，设置为true会立即完成当前动画。
callback(回调函数)
其实在前面提到的几乎所有效果函数都有回调函数,只是没有列出来。
比如 show(time,callback);
回调函数式可选的，其中前面的time参数也是可选输入的，也就是说在所有动画设计的函数中都有默认速度，
time参数是可以不写的(但是一般还是写),callback也是可选输入的，不输入完成动画后就不执行函数
Example:
你想在一个动画执行完成后执行一个function(),这时如果你不把function()设置为该
动画的回调函数，那么可能发生在动画执行前就执行了function()，显然这是不符合要求的。
使用回调函数的格式如下:

$("button").click(function(){

$("div").show(3000,function(){

// your function

})

});

chaining
方法链接
简单来说在一条JQyery语句上执行多个方法
Example：

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