jQuery 学习—1

   1、 jQuery 基础语法是：$(selector).action()

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

     实例

        $(this).hide() - 隐藏当前元素

        $("p").hide() - 隐藏所有段落

        $('p');//html标签

        $("p.test").hide() - 隐藏所有 class="test" 的段落

        $("#test").hide() - 隐藏所有 id="test" 的元素

        $("p.intro") 选取所有 class="intro" 的 <p> 元素。

       $("p#demo") 选取 id="demo" 的第一个 <p> 元素。

       $("ul li:first")  每个 <ul> 的第一个 <li> 元素

       $("[href$='.jpg']")  所有带有以 ".jpg" 结尾的 href 属性的属性

       $("div#intro .head")    id="intro" 的 <div> 元素中的所有 class="head" 的元素

   2、jQuery 使用 $ 符号作为 jQuery 的简介方式

        var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

  3、jQuery 几种常见函数

 jQuery 隐藏和显示

      通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示： 

   语法：

      $(selector).hide(speed,callback)

      $(selector).show(speed,callback)  

      hide() 和 show() 都可以设置两个可选参数：speed 和 callback。

         callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。

         speed 参数可以设置这些值："slow", "fast", "normal" 或 milliseconds   

jQuery 切换

     jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。

     隐藏显示的元素，显示隐藏的元素。

    语法：

      $(selector).toggle(speed,callback)

jQuery 滑动函数 - slideDown, slideUp, slideToggle

        $(selector).slideDown(speed,callback)

        $(selector).slideUp(speed,callback)

        $(selector).slideToggle(speed,callback)

jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()

        $(selector).fadeIn(speed,callback)

        $(selector).fadeOut(speed,callback)

        $(selector).fadeTo(speed,opacity,callback)

 fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。

jQuery 自定义动画

jQuery 函数创建自定义动画的语法：

    $(selector).animate({params},[duration],[easing],[callback])

关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性：

    animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

第二个参数是 duration。它定义用来应用于动画的时间。它设置的值是："slow", "fast", "normal" 或 毫秒。

总结：

函数	描述
$(selector).hide()	隐藏被选元素
$(selector).show()	显示被选元素
$(selector).toggle()	切换（在隐藏与显示之间）被选元素
$(selector).slideDown()	向下滑动（显示）被选元素
$(selector).slideUp()	向上滑动（隐藏）被选元素
$(selector).slideToggle()	对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()	淡入被选元素
$(selector).fadeOut()	淡出被选元素
$(selector).fadeTo()	把被选元素淡出为给定的不透明度
$(selector).animate()	对被选元素执行自定义动画

    注意：

动画创造了对 callback 函数的需求。

由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。

为了避免这个情况，您可以以参数的形式添加 Callback 函数。

当动画 100% 完成后，即调用 Callback 函数。

典型的语法：

$(selector).hide(speed,callback)

callback 参数是一个在 hide 操作完成后被执行的函数。