jQuery的使用

jQuery的下载安装

1：从 jquery.com 下载 jQuery 库
2：从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

安装

把下载好的jQuery安装到web文件目录，在html页面用

<script src="..."></script>
就可以用啦！

概述

jQuery还一个javascript函数库
他通过选取html标签对元素进行操作

语法

基本语法 ：$(selector).action()
美元符号定义jQuery
选择器选择HTML元素
action对元素进行操作

实例

$(this).hide() 隐藏当前标签
$(“p”).hide() 隐藏所有 p 标签
$(“p.test”).hide() 隐藏所有的class=“test” 的p 标签
$("#test").hide() 隐藏 id = "test"的元素

记载时机

load: 只执行一次 如果执行第二次第一次就会被覆盖 执行时机 必须在网页全部加载完毕后才执行包裹里的代码
ready: 可执行多次 第n 次不会覆盖上一次结果 执行时机 至于等待网页中的dom结构加载完毕后就会执行包裹代码

window.load = function（）{
}

$(document).ready(function(){
执行代码
});

/*//点击按钮所有p消失
    $(document).ready(function () {
        $("button").click(function () {
            $("p").hide();
        });
    });
    //点击按钮id为test的元素消失
    $(document).ready(function () {
        $("button").click(function () {
            $("#test").hide();
        })
    })*/
    /*//class="ttt"的元素
    $(document).ready(function () {
        $("button").click(function () {
            $(".ttt").hide();
        });
    });*/
    //所有元素
    /*$(document).ready(function () {
        $("button").click(function () {
            $("*").hide();
        })
    })*/
    //所有p 标签的class为rrr的元素
    /*$(document).ready(function () {
        $("button").click(function () {
            $("p.rrr").hide();
        })
    })*/
    //当点击某个元素时触发隐藏
    /*$("div").click(function () {
        $(this).hide();
    })*/
    //双击时出发某事件
    /*$("p").dblclick(function () {
        $(this).hide();
    })*/
    /*$("p").mouseenter(function () {
        alert("你的鼠标移动到了p上")
    })*/
    //鼠标离开
    /*$(".ttt").mouseleave(function () {
        alert("鼠标离开了")
    })*/
    /*$("div").mousedown(function () {
        alert("鼠标按下div")
    })*/
    /*$(".rrr").hover(function () {
        alert("你进入了rrr")
    },
    function () {
        alert("离开了，拜拜");
    })*/
    //淡入已隐藏的元素
    /*$(document).ready(function () {
        $("button").click(function () {
            $("#div1").fadeIn();
            $("#div2").fadeIn("slow");//man
            $("#div3").fadeIn(5000);//毫秒
        })
    })*/
    //淡出显示的元素 隐藏
    /*$(document).ready(function () {
        $("button").click(function () {
            $("#div1").fadeOut();
            $("#div2").fadeOut("slow");//man
            $("#div3").fadeOut(5000);//毫秒
        })
    })*/
    //淡入和淡出的结合
    /*$(document).ready(function () {
        $("button").click(function () {
            $("#div1").fadeToggle();
            $("#div2").fadeToggle("slow");//man
            $("#div3").fadeToggle(5000);//毫秒
        })
    })*/
    $(document).ready(function () {
        $("button").click(function () {
            $("#div1").fadeTo("slow",0.15);
            $("#div2").fadeTo("slow",0.5);//man
            $("#div3").fadeTo("slow",0.9);//毫秒
        })
    })