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);