一些jQuery 实例

1.HTML 操作

1.1 改变 HTML 元素的内容

设置内容 - text()、html() 以及 val()

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

            $("#changeHTML").click(function () {                $("p").html("this is new HTML");            });

1.2 HTML 元素追加内容

添加新的 HTML 内容

用于添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容

            //向 HTML 元素追加内容            $("#appendHTML").click(function () {                $("ol").append("<li>this is appended item</li>");                $("p").append("<b>this is appeded text</b>");            });            //在 HTML 元素之后追加内容。            $("#before_after_HTML").click(function () {                $("img").before("<b>before</b>");                $("img").after("<b>after</b>");            });

2.CSS 操作

2.1 改变 HTML 元素的 CSS 属性。

jQuery 操作 CSS

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

            //2.1 改变 HTML 元素的 CSS 属性。            $("#changeCSSProperty").click(function () {                $("p").css("background", "red");//$("p").css("background-color", "red");            });            //2.2 改变多个 CSS 属性            $("#changeMultiCSSProperty").click(function () {                $("p").css({ "background-color": "blue", "font-size": "36px" });            //2.3 获得元素的 CSS 属性            $("#getCSSProperty").click(function () {                alert("background color=" + $("div").css("background-color"));            });

3.AJAX 和 jQuery

            //3.1 使用 $(selector).load(url) 来改变 HTML 内容。            $("#ajax_load").click(function () {                $("#div1").load('/Temp/test.txt');            });            //3.2 使用 $.ajax(options) 来改变 HTML 内容。            $("#ajax").click(function () {                //htmlObj = $.ajax({ url: "/Temp/test.txt", async: false });                //$("#div1").html(htmlObj.responseText);                $.ajax({                    url: "/Temp/test.txt", async: true, success: function (data,status) {                        $("#div1").html(data);                    }                });            });