jQuery语法函数大解析

$(document).ready(function () {//这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。            $("button").click(function () {                // $("p").css("background-color", "red");                // $("p").hide("slow");隐藏                //$("p").toggle("slow");显示隐藏 它可以取以下值："slow"、"fast" 或毫秒。                              //jQuery 拥有下面四种 fade 方法： 您可以实现元素的淡入淡出效果。                //fadeIn() 潜入                //fadeOut() 浅出                //fadeToggle() 浅出浅入                //fadeTo() fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。（值介于 0 与 1 之间）。$("#div1").fadeTo("slow",0.15);  设置透明度                $("#div4").fadeIn();                $("#div5").fadeIn("slow");                $("#div6").fadeIn(3000);                //jQuery 滑动方法                //slideDown()方法用于向下滑动元素                //slideUp()方法用于向上滑动元素。                //slideToggle()方法可以在 slideDown() 与 slideUp() 方法之间进行切换                //jQuery 动画 - animate() 方法jQuery animate() 方法用于创建自定义动画。                //$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。                //可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。                //可选的 callback 参数是动画完成后所执行的函数名称。                //方法一                //$("button").click(function(){                //    $("div").animate({left:'250px'});                //});                //方法2                //$("button").click(function(){                //    var div=$("div");                  //    div.animate({left:'100px'},"slow");                //    div.animate({fontSize:'3em'},"slow");                               //jQuery stop() 方法                //jQuery stop() 方法用于停止动画或效果，在它们完成之前。                //stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。                $("#button").click(function () {                    $("#panel").stop();                });                // $(selector).hide(speed, callback)callback当动画 100% 完成后，即调用 Callback 函数。                如：                $("p").hide(1000, function () {                    alert("The paragraph is now hidden");                });                //通过 jQuery，您可以把动作/方法链接起来。  Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。                $("#p1").css("color", "red")               .slideUp(2000)               .slideDown(2000);                //jQuery DOM 操作                //三个简单实用的用于 DOM 操作的 jQuery 方法：                //text() - 设置或返回所选元素的文本内容                 //html() - 设置或返回所选元素的内容（包括 HTML 标记）                 //val() - 设置或返回表单字段的                $("#btn1").click(function () {                    alert("Text: " + $("#test").text());                });                $("#btn2").click(function () {                    alert("HTML: " + $("#test").html());                });                //Query attr() 方法用于获取属性值。                $("button").click(function () {                    alert($("#w3s").attr("href"));                });                //设置内容 - text()、html() 以及 val() 给找到的点赋值                $("#btn1").click(function () {                    $("#test1").text("Hello world!");                });                $("#btn2").click(function () {                    $("#test2").html("<b>Hello world!</b>");                });                $("#btn3").click(function () {                    $("#test3").val("Dolly Duck");                });                $("button").click(function () {                    $("#w3s").attr({                        "href": "http://www.w3school.com.cn/jquery",                        "title": "W3School jQuery Tutorial"                    });                });                //通过 jQuery，可以很容易地添加新元素/内容。                //append() - 在被选元素的结尾插入内容                 //prepend() - 在被选元素的开头插入内容                 //after() - 在被选元素之后插入内容                 //before() - 在被选元素之前插入内容                 //jQuery，可以很容易地删除已有的 HTML 元素。                //remove() - 删除被选元素（及其子元素） $("#div1").remove();                //empty() - 从被选元素中删除子元素 $("#div1").empty();                //remove() - 过滤删除被选元素（及其子元素） $("p").remove(".italic");                //jQuery 操作 CSS                //addClass() - 向被选元素添加一个或多个类                 //removeClass() - 从被选元素删除一个或多个类                 //toggleClass() - 对被选元素进行添加/删除类的切换操作                 //css() - 设置或返回样式属性                 $("button").click(function () {                    $("h1,h2,p").addClass("blue");//blue,important是样式名字                    $("div").addClass("important");                });                //您也可以在 addClass() 方法中规定多个类：                $("button").click(function () {                    $("#div1").addClass("important blue");                });                $("button").click(function () {                    $("h1,h2,p").removeClass("blue");                });                $("button").click(function () {                    $("h1,h2,p").toggleClass("blue");                });                //jQuery css() 方法                $("p").css("background-color");//返回属性                $("p").css("background-color","yellow");//设置属性                $("p").css({ "background-color": "yellow", "font-size": "200%" });//设置多个属性                //通过 jQuery，很容易处理元素和浏览器窗口的尺寸。                //width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。                //height()  方法设置或返回元素的高度（不包括内边距、边框或外边距）。                //innerWidth()方法返回元素的宽度（包括内边距）。                //innerHeight()方法返回元素的高度（包括内边距）。                //outerWidth()方法返回元素的宽度（包括内边距、边框和外边距）。                //outerHeight()方法返回元素的高度（包括内边距、边框和外边距）。                $("button").click(function () {                    var txt = "";                    txt += "Width: " + $("#div1").width() + "</br>";                    txt += "Height: " + $("#div1").height();                    $("#div1").html(txt);                });            });        });