第1天：jQuery效果

1、jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

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

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

示例

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

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

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

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

为了防止文档加载（就绪）之前运行jQuery代码

要将jQuery函数写在document ready函数中

$(document).ready(function){

jQuery函数

}

2、jQuery选择器

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 元素。

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

$("p#demo") 选取所有 id="demo" 的 元素。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 元素。

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

$("p#demo") 选取所有 id="demo" 的 元素。

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

3、jQuery显示或隐藏

jQuery hide()和show()

通过jQuery我们可以使用hide()和show()方法来隐藏和显示HTML元素

例如:

$(“button”).click(function(){

$(“p”).hide(1000);

});

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

jQuery toggle()

jQuery toggle()方法可以切换hide()和show()方法

$(“button”).click(function(){

$(“p”).toggle();

});

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

4、jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

语法：

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

语法：

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

$(document).ready(function(){

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

            $("div").toggle(,function(){

                alert("隐藏完了")

            });

        });

        //向上滑动

        $("#xshd").click(function(){

            $("div").slideUp(,function(){

                // $("div").show(1000);

            });

        });

        //向下滑动

        $("#xxhd").click(function(){

            $("div").slideDown()

        });

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

            $("div").slideToggle("fast");

        });

        $("#sxhddrdc").click(function(){

            $("div").fadeToggle()

        })

    });

    </script>

<body>

    <button class="sxhd">上下滑动</button>

    <button id="xxhd">向下滑动</button>

    <button id="xshd">向上滑动</button>

    <button class="yincang">隐藏</button>

    <button id="sxhddrdc">淡入淡出</button>

    <div></div>

</body>